#textrahmen-insta {
padding-top: clamp(3rem, 5vw, 4rem) !important;
}



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

#inhalt2spalten26 {
  --img-ratio: 2 / 1.9;
}


#textrahmen46 {
 padding-top: 3rem;
}


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

#inhalt2spalten26 .innerspalte-text {
max-width: 58ch;
}


#textrahmen27 {
 padding-top: 5rem;
}


#inhalt2spalten38{
  overflow: visible !important;
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* =========================
   FLEX GRUNDLAGE
========================= */

#inhalt2spalten38 .inhalt2spalten-inner{
  display: flex;
  gap: 0;
  position: relative;
  overflow: visible !important;
  align-items: flex-start;
}

/* =========================
   SPALTE 1 – TEXTBLOCK
   Nur so breit wie nötig
========================= */

#inhalt2spalten38 .spalte1{
  flex: 0 0 auto;                 /* NICHT wachsen */
  width: fit-content;             /* nur so breit wie Inhalt */
  max-width: min(520px, 100%);    /* Sicherheitslimit */

   margin-top: clamp(15rem, 15vw, 25rem);
  margin-right: -6rem;            /* Überlappung */

  position: relative;
  z-index: 10;
}

#inhalt2spalten38 .spalte1 .innerspalte{
  background: var(--color-primary);
  color: var(--color-sand);
  padding: 2.5rem 3rem;

  position: relative;
  z-index: 10;
}

/* Textfarbe */
#inhalt2spalten38 h3,
#inhalt2spalten38 .spalte1 .innerspalte h1,
#inhalt2spalten38 .spalte1 .innerspalte p{
  color: var(--color-sand);
}

/* =========================
   SPALTE 2 – MAP / BILD
   Nimmt Restbreite
========================= */

#inhalt2spalten38 .spalte2{
  flex: 1 1 auto;
  min-width: 0;          /* wichtig bei flex */
  position: relative;
  z-index: 1;
}

#inhalt2spalten38 .spalte2 iframe{
  width: 100%;
  height: 100%;
  min-height: 590px;
  display: block;
}

/* =========================
   BUTTON POSITION
========================= */

#mapproforma a.mapeinblend{
  position: absolute;
  right: 8%;
  top: 6%;
  z-index: 15;
}

#inhalt2spalten38 .spalte2 a.button{
  padding: 0.35em 1em 0.4rem 1rem;
}

/* =========================
   CAPTION FIX
========================= */

#inhalt2spalten38 .has-caption .bild-caption{
  right: 0;
  transform: translateX(50%) rotate(180deg);
}

/* Utility */
.link-uppercase{
  text-transform: uppercase;
}


@media (min-width: 1000px) and (max-width: 1350px){

  /* wichtig: nichts abschneiden */
  #inhalt2spalten38,
  #inhalt2spalten38 .inhalt2spalten-inner,
  #inhalt2spalten38 .spalte2,
  #inhalt2spalten38 .spalte2 .innerspalte2{
    overflow: visible !important;
  }

  /* Wrapper breiter ziehen (falls iframe/img in Wrapper steckt) */
  #inhalt2spalten38 .spalte2 .innerspalte2{
    width: calc(100% + 6rem) !important;  /* mehr Breite */
    margin-left: -6rem !important;        /* nach links rausziehen */
  }

  /* und das eigentliche Element ebenfalls */
  #inhalt2spalten38 .spalte2 iframe,
  #inhalt2spalten38 .spalte2 img{
    width: 100% !important;
    display: block;
  }
}

/* =========================================================
   MOBILE < 1000px
========================================================= */
@media (max-width: 1000px){

  figure{ margin: 0; }

  /* ✅ inner wieder als flex, damit column + gap wirklich wirken */
  #inhalt2spalten38 .inhalt2spalten-inner{
    display: flex;
    flex-direction: column;   /* untereinander */
    gap: clamp(2.5rem, 5vw, 4.5rem);
    overflow: visible !important;
  }

  /* ✅ Button mittig */
  p#mapproforma{
    position: relative;
    display: flex !important;
    justify-content: center !important;
  }

  #mapproforma a.mapeinblend{
    position: static !important;
    display: inline-block !important;
    margin: 4rem 0 0 !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* Spalten volle Breite */
  #inhalt2spalten38 .spalte-textA,
  #inhalt2spalten38 .spalte-textB{
    flex: 0 0 100%;
    width: 100%;
  }

  /* ✅ brauner Kasten mittig + shrink-to-fit + Abstand zur Map */
  #inhalt2spalten38 .spalte1{
    margin-top: 0;
    margin-right: 0 !important;
    max-width: 100%;
    text-align: center;                     /* ✅ Kasten mittig */
  }

  #inhalt2spalten38 .spalte1 .innerspalte{
    display: inline-block;                  /* shrink-to-fit */
    width: fit-content;
    max-width: min(520px, 92%);             /* Sicherheitslimit */
    padding: 2rem;

    text-align: left;                       /* Text bleibt linksbündig */
  }

  /* Map / Iframe Höhe sauber steuern */
  #inhalt2spalten38 .spalte2 iframe{
    min-height: 420px;
    height: 60vw;
    max-height: 500px;
    display: block;
    width: 100%;
  }

  /* Caption wieder normal */
  #inhalt2spalten38 .has-caption .bild-caption{
    transform: none;
    right: -10px;
  }
}
}