/* ===============================================================
   1. HEADLINE h2
     =============================================================== */
.seiten-wrapper h2 {
    font-size: 4.3rem;        /* Desktop */
    letter-spacing: 1px;
    line-height: 1.0;
    margin-top: 0px;
    text-align: left;
    color: var(--schriftfarbe);
    margin-bottom: 30px; /* +++++++++++++++++++++++++++++++++++++++++++ 1. ABSTAND DER ÜBERSCHRIFTEN ALLER SECTIONS NACH UNTEN  +++++++++++++++++++++++ */
}

/* ================================
   H2 - iPad Portrait
================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .seiten-wrapper h2 {
        font-size: 3.3rem;
        letter-spacing: var(--h2-spacing);
        line-height: 1.3;
        margin-top: 0px;
    }
}

/* ================================
   H2 - iPad Landscape
================================= */
@media (min-width: 1024px) and (max-width: 1266px) {
    .seiten-wrapper h2 {
        font-size: 3.5rem;
        letter-spacing: var(--h2-spacing);
        line-height: 1.3;
        margin-top: 0px;
    }
}

/* ================================
   H2 - iPhone Portrait
================================= */
@media (max-width: 767px) {
    .seiten-wrapper h2 {
        font-size: 3.3rem;
        letter-spacing: var(--h2-spacing);
        line-height: 1.3;
        margin-top: 0px;
    }
}


/* ================================
   H2 - iPhone Landscape
================================= */
@media (min-width: 481px) and (max-width: 767px) {
    .seiten-wrapper h2 {
        font-size: 3.5rem;
    }
}

/* ========================================
   2. HERO-BEREICH 
   ======================================== */
   
/* Fullwidth-Variante */
.hero-fullwidth .hero-image {
    width: 100%;
    height: var(--hero-banner-height);  /* Höhe des Bildes - Wert kommt aus headline.css */
    object-fit: cover;
    display: block;
}

.hero-fullwidth {
  width: 100%;
  background-color: var(--hauptfarbe);
  overflow: hidden;
  margin-bottom: 80px; /* +++++++++++++++++++++++++++++++++++++++++++++ 2. ABSTAND UNTER DEM BANNER ZUR H2 = 80px ++++++++++++++++++++++++ */
}

/* -----------------------------------------------------------
   Media Querys für den Abstand unter dem Banner zur h2
   -------------------------------------------------------- */

/* iPhone Portrait */
@media (max-width: 480px) {
    .hero-fullwidth {
        margin-bottom: 60px;
    }
}

/* iPhone Landscape */
@media (min-width: 481px) and (max-width: 767px) {
    .hero-fullwidth {
        margin-bottom: 60px;
    }
}

/* iPad Portrait */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-fullwidth {
        margin-bottom: 60px;
    }
}

/* iPad Landscape */
@media (min-width: 1024px) and (max-width: 1266px) {
    .hero-fullwidth {
        margin-bottom: 70px !important;
    }
}

/* ------------------ Ende Media Querys ----------------------------------------- */

.hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-image {
  flex: 1 1 50%;
  background: url("https://lostgen.art/banner/banner.webp") center center / cover no-repeat;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 0px 60px;   /* macht ab 41px  den blauen Bereich nach oben und unten größer als das Bild - 60px Abstand Text nach rechts vom Bild  */
  color: #fff;
  box-sizing: border-box;
}

.hero-text h1 {
  font-size: 3.5rem;
  font-weight: 300;
  letter-spacing: 2px;
  margin-top: 15px; /* Abstand der h1 von der h3 */
  margin-bottom: 50px; /* 50px = Abstand der h1 vom Button darunter  */
  text-transform: uppercase;
  line-height: 1.3;
  color: #f8f8f8;
}

.hero-text h3 {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: #d6dee2; 
  margin-top: 0px; /* Abstand der h3 von oben */
}

/* Hero-Button Standardzustand */
.hero-button {
  font-size: 1.7rem;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  text-decoration: none !important;
  padding: 10px 20px;
  border-radius: 6px;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.hero-button:visited,
.hero-button:active,
.hero-button:focus {
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  text-decoration: none !important;
  outline: none !important;
}

.hero-button:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: #226688 !important;
  border: 1px solid #226688 !important;
  text-decoration: none !important;
}

/* --------------------------------------------------
   2. HERO-BEREICH - MEDIA QUERY FÜR IPAD LANDSCAPE 
   ------------------------------------------------ */

@media (min-width: 1024px) and (max-width: 1266px) {

  .hero-fullwidth {
    height: 300px; /* Bannerhöhe */
  }

  /* Hero-Text verschieben und anpassen */
  .hero-text {
    transform: translateY(-0px);   /* Abstand des Textes vom oberen Rand der blauen Box - je kleiner die Zahl nach dem Minus, umso weiter geht er nach unten  */

    padding: 40px;   /* Abstand des Textes vom Bild */
  }

  .hero-text h1 {
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 60px; /* 40px = Abstand der h1 vom Button darunter  */
  }

  .hero-text h3 {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .hero-button {
    font-size: 1.6rem;
    padding: 8px 18px;
  }
}

/* ----------------------------------------------------
   2. HERO-BEREICH - MEDIA QUERY FÜR IPAD PORTRAIT
   ---------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  
  .hero-fullwidth {
    height: 230px; /* Bannerhöhe */
  }
    
  /* Hero-Text verschieben und anpassen */
  .hero-text {
    transform: translateY(-10px); /* Abstand des Textes vom oberen Rand der blauen Box - je kleiner die Zahl nach dem Minus, umso weiter geht er nach unten  */
    padding: 30px; /* Abstand des Textes vom Bild */
  }
    
  /* Schriftgrößen im Hero */
  .hero-text h1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 40px; /* 40px = Abstand der h1 vom Button darunter  */
  }

  .hero-text h3 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  /* Hero-Button anpassen */
  .hero-button {
    font-size: 1.4rem;
    padding: 6px 14px;
  }
}

/* ----------------------------------------------------
   2. HERO-BEREICH - MEDIA QUERY FÜR IPHONE LANDSCAPE
   ---------------------------------------------------- */

@media (min-width: 481px) and (max-width: 767px) {
  
  .hero-fullwidth {
    height: 200px;
  }

  /* Hero-Text verschieben und anpassen */
  .hero-text {
    transform: translateY(-20px); /* Abstand des Textes vom oberen Rand der blauen Box - je kleiner die Zahl nach dem Minus, umso weiter geht er nach unten  */
    padding: 30px;
  }

  .hero-text h1 {
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0px; /* Abstand der h1 von der h3 */
    margin-bottom: 30px; /* 40px = Abstand der h1 vom Button darunter  */
  }

  .hero-text h3 {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .hero-button {
    font-size: 1.6rem;
    padding: 8px 18px;
  }
}

/* ----------------------------------------------------
   2. HERO-BEREICH - MEDIA QUERY FÜR IPHONE PORTRAIT
   ---------------------------------------------------- */

@media (max-width: 480px) {

  
  .hero-fullwidth {
    height: 390px; /* Bannerhöhe */
  }
    
  /* --- Scrollen links/rechts komplett verhindern --- */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Hero-Bild untereinander und volle Breite */
  .hero-row {
    display: block !important; /* zerlegt flex ? Bild bekommt echte Höhe */
  }

  .hero-image {
    background: url("https://lostgen.art/banner/banner-m.webp") center center / cover no-repeat !important;
    height: 215px !important; /* Höhe des Bannerbildes */
    width: 100% !important;
    display: block !important;
  }

  /* Hero-Text verschieben und anpassen */
  .hero-text {
    transform: translateY(-5px);
    padding: 30px;
  }

  .hero-text h1 {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px; /* 40px = Abstand der h1 vom Button darunter  */
     margin-top: 0;
  }

  .hero-text h3 {
    font-size: 1.7rem;
    line-height: 1.3;
  }

  /* Hero-Button anpassen */
  .hero-button {
    font-size: 1.6rem;
    padding: 6px 14px;
  }
}



/* ===============================================================
   3. BILDREIHEN
   =============================================================== */

/* --- BASIS-LAYOUT VARIANTE 3  --- */
.variante3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten Standard */
  gap: 35px; /* Abstand zwischen den Bildern */
  margin-bottom: 90px; /* +++++++++++++++++++++++++++++++++++++++++++ 3. ABSTAND DER SECTION BILDERREIHE NACH UNTEN = 90px +++++++++++++++++++++++ */
  }

.variante3-item {
  display: flex;
  flex-direction: column;
  text-align: left; /* Standardmäßig linksbündig */
  overflow: hidden;
}

/* Bild-Styling */
.variante3-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bildunterschrift */
.variante3-caption {
  margin-top: 20px; /* Abstand der Überschrift vom Bild */
  font-size: 2.0rem;  /* Schriftgröße */
  font-weight: bold; /* Schriftstärke */
  color: var(--schriftfarbe);
  padding-left: 5px; /* Einrückung nach rechts */
}

/* Text unter Bildunterschrift */
.variante3-subcaption {
  font-size: 1.9rem; 
  color: var(--schriftfarbe);
  margin-top: 8px; /* Abstand des Textes von der Überschrift */
  display: block;
  padding-left: 5px; /* Einrückung nach rechts */
}

/* Container benötigt position: relative, damit das Overlay korrekt darin liegt */
.variante3-link-container {
    position: relative;
    display: block; /* Wichtig, damit es korrekt funktioniert */
    text-decoration: none;
    color: inherit;
}

/* Stil des Overlays (unsichtbar) */
.variante3-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4); /* Weißer Schleier mit 40% Transparenz */
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease; /* Weicher Übergang beim Einblenden */
    pointer-events: none; /* Sorgt dafür, dass der Klick durch das Overlay auf den Link geht */
}

/* Effekt beim Hover: Zeigt das Overlay an */
.variante3-link-container:hover .variante3-overlay,
.variante3-link-container:focus .variante3-overlay {
    opacity: 1; /* Blendet den weißen Schleier ein */
}

/* Optional: Bild selbst leicht aufhellen für einen stärkeren Effekt */
.variante3-link-container:hover img {
    filter: brightness(105%); 
    transition: filter 0.3s ease;
}

/* Standardzustand des Bildes (ohne Helligkeitsfilter) */
.variante3-item img {
    filter: brightness(100%);
    transition: filter 0.3s ease;
}

/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPAD LANDSCAPE
   ---------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1266px) {
  
  .variante3-grid {
    gap: 25px; /* Bildabstand */
  }
}

/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPAD PORTRAIT
   ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {  
  .variante3-grid {
    gap: 20px; /* Bildabstand */
  }
}

/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPHONE LANDSCAPE
   ---------------------------------------------------- */
@media (min-width: 481px) and (max-width: 767px) {  
  
  .variante3-grid {
    gap: 30px; /* Bildabstand */
    margin-bottom: 50px;      /* +++++++++++++++++++++++++++++++++++++++++ Abstand unter der Section Bildreihe ++++++++++++++++++++++++++++++++++ */
  }

  .variante3-caption {
     font-size: 1.7rem;
   }
}

/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPHONE PORTRAIT
   ---------------------------------------------------- */
@media (max-width: 480px) {
  
  .variante3-grid {
      grid-template-columns: 1fr; /* Nur noch EINE Spalte */
        margin-bottom: 25px;      /* +++++++++++++++++++++++++++++++++++++++++ Abstand unter dem dritten Bild  ++++++++++++++++++++++++++++++++++ */
  }
  
  .variante3-item {
      text-align: left !important; /* Seitenzentrierung */
        margin-bottom: 25px;      /* +++++++++++++++++++++++++++++++++++++++++ Abstand unter den Einzelbildern  ++++++++++++++++++++++++++++++++++ */
  }
  
  .variante3-caption,
  .variante3-subcaption {
      padding-left: 0px !important; /* Kein Padding, da zentriert */
  }
}

/* ===============================================================
   4. TEXT-SECTION
   =============================================================== */

/* Wrapper */
.variante5-wrapper {
    --variante5-title-size: 2.2rem;
    --variante5-paragraph-size: 2.0rem;
    background: transparent;
    padding: 2em 0 0 0;  /* Abstand oben optional */
    box-shadow: none;
    margin: 0;
}

/* Abstand links/rechts zwischen Container und Textboxen */
.variante5-text-content {
    padding-left: 0px;
    padding-right: 0px;
}

.variante5-grid {
    display: flex;          /* Flexbox aktivieren */
    gap: 3em;               /* Abstand zwischen den Boxen */
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 90px; /* +++++++++++++++++++++++++++++++++++++++++++ 3. ABSTAND DER SECTION TEXT NACH UNTEN = 90px +++++++++++++++++++++++ */
}

.variante5-item {
    background: #e6dfd5;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05);
    padding: 2em;
    flex: 1 1 0;            /* alle Items gleich breit & gleich hoch */
    display: flex;
    flex-direction: column;  /* Text und Button untereinander */
}

/* Gleich hoch sicherstellen: Inhalt streckt Item */
.variante5-item .variante5-text-content {
    flex: 1 1 auto;
}

/* Optional: Abstand untereinander, falls untereinander angeordnet (Mobile) */
.variante5-item:last-child {
    margin-bottom: 0;
}

/* Einzelne Text-Boxen */
.variante5-item {
    flex: 1 1 45%;
    padding: 2.0em;   /* Innenabstand des Textes vom Rand */
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-radius: 10px;
}

/* Textinhalt */
.variante5-text-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    padding-bottom: 0; /* Abstand des Buttons vom Text */
}

/* Überschrift */
.variante5-title {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: var(--variante5-title-size);
    margin-top: 20px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand zum Fließtext */
    color: var(--schriftfarbe);
    text-align: left;
}

/* Balken links neben der Überschrift */
.variante5-title-bar {
    position: absolute;
    left: -12px;
    top: 0;
    width: 7px;
    height: 100%;
    background-color: #226688;
}

/* Paragraphen */
.variante5-item p {
    font-size: var(--variante5-paragraph-size);
    color: var(--schriftfarbe);
    margin-bottom: 0;
    line-height: 1.4;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto; 
    -ms-hyphens: auto;
}

/* Button-Container */
.text-right {
    text-align: right;
    margin-top: 20px;
}

/* Button */
.variante5-button-link {
    display: inline-block;
    padding: 0.6em 1.2em;
    font-weight: bold;
    text-decoration: none;
    color: #226688;
    border: 2px solid #226688;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: transparent;
}

.variante5-button-link:hover {
    background-color: #226688;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.variante5-wrapper {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 30px links/rechts Abstand IN den weißen Textboxen */
.variante5-text-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Abstand links/rechts zwischen Container und weißen Boxen */
.variante5-wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Hintergrundfarbe in den weißen Boxen auf #e6dfd5 setzen */
.variante5-item {
    background: #e6dfd5 !important;
}

/* ----------------------------------------------------
   4. TEXT-SECTION - Linkbox
   ---------------------------------------------------- */
.variante5-button-link {
    display: block; /* Nimmt die volle Breite ein */
    margin-top: 0px; /* Abstand zum Absatz darüber */
    text-align: right; /* Rechtsbündige Ausrichtung */
    text-decoration: none;
    
    /* Button-Styling */
    display: inline-block; /* Muss inline-block sein, um sich dem Inhalt anzupassen, aber rechtsbündig zu bleiben */
    border: 1px solid var(--schriftfarbe); /* Dünner Rahmen in Schriftfarbe */
    color: var(--schriftfarbe);           /* Textfarbe */
    color: var(--hauptfarbe);           /* Textfarbe */
    padding: 8px 12px;                            /* Innenabstand der Box */
    border-radius: 4px;                           /* Abgerundete Ecken */
    background-color: transparent;                /* Transparenter Hintergrund */
    transition: background-color 0.3s ease;       /* Weicher Übergang beim Hover */
}

/* Die beiden Zeilen im Button */
.variante5-button-link span {
    display: block; /* Jedes Span in einer neuen Zeile */
    line-height: 1.1; /* Engerer Zeilenabstand */
    font-weight: normal;
}

/* Hover-Effekt: Hintergrund wird dunkler */
.variante5-button-link:hover,
.variante5-button-link:focus {
    background-color: #f0f0f0; /* Hintergrund */
    color: var(--hauptfarbe); /* Text inHauptfarbe */
    text-decoration: none; /* kein Unterstrich beim Hover */
    }

.variante5-item {
    text-align: right; /* Box rechtsbündig */
}

/* ----------------------------------------------------
   4. TEXT-SECTION - MEDIA QUERY FÜR IPHONE LANDSCAPE
   ---------------------------------------------------- */
@media (min-width: 481px) and (max-width: 767px) {
      .variante5-grid {
            gap: 30px; /* Abstand zwischen den Textblöcken */
        margin-bottom: 50px; /* +++++++++++++++++++++++++++++++++++++++++++ 3. Abstand der Section Text nach unten = 50px +++++++++++++++++++++++ */
      }
  
      .variante5-title {
           font-size: 2.0rem; /* Schriftgröße */
      }

    .variante5-wrapper {
        padding-top: 0px !important; /* Abstand zur oberen Section */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .variante5-text-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Padding der weißen Boxen reduzieren */
    .variante5-item {
        padding: 1em !important; /* oder 0, je nach Wunsch */
    }

    .variante5-title-bar {
        display: none !important;
    }
}

/* --------------------------------------------------
   4. TEXT-SECTION - MEDIA QUERY FÜR IPHONE PORTRAIT
   -------------------------------------------------- */
@media (max-width: 480px) {
  .variante5-grid {
    /* Wechsel zu einer einzigen Spalte für alle Handys */
    grid-template-columns: 1fr;
    margin-bottom: 50px; /* +++++++++++++++++++++++++++++++++++++++++++ 3. Abstand der Section Text nach unten = 50px +++++++++++++++++++++++ */
  }
  
  .variante5-title {
    /* Anpassung der Schriftgröße für kleinere Bildschirme */
    font-size: 2.0rem; 
  }

    .variante5-grid {
        flex-direction: column !important;
        gap: 2em !important;
    }
    
    .variante5-wrapper {
        background: transparent !important;  /* grauer Hintergrund entfernen */
          padding: 0px 0px 0px 0px !important;  /* ##############  KANN EIGENTLICH RAUS - wird nicht gebraucht, da alles Null  Abstand über der Textsection: oben: 0px, li + re: 0px, unten: 0px */
        box-shadow: none !important;
        margin: 0 !important; /* Margin oben wird durch Padding ersetzt */
    }

    .variante5-item {
        flex: 1 1 100% !important;
        background: #e6dfd5 !important;  /* weiße Box */
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 30px !important;  /* +++++++++++++++++++++++++++++++++++ Abstand zwischen den gestapelten Textblöcken ++++++++++++++++++++++ */
    }

    .variante5-grid .variante5-item:last-child {
        margin-bottom: 0 !important;
    }    
    
    .variante5-text-content {
        padding: 0 10px !important; /* innen Abstand links/rechts */
    }

    .variante5-title-bar,
    .variante5-title span:first-child {
        left: -8px !important;
        width: 5px !important;
    }

    /* ================== Button ================== */
    .variante5-item .text-right {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        text-align: right !important;  /* oder center, je nach Wunsch */
        width: 100%;
    }

    .variante5-button-link {
        display: inline-block !important;
    }

    /* ================== Balken vor Überschrift entfernen ================== */
    .variante5-title-bar {
        display: none !important;
    }
}

/* ----------------------------------------------------
   4. TEXT-SECTION - MEDIA QUERY FÜR IPAD LANDSCAPE
   ---------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1266px) {

  .variante5-grid {
    gap: 40px;                             /* +++++++++++++++++++++++++++++++++  iPad Ls - Abstand zwischen den beiden Textblöcken +++++++++++++++++++++++++++*/
  }
  .variante5-title {
    font-size: 2.5rem; /* Schriftgröße */
  }
}

/* ----------------------------------------------------
   4. TEXT-SECTION - MEDIA QUERY FÜR IPAD PORTRAIT
   ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .variante5-grid {
    gap: 35px;                             /* +++++++++++++++++++++++++++++++++  iPad Pr - Abstand zwischen den beiden Textblöcken +++++++++++++++++++++++++++*/
  }

  /* Passt die Schriftgröße der Überschriften an */
  .variante5-title {
    font-size: 2.0rem; /* Schriftgröße */
  }

  .variante5-grid {
    gap: 35px;  /* Abstand zwischen den Textblöcken */
  }

  .variante5-title {
    font-size: 2.0rem;
  }

  /* Abstand des Textes vom Boxenrand über die Box selbst steuern */
  .variante5-item {
    padding-left: 10px !important;   /* links */
    padding-right: 10px !important;  /* rechts */
    padding-top: 15px !important;    /* optional oben */
    padding-bottom: 15px !important; /* optional unten */
  }
}

/* ===============================================================
   5. NEWSLETTER
     =============================================================== */
/* Container für den Hintergrund und Padding */
.newsletter-section .newsletter-container-inner {
    background: #e6dfd5;
    padding: 4em 2em;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-radius: 10px; /* Radius für die graue Box */
    max-width: 1140px;
    margin: 0 auto;
    margin-bottom: 90px; /* +++++++++++++++++++++++++++++++++++++++++++ 4. ABSTAND DER SECTION NEWSLETTER + THEMA DES MONATS NACH UNTEN = 90px +++++++++++++++++++++++ */
}

/* Flexbox für die Boxen */
.newsletter-section .newsletter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;   /* Abstand der weißen Boxen in der grauen Box */
    justify-content: space-between; /* gleichmäßiger Abstand */
    margin-top: 0em; /* Abstand der weißen Boxen nach oben zum grauen Rand */
}

/* Einzelne Boxen */
.newsletter-section .newsletter-box {
    background: #fff;
    padding: 1em 1em;  /* ob-un-Abstand des Textes in der weißen Box: 1em - li-re-Abstand des Textes in der weißen Box: 1em */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-radius: 6px;
    flex: 1 1 calc(25% - 1.125em); /* 4 Boxen pro Reihe minus Lücken */
    box-sizing: border-box;
    text-align: center;
}

.newsletter-box {
    background-color: #fff; /* Hellerer Hintergrund auf Mobilgeräten */
    border: 0px solid #ddd; /* Rahmen hinzufügen (die 0px machen den Rahmen unsichtbar, falls gewünscht) */
    border-radius: 5px;     /* Abgerundete Ecken */
    margin-bottom: 0px;     /* Abstand zwischen den gestapelten Boxen (falls notwendig) */
  }

.newsletter-box a {
      display: block;
      font-size: 2rem;
      text-decoration: none;
      text-align: center;
      padding: 1rem;
      border: 1px solid #ccc;
      border-radius: 0.5rem;
      color: var(--hauptfarbe);
      transition: all 0.3s ease;
      font-weight: bold; /* Aus dem zweiten a-Block übernommen */
}

/* Die Buttons */
.newsletter-section .newsletter-button {
    display: inline-block;
    padding: 0.1em 0.1em;
    font-weight: bold;
    text-decoration: none;
    color: #226688;
    border: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: transparent;
}

.newsletter-section .newsletter-button:hover {
    background-color: #226688;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* -----------------------------------------------------------
   5. NEWSLETTER - Media Querys
   -------------------------------------------------------- */
/* iPhone Portrait */
@media (max-width: 480px) {
  .newsletter-section {
    margin-bottom: 0;  /* Section selbst hat keinen Außenabstand */
    padding-bottom: 0; /* kein zusätzliches Padding */
  }

  .newsletter-section h2 {
    margin-top: 0;      /* entfernt oberen Abstand */
    margin-bottom: 30px; /* ++++++++++++++++++++++++++++++++++++ Abstand h2 zum Inhalt ++++++++++++++++++++++++++++++++++ */
  }

  .newsletter-section .newsletter-container-inner {
    margin-bottom: 50px; /* ++++++++++++++++++++++++++++++++++++ Abstand Sections Newletter + TdM nach untern ++++++++++++++++++++++++++++++++++ */
  }

  .newsletter-box {
    flex: 1 1 100%;
  }

    .newsletter-section .newsletter-box {
        flex: 1 1 100%;
         }
}

/* iPhone Landscape */
@media (min-width: 481px) and (max-width: 767px) {
  .newsletter-section {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .newsletter-section h2 {
    margin-top: 0;
    margin-bottom: 30px; /* ++++++++++++++++++++++++++++++++++++ Abstand h2 zum Inhalt ++++++++++++++++++++++++++++++++++ */
  }

  .newsletter-section .newsletter-container-inner {
    margin-bottom: 50px; /* ++++++++++++++++++++++++++++++++++++ Abstand Sections Newletter + TdM nach untern ++++++++++++++++++++++++++++++++++ */
  }

    .newsletter-section .newsletter-box {
        flex: 1 1 calc(50% - 0.75em);
    }
}

/* ===============================================================
   BILDREIHE 3 - Variante 4
   =============================================================== */

/* --- BASIS-LAYOUT VARIANTE 3  --- */
.variante4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Spalten Standard */
  gap: 25px; /* Abstand zwischen den Bildern */
  margin-bottom: 90px; /* +++++++++++++++++++++++++++++++++++++++++++ 3. ABSTAND DER SECTION BILDERREIHE NACH UNTEN = 90px +++++++++++++++++++++++ */
  }

.variante4-item {
  display: flex;
  flex-direction: column;
  text-align: left; /* Standardmäßig linksbündig */
  overflow: hidden;
}

/* Bild-Styling */
.variante4-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bildunterschrift */
.variante4-caption {
  margin-top: 10px; /* Abstand der Überschrift vom Bild */
  font-size: 2.0rem;  /* Schriftgröße */
  font-weight: bold; /* Schriftstärke */
  color: var(--schriftfarbe);
  text-align: center;
}

/* Container benötigt position: relative, damit das Overlay korrekt darin liegt */
.variante4-link-container {
    position: relative;
    display: block; /* Wichtig, damit es korrekt funktioniert */
    text-decoration: none;
    color: inherit;
}

/* Stil des Overlays (unsichtbar) */
.variante4-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4); /* Weißer Schleier mit 40% Transparenz */
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease; /* Weicher Übergang beim Einblenden */
    pointer-events: none; /* Sorgt dafür, dass der Klick durch das Overlay auf den Link geht */
}

/* Effekt beim Hover: Zeigt das Overlay an */
.variante4-link-container:hover .variante4-overlay,
.variante4-link-container:focus .variante4-overlay {
    opacity: 1; /* Blendet den weißen Schleier ein */
}

/* Optional: Bild selbst leicht aufhellen für einen stärkeren Effekt */
.variante4-link-container:hover img {
    filter: brightness(105%); 
    transition: filter 0.3s ease;
}

/* Standardzustand des Bildes (ohne Helligkeitsfilter) */
.variante4-item img {
    filter: brightness(100%);
    transition: filter 0.3s ease;
}

/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPAD LANDSCAPE
   ---------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1266px) {
  
  .variante4-grid {
    gap: 20px; /* Bildabstand */
  }
}


/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPAD PORTRAIT
   ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {  
  .variante4-grid {
    gap: 20px; /* Bildabstand */
  }
}


/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPHONE LANDSCAPE
   ---------------------------------------------------- */
@media (min-width: 481px) and (max-width: 767px) {  
  
  .variante4-grid {
    gap: 20px; /* Bildabstand */
    margin-bottom: 50px;      /* +++++++++++++++++++++++++++++++++++++++++ Abstand unter der Section Bildreihe ++++++++++++++++++++++++++++++++++ */
  }

  .variante4-caption {
     font-size: 1.7rem;
   }
}

/* ----------------------------------------------------
   3. BILDREIHEN - MEDIA QUERY FÜR IPHONE PORTRAIT
   ---------------------------------------------------- */
@media (max-width: 480px) {
  
  .variante4-grid {
      grid-template-columns: 1fr; /* Nur noch EINE Spalte */
        margin-bottom: 25px;      /* +++++++++++++++++++++++++++++++++++++++++ Abstand unter dem dritten Bild  ++++++++++++++++++++++++++++++++++ */
  }
  
  .variante4-item {
      text-align: left !important; /* Seitenzentrierung */
        margin-bottom: 25px;      /* +++++++++++++++++++++++++++++++++++++++++ Abstand unter den Einzelbildern  ++++++++++++++++++++++++++++++++++ */
  }
  
  .variante4-caption,
  .variante4-subcaption {
      padding-left: 0px !important; /* Kein Padding, da zentriert */
  }
}