/* -----------------------------
   SPECIAL – #inhalt2spalten31
------------------------------ */
#inhalt2spalten31{
  --col1: 2.4;
  --col2: 1;

  --content-width: 92%;
  --gap: clamp(3rem, 4vw, 7rem);

  /* Bildgrößen */
  --img-min: 400px;
  --img-max: 480px;

  /* ✅ Bild UNTER dem Text, leicht nach links eingerückt */
  --img-drop: clamp(210px, 8vw, 230px);          /* nach unten */
  --img-indent: clamp(-290px, -9vw, -200px);    /* nach links */

  /* Section-Abstände */
  padding-top: clamp(150px, 8vw, 250px);
  padding-bottom: clamp(300px, 10vw, 400px);

  /* Mobile Bild */
  --img-mobile-max: 380px;
  --img-mobile-width: 90%;
}

/* Grundlayout */
#inhalt2spalten31 .spalte1{
  position: relative;
  z-index: 1;
}

#inhalt2spalten31 .spalte2{
  position: relative;
  z-index: 1;
  overflow: visible;

  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* Bild-Basis */
#inhalt2spalten31 .spalte2 img{
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: center;
}



/* ✅ Desktop / Tablet: Bild unter Text + nach links eingerückt */
@media (min-width: 1001px){
  #inhalt2spalten31 .spalte2 img{
    transform: translate(var(--img-indent), var(--img-drop));
  }
}

@media (max-width: 1350px) and (min-width: 651px){
  #inhalt2spalten31 .spalte2 img{
    width: clamp(300px, 19vw, var(--img-max)); /* 👈 extrem entschärft */
    max-width: none;
    
  } 
}

/* ✅ Desktop / große Screens: wirklich kleiner erzwingen */
@media (min-width: 1001px){
  #inhalt2spalten31 .spalte2 img{
    width: clamp(300px, 18vw, 300px) !important;
    max-width: none !important;
  }
}

@media (max-width: 1350px){
#inhalt2spalten31 {
  padding-bottom: clamp(300px, 10vw, 400px);
}
}


/* ✅ Unter 1000px: +100px Extra-Padding unten */
@media (max-width: 1000px){
  #inhalt2spalten31{
    padding-bottom: clamp(6rem, 10vw, 10rem);
  }
  
    #inhalt2spalten31 .spalte1{
    max-width: 80%
  }
  
  #inhalt2spalten31 {
  padding-top:6rem;
  }
  
}


/* ✅ Smartphone: Bild MUSS einfach mitskalieren */
@media (max-width: 650px){

  /* wichtig: Container darf nicht verschoben sein */
  #inhalt2spalten31 > .container{
    transform: none !important;
  }

    #inhalt2spalten31 .spalte1{
    max-width: 100%
  }
  /* Spalten dürfen nicht „breiter denken“ als der Screen */
  #inhalt2spalten31 .spalte2{
    width: 100%;
    min-width: 0;
    justify-content: center; /* oder flex-end wenn du rechts willst */
  }

  /* DAS ist die Hauptregel: immer mit dem Screen mitskalieren */
  #inhalt2spalten31 .spalte2 img{
    transform: none !important;

    width: 85% !important;
    max-width: 100% !important;
    min-width: 0 !important;
	margin-inline:auto;
    height: auto !important;
    display: block;
  }
}