#inhalt2spalten20 .innerspalte-text {
  max-width: 60ch;
}


#inhalt2spalten20{
  --img-ratio: 2 / 1.7;
}

@media (max-width: 1600px){

  #inhalt2spalten20{
    --img-ratio: 2 / 1.9 !important;
   
  }
}



@media (max-width: 1400px){

  #inhalt2spalten20{
    --img-ratio: 2 / 2.3 !important;
  }
}


@media (max-width: 1300px){

  #inhalt2spalten20{
    --img-ratio: 2 / 2.5 !important;
   
  }
}

@media (max-width: 1150px){

  #inhalt2spalten20{
    --img-ratio: 2 / 2.8 !important;
   
  }
}

@media (max-width: 1100px){

  #inhalt2spalten20{
    --img-ratio: 2 / 3.1 !important;
   
  }
}

@media (max-width: 1000px){

  #inhalt2spalten20{
    --img-ratio: 3 / 2 !important;
   
  }
}



/* =========================================================
   tgReserve30 – Layout steuerbar + Bildbreite einstellbar
========================================================= */

#tgReserve30{
  /* ===== Spalten-Verhältnis ===== */
  --col-text: 1.3fr;
  --col-media: 1fr;

  /* ===== Textbreite ===== */
  --text-width: 78ch;

  /* ===== Bildsteuerung ===== */
  --img-width: 100%;        /* 100% = volle Spalte | z.B. 115% für Bleed */
  --img-max-h: 600px;       /* optionaler Deckel (kannst du auch löschen) */

  /* ===== Ratio (greift jetzt wirklich) ===== */
  --img-ratio-w: 2;
  --img-ratio-h: 2.5;

  /* ===== Layout ===== */
  --gap: clamp(2rem, 3vw, 4rem);
  --over: clamp(15rem, 40vw, 17rem);

  --img-offset-1: 0px;
  --img-offset-2: 0px;

  margin-bottom: clamp(3.5rem, 6vw, 8rem);
  padding-top: 0; /* special: kein lift von base übernehmen */
}


/* =========================================================
   GRID
========================================================= */

#tgReserve30 .tgReserve__inner{
  grid-template-columns: var(--col-text) var(--col-media);
}


/* =========================================================
   TEXT
========================================================= */

#tgReserve30 .tgReserve__text{
  max-width: var(--text-width);
}


/* =========================================================
   MEDIA (1 Spalte)
========================================================= */

#tgReserve30 .tgReserve__media{
  grid-template-columns: 1fr;
  gap: var(--gap);

  transform: none;
  margin-top: calc(var(--over) * -1);
  margin-bottom: calc(var(--over) * -1);

  position: relative;
  z-index: 2;

  justify-items: center;  /* Bild bleibt mittig, auch bei >100% Breite */
}


/* =========================================================
   BILD – Ratio greift
========================================================= */

#tgReserve30 .tgReserve__img{
  width: var(--img-width);

  /* ✅ Ratio steuert die Höhe */
  aspect-ratio: var(--img-ratio-w) / var(--img-ratio-h);
  height: auto;

  /* optionaler Deckel, ohne Ratio zu killen */
  max-height: var(--img-max-h);

  object-fit: cover;
  display: block;
}


/* =========================================================
   PLATZ AUSSEN (Overhang)
========================================================= */

#tgReserve30::before,
#tgReserve30::after{
  content: "";
  display: block;
  height: calc(var(--over) - 2rem);
}


@media (min-width: 1000px) and (max-width: 1100px){
  
#tgReserve30{

  --img-width: auto;        /* 100% = volle Spalte | z.B. 115% für Bleed */

  }
}


/* =========================================================
   RESPONSIVE – tgReserve30
   1) Text oben, Bild darunter
   2) Overhang entschärfen
========================================================= */
@media (max-width: 1000px){

  #tgReserve30{
    --col-text: 1fr;
    --col-media: 1fr;

    --over: clamp(6rem, 18vw, 10rem);
    --gap: clamp(1.5rem, 4vw, 2.5rem);

    padding-bottom: 0;
    margin-bottom: 0;
    
  }

  /* ✅ Spacer im Responsive aus, sonst “beginnt” der BG optisch komisch */
  #tgReserve30::before,
  #tgReserve30::after{
    height: 0;
  }

  #tgReserve30 .tgReserve__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media";
    gap: clamp(3rem, 7vw, 5rem);
  }

  /* ✅ Overhang im Responsive entschärfen (keine negativen margins mehr) */
  #tgReserve30 .tgReserve__media{
    margin-top: 0;
    margin-bottom: 0;
    justify-items: stretch;
    
    /* ✅ Bilder nebeneinander in Zeile 2 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 4vw, 1.75rem);
  }

  #tgReserve30 .tgReserve__text{
    max-width: 61ch;
  }
  
  #tgReserve30 .tgReserve__bg {
   padding-bottom: clamp(4rem, 10vw, 5rem);
   padding-top: 0;
}
}


@media (max-width: 800px){
  
#tgReserve30  .tgReserve__media{ 
    width: min(87%, 700px);
  }
}

@media (max-width: 550px){
  
#tgReserve30  .tgReserve__media{ 
    width: min(100%, 700px);
  }
}