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

  --content-width: 85%;
  --gap: clamp(3rem, 4vw, 5rem);

  /* Bildgrößen */
  --img-min: 500px;
  --img-max: 610px;

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

  /* Section-Abstände */
  padding-top: clamp(270px, 8vw, 320px);
  padding-bottom: clamp(500px, 10vw, 600px);

  /* Mobile Bild */
  --img-mobile-max: 500px;
  --img-mobile-width: 95%;
}

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

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

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

/* Bild-Basis */
#inhalt2spalten42 .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){
  #inhalt2spalten42 .spalte2 img{
    transform: translate(var(--img-indent), var(--img-drop));
  }
}

@media (max-width: 1350px) and (min-width: 1001px){
  #inhalt2spalten42 .spalte2 img{
    width: clamp(530px, 25vw, var(--img-max)); /* 👈 extrem entschärft */
    max-width: none;
    padding-top: 10rem;
  }
}

@media (max-width: 1000px){
  #inhalt2spalten42 {
    padding-block: clamp(150px, 8vw, 200px);
    padding-top: 6rem;
    padding-bottom: 4rem;
  }

  #inhalt2spalten42 .spalte2{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  #inhalt2spalten42 .spalte2 img{
    transform: none;

    width: min(var(--img-mobile-width), var(--img-mobile-max));
    height: auto;
    display: block;

    margin-left: auto;   /* rechtsbündig */
    margin-right: 0;
  }
}



@media (max-width: 650px){

  /* ✅ ID statt Klasse */
  #inhalt2spalten40 .spalte1 .innerspalte{
    width: 100%;
  }

  /* ✅ Bild nimmt wieder volle Breite ein */
  #inhalt2spalten40 .spalte2 img{
    width: 100%;
    max-width: 100%;
  }
}


/* ------------------------------------
   SPECIAL – Slideshow 53 (3 Spalten)
------------------------------------ */

#slideshow53{
  --cols: 3;
  --gap: clamp(1.5rem, 3vw, 3rem);
}

/* Slider-Track */
#slideshow53 .slider-track{
  display: flex;
  width: 100%;
}

/* Jeder Slide */
#slideshow53 .bildspalten{
  flex: 0 0 100%;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);

  box-sizing: border-box;
}

#slideshow53 .bildspalten.einzeln {
grid-template-columns: 1fr;
}

/* Einzelne Bildspalte */
#slideshow53 .bildspalte{
  position: relative;
  overflow: hidden;
}

/* Bild */
#slideshow53 .bildspalte img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#slideshow53 .slider-track > .bild{
  flex: 0 0 100%;     /* wie ein Slide */
  width: 100%;
  height: clamp(260px, 30vw, 400px); /* gleiche Höhe wie Kacheln */
  overflow: hidden;
  position: relative;
}

/* Bild füllt die Fläche */
#slideshow53 .slider-track > .bild > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#slideshow53 .slider-track > .bild > img { 
height: clamp(360px, 40vw, 620px);

}
.gridtemplate-1col.slideshow#slideshow53 .bildspalten:nth-child(3) {
	--gap: 1rem;
--col1: 69%;
--col2: 31%;
display: grid;
grid-template-columns: minmax(0, var(--col1)) minmax(0, var(--col2));
gap: var(--gap);
align-items: stretch;
width: 100%;
}

.gridtemplate-1col.slideshow#slideshow53 .bildspalten .bild, 
.gridtemplate-1col.slideshow#slideshow53 .bildspalten img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------
   Responsive
------------------------------------ */



/* Mobile: 1 Spalte */
@media (max-width: 1000px){
  #slideshow53{
	--gap: 1rem;
  }
  
#slideshow53 .bildspalten {
	--gap: 1rem;
flex: 0 0 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: var(--gap);
box-sizing: border-box;
padding-top:3rem;
}


}



@media (min-width: 1001px){

  body#article17 .shortcuts-wrapper{
    --module-shift-x: clamp(0px, 2vw, 30px);
    transform: translateX(var(--module-shift-x));
  }

  /* ✅ 2/3 links | 1/3 rechts + kleiner Gap zur Kachel */
  body#article17 .shortcuts-wrapper > .container{
    display: grid;
    width: 80%;
    margin-inline: auto;

    grid-template-columns: 2fr 1fr;

    /* 👇 statt gap:0 */
    column-gap: clamp(18px, 3vw, 60px);
    row-gap: 0;

    align-items: stretch;
  }

  /* LINKER BLOCK (Bild + Text) */
  body#article17 .shortcuts-wrapper .gridinfo{
    grid-column: 1;
    grid-row: 1;

    max-width: none;
    margin: 0 !important;

    display: flex;
    flex-direction: column;

    /* 👇 NICHT flex-end, sonst entsteht unten “Luft” */
    justify-content: flex-start;

    /* wenn du innen noch etwas Abstand willst */
    padding-left: clamp(10px, 1.2vw, 24px);

    --text-drop: 10px;
    transform: translateY(var(--text-drop));
  }

  /* Grundsätzlich: Absatz-Margins killen */
  body#article17 .shortcuts-wrapper .gridinfo p{
    margin: 0;
  }

  /* ✅ Bild-Absatz: volle Breite */
  body#article17 .shortcuts-wrapper .gridinfo p:has(img){
    max-width: none;
    margin-left: 0;
    margin-bottom: clamp(70px, 10vw, 150px);
    text-align: left; /* Bild nicht “rechtsbündig” behandeln */
  }

  /* ✅ Text-Absätze: rechtsbündig + zum rechten Rand ausrichten */
  body#article17 .shortcuts-wrapper .gridinfo p:not(:has(img)){
    max-width: 620px;
    margin-left: auto;
    margin-right: clamp(20px, 3vw, 30px);
    text-align: right;
  }


  body#article17 .shortcuts-wrapper .gridinfo p:not(:has(img)):last-child{
    margin-bottom: clamp(70px, 10vw, 120px);
  }
  /* RECHTER BLOCK (Kachel) */
  body#article17 .shortcuts-wrapper .shortcuts-section{
    grid-column: 2;
    grid-row: 1;

    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;

    align-self: end;
  }
}

/* Enger Bereich: Gap noch kleiner */
@media (min-width: 1001px) and (max-width: 1450px){
  body#article17 .shortcuts-wrapper > .container{
    column-gap: clamp(14px, 2vw, 40px);
  }
}


/* Mobile bleibt wie bei dir */
@media (max-width: 1000px){

  body#article17 .shortcuts-wrapper{
    transform: none;
  }

  body#article17 .shortcuts-wrapper > .container{
    display: flex;
    flex-direction: column;
  }

  body#article17 .shortcuts-wrapper .shortcuts-section{
    order: 2;
  }

  body#article17 .shortcuts-wrapper .gridinfo{
    order: 2;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    margin-top: clamp(10px, 10vw, 20px);
    margin-bottom: clamp(48px, 10vw, 100px);
    text-align: left;
    box-sizing: border-box;
    padding-left: clamp(64px, 20vw, 220px);
    padding-right: clamp(16px, 4vw, 70px);
    max-width: none;
    transform: none;
  }
  
  body#article17 .shortcuts-wrapper .gridinfo img {
  margin-bottom:2.5rem;
  
  }
  
  
}




/* =========================================================
   SPECIAL 17 – #inhalt2spalten54
   Beide Bilder bis zum Rand + Button rechts an Bildkante links
========================================================= */

#inhalt2spalten54{
  --content-width: 100%;

  /* 🔥 größerer Abstand zwischen den beiden Spalten */
    gap:7rem;
    padding-bottom: clamp(20px, 20vw, 70px);
    padding-top: clamp(100px, 25vw, 220px);
}

#inhalt2spalten54 .spalte1{
  flex: 0 0 42%;
}

#inhalt2spalten54 .spalte2{
  flex: 0 0 58%;
}

/* Spalte 1 bleibt bis zum Rand links */
#inhalt2spalten54 .spalte1{
  min-width: 0;
  flex-shrink: 1;
  margin-left: calc(50% - 50vw);
  justify-content: flex-end;
}

/* innerspalte rechtsbündig lassen (Button an Bildkante) */
#inhalt2spalten54 .spalte1 .innerspalte{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ✅ linkes Bild: nicht mehr 100%, sondern begrenzt – bleibt aber am Rand “angedockt” */
#inhalt2spalten54 .spalte1 img{
  width: 80%;
  max-width: var(--img1-max);   /* <- macht es kleiner */
  margin-left: -8.50%;               /* <- kein Gap links */
  margin-right: 0;
  height: auto;
  display: block;
}

/* Button bleibt rechts an Bildkante */
#inhalt2spalten54 .spalte1 a,
#inhalt2spalten54 .spalte1 .button{
  align-self: flex-end;
  margin-top: clamp(2rem, 3vw, 3.5rem);
  max-width: 100%;
}



/* -------------------------
   RECHTS: bis zum rechten Rand
------------------------- */

/* Spalte 2 nach rechts "bleeden" */
#inhalt2spalten54 .spalte2{
  min-width: 0;
  flex-shrink: 1;
  margin-right: calc(50% - 50vw);  /* <- bis Viewport-Rand rechts */
}

/* rechtes Bild vollflächig */
#inhalt2spalten54 .spalte2 img{
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  display: block;

}


/* -------------------------
   MOBILE: Bleed aus, normal stapeln
------------------------- */
@media (max-width:1000px){
  #inhalt2spalten54 .spalte1,
  #inhalt2spalten54 .spalte2{
    margin-left: 0;
    margin-right: 0;
  }

  #inhalt2spalten54 .spalte1 .innerspalte{
    align-items: flex-start;
  }

  #inhalt2spalten54 .spalte1 a,
  #inhalt2spalten54 .spalte1 .button{
    align-self: flex-start;
  }
  
  #inhalt2spalten54{
  --content-width: 90%;

  /* 🔥 größerer Abstand zwischen den beiden Spalten */

    padding-bottom:3rem;
    padding-top: 6rem;
}
  #inhalt2spalten54 .spalte2 img{

  	position:relative;
  	display:block;
  
  	width: 85%;
    height: auto;
  
  	position:relative;
  	display:block;
  	left:23.2%;
  
  }
}






/* =========================================================
   HARD OVERRIDE – ganz unten in der CSS-Datei lassen!
   Ziel: <=650px Bild wieder 100% breit + mittig, kein Shift
========================================================= */
@media (max-width: 1000px){

  /* Bildspalte: mittig statt rechts */
  #inhalt2spalten42 .spalte2{
    justify-content: center !important;
    align-items: center !important;
  }

  /* Bild: volle Breite, keine Bremse durch min()/clamp()/min-width */
  #inhalt2spalten42 .spalte2 img{
    transform: none !important;
    padding-top: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 auto !important;   /* mittig */
    display: block !important;
  }

  /* Falls ein Inner-Wrapper das Bild begrenzt */
  #inhalt2spalten42 .spalte2 .innerspalte{
    width: 100% !important;
    max-width: 100% !important;
  }
}


@media (max-width: 1000px){

.shortcuts-wrapper {
padding-bottom:6rem;
}

}