/* =========================================================
   ÜBERSICHTLICH NACH SELEKTOREN SORTIERT
   (nach jeder Gruppe ein leeres MQ-Bracket zum Befüllen)
========================================================= */


/* =========================================================
   .gridtemplate-1col (Global)
========================================================= */

.gridtemplate-1col{
  display: block;
  position: relative;
  margin-top: 3rem;
}

/* --- MQ: .gridtemplate-1col (freies Bracket) ------------------ */
@media (max-width: 99999px){
  /* Ergänzungen für .gridtemplate-1col */
}



/* =========================================================
   .bildspalten + .bildspalten .slidecontainer (Global)
========================================================= */

.bildspalten{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: clip;
  margin-bottom: clamp(40px, 6vw, 90px);
}

.bildspalten .slidecontainer{
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2vw, 60px);

  transform: none;
}

/* --- MQ: .bildspalten/.slidecontainer (max-width: 900px) ------ */
@media (max-width: 900px){
  .bildspalten .slidecontainer{
    grid-template-columns: 1fr;
  }
}

/* --- MQ: .bildspalten (freies Bracket) ------------------------ */
@media (max-width: 99999px){
  /* Ergänzungen für .bildspalten/.slidecontainer */
}



/* =========================================================
   .trennstrich (Global)
========================================================= */

.trennstrich{
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 2.2;
}

/* --- MQ: .trennstrich (freies Bracket) ------------------------ */
@media (max-width: 99999px){
  /* Ergänzungen für .trennstrich */
}



/* =========================================================
   .menuliste (Global)
========================================================= */

.menuliste .preiszeile{
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: 2rem;
  align-items: baseline;
  margin: 0;
}

.menuliste .preis{
  text-align: right;
  white-space: nowrap;
}

/* --- MQ: .menuliste (freies Bracket) -------------------------- */
@media (max-width: 99999px){
  /* Ergänzungen für .menuliste */
}



/* =========================================================
   #inhalt2spalten40
========================================================= */

#inhalt2spalten40{
  --col1: 1.7;
  --col2: 1;

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

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

  /* ✅ Bild UNTER dem Text, leicht nach links eingerückt */
  --img-drop: clamp(270px, 10vw, 270px);         /* nach unten */
  --img-indent: clamp(-250px, -7vw, -180px);     /* nach links */

  /* Section-Abstände */
  padding-top: clamp(230px, 8vw, 300px);
  padding-bottom: clamp(270px, 10vw, 350px);

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

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

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

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

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

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

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

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

  #inhalt2spalten40 .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;
  }
}

/* --- MQ: #inhalt2spalten40 (max-width: 650px) ----------------- */
@media (max-width: 650px){

  #inhalt2spalten40 .spalte1 .innerspalte{
    width: 100%;
  }

  #inhalt2spalten40 .spalte2 img{
    width: 100%;
    max-width: 100%;
  }
}

/* --- MQ: #inhalt2spalten40 (freies Bracket) ------------------- */
@media (max-width: 99999px){
  /* Ergänzungen für #inhalt2spalten40 */
}



/* =========================================================
   #bildspalten49-1
   beide Spalten exakt gleich hoch
========================================================= */

#bildspalten49-1{
  --gap: clamp(2rem, 3vw, 5rem);
  --col1: 68%;
  --col2: 32%;

  /* gemeinsame Höhe – pro Slice anpassbar */
  --rowH: clamp(320px, 32vw, 540px);
}

/* Grid-Container */
#bildspalten49-1 .container{
  display: grid;
  grid-template-columns: var(--col1) var(--col2);
  gap: var(--gap);

  height: var(--rowH);
  align-items: stretch;
}

/* Spalten */
#bildspalten49-1 .bildspalte{ height: 100%; }
#bildspalten49-1 .bild{ height: 100%; }

/* Bild selbst */
#bildspalten49-1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- MQ: #bildspalten49-1 (freies Bracket) -------------------- */
@media (max-width: 99999px){
  /* Ergänzungen für #bildspalten49-1 */
}



/* =========================================================
   #inhalt2spalten50
   Bild links (30%), Text rechts (60%)
========================================================= */

#inhalt2spalten50{
  --col-img: 30%;
  --col-text: 60%;

  --gap: clamp(3rem, 5vw, 10rem);
  --content-width: 100%;

  --img-max: 520px;
  --img-mobile-max: 520px;
  --img-mobile-width: 95%;
}

/* Desktop/Tablet: feste Prozent-Breiten statt flex-ratio */
@media (min-width: 901px){

  #inhalt2spalten50 > .container{
    transform: none;
    gap: var(--gap);
    align-items: start;
  }

  #inhalt2spalten50 .spalte1{
    flex: 0 0 var(--col-img);
    justify-content: flex-start;
  }

  #inhalt2spalten50 .spalte2{
    flex: 0 0 var(--col-text);
    justify-content: flex-start;
    min-width: 0;
  }

  .inhalt2spalten#inhalt2spalten50 > .container{
    justify-content: start;
  }

  #inhalt2spalten50 .spalte2 h2{
    text-align: left;
    margin-top: 0;
  }

  #inhalt2spalten50 .spalte1 .innerspalte{
    width: 100%;
  }

  #inhalt2spalten50 .spalte1 img{
    width: min(100%, var(--img-max));
    height: auto;
    display: block;
  }

  #inhalt2spalten50 .spalte2 .innerspalte{
    width: 100%;
  }
  

}

/* Mobile */
@media (max-width: 1000px){
  #inhalt2spalten50 .spalte1 img{
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-left:-8.5%;

  }
  
	#inhalt2spalten50 .spalte2 .innerspalte h2 {
  text-align:left;
  }
  
  #inhalt2spalten50 .spalte2 .innerspalte {
  display:block;
  }
  
  
  #inhalt2spalten50 .spalte2 {
  order:1;
  padding-bottom:1rem;
  }
  #inhalt2spalten50 .spalte1 {
  order:2;
  }
}

/* --- MQ: #inhalt2spalten50 (freies Bracket) ------------------- */
@media (max-width: 99999px){
  /* Ergänzungen für #inhalt2spalten50 */
}



/* =========================================================
   #inhalt2spalten52
========================================================= */

#inhalt2spalten52{
  padding-top: 40px;
  padding-bottom: 20px;
}

/* Container aushebeln */
#inhalt2spalten52 .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Nur Spalte 2 → rechts andocken */
#inhalt2spalten52 .spalte2{
  margin-left: auto;
  width: 55vw;
  max-width: 1050px;
  min-width: 600px;

  display: flex;
  justify-content: flex-end;
}

/* Bild voll nutzbar */
#inhalt2spalten52 .spalte2 img{
  width: 100%;
  height: auto;
  display: block;
}

/* --- MQ: #inhalt2spalten52 (max-width: 900px) ----------------- */
@media (max-width: 1000px){

  #inhalt2spalten52{
    padding-block: clamp(80px, 10vw, 140px);
    padding-top: 20px;
padding-bottom: 20px;
  }

  #inhalt2spalten52 .container{
    width: 86%;
    max-width: none;
    padding: 0;
    margin-left: auto;
     margin-right: auto;
  }

  #inhalt2spalten52 .spalte2{
    margin-left: auto;
     margin-right: auto;
    width: 88vw;
    max-width: none;
    min-width: 0;

    display: flex;
    justify-content: center;

    transform: none;
  }

  #inhalt2spalten52 .spalte2 img{
    width: 85%;
    height: auto;
    display: block;
  }
  
  #inhalt2spalten52 .spalte2 img{
  	position:relative;
  	display:block;
  	left:20.8%;
  }
  
}

/* --- MQ: #inhalt2spalten52 (freies Bracket) ------------------- */
@media (max-width: 99999px){
  /* Ergänzungen für #inhalt2spalten52 */
}



/* =========================================================
   .gridtemplate-1col.slideshow#slideshow48 (+ Varianten)
   (Pattern wie special15/slideshow47)
========================================================= */

.gridtemplate-1col.slideshow#slideshow48 .bildspalten{
  --gap: 3rem;
  --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#slideshow48 .bildspalten.einzeln{
  --col1: 100%;
  --col2: 0%;
}

.gridtemplate-1col.slideshow#slideshow48 .bildspalte .bild{
  height: clamp(360px, 40vw, 620px);
  overflow: hidden;
}

.gridtemplate-1col.slideshow#slideshow48 > .bild{
  height: clamp(360px, 40vw, 620px);
}

.gridtemplate-1col.slideshow#slideshow48 .bild img{
  height: clamp(360px, 40vw, 620px);
  object-fit: cover;
}

/* -> Gleichhoch-Regel (wie in special16 schon drin) */
.gridtemplate-1col.slideshow#slideshow48 .bildspalte img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* only >=900 im Original-Pendant */
@media (min-width: 900px){
  .gridtemplate-1col.slideshow#slideshow48{
    padding-top: 100px;
  }
}

/* Mobile: wie special15 (Gap + Einzeln auf 1 Spalte + kleinere Höhe) */
@media (max-width: 1000px){

  .gridtemplate-1col.slideshow#slideshow48 .bildspalten{
    --gap: 1.5rem;
    gap: var(--gap);
  }

  .gridtemplate-1col.slideshow#slideshow48 .bildspalten.einzeln{
    grid-template-columns: 1fr;
  }

  .gridtemplate-1col.slideshow#slideshow48 .bildspalte .bild{
    height: clamp(200px, 15vw, 320px);
  }

  .gridtemplate-1col.slideshow#slideshow48 > .bild{
    height: clamp(200px, 15vw, 320px);
  }

  .gridtemplate-1col.slideshow#slideshow48 .bild img{
    height: clamp(200px, 15vw, 320px);
    object-fit: cover;
  }
}

/* --- MQ: slideshow48 (freies Bracket) ------------------------- */
@media (max-width: 99999px){
  /* Ergänzungen für slideshow48 */
}



/* =========================================================
   body#article16 .shortcuts-wrapper
   (Pattern wie article15, aber Layout bleibt 2fr | 1fr)
========================================================= */

@media (min-width: 1001px){

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

  body#article16 .shortcuts-wrapper > .container{
    display: grid;
    width: 78%;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: stretch;
  }

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

    max-width: none;
    margin: 0 !important;
    text-align: left;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding-left: clamp(10px, 1.2vw, 24px);

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

  body#article16 .shortcuts-wrapper .gridinfo p{
    margin: 0;
    --block-drop: 8px;
    transform: translateY(calc(var(--text-drop) + var(--block-drop)));
  }

  body#article16 .shortcuts-wrapper .gridinfo p:has(img){
    max-width: none;
    margin-left: 0;
    margin-bottom: clamp(30px, 6vw, 100px);
  }

  body#article16 .shortcuts-wrapper .gridinfo p:not(:has(img)){
    max-width: 620px;
    margin-left: clamp(50px, 5vw, 100px);
  }

  body#article16 .shortcuts-wrapper .gridinfo .p1:not(:has(img)){
    margin-bottom: clamp(10px, 1.4vw, 18px);
  }

  /* RECHTER BLOCK (Kachel) */
  body#article16 .shortcuts-wrapper .shortcuts-section{
    grid-column: 2;
    grid-row: 1;

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

    align-self: end;
  }

  /* Spiegel-Variante wie in special15 (falls 5. Slide Layout tauscht) */
  .gridtemplate-1col.slideshow#slideshow48 .bildspalten:nth-child(5){
    --gap: 3rem;
    --col1: 31%;
    --col2: 69%;

    display: grid;
    grid-template-columns: minmax(0, var(--col1)) minmax(0, var(--col2));
    gap: var(--gap);
    align-items: stretch;
    width: 100%;
  }
}

/* --- MQ: article16 (min-width:1001px and max-width:1450px) ---- */
@media (min-width: 1001px) and (max-width: 1450px){
  body#article16 .shortcuts-wrapper > .container{
    gap: clamp(70px, 7vw, 120px);
  }
}

/* --- MQ: article16 (max-width: 1000px) ------------------------ */
@media (max-width: 1000px){

  body#article16 .shortcuts-wrapper{
    transform: none;
  	    padding-bottom: 3rem;
  	    padding-top: 3rem;
  }

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

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

  body#article16 .shortcuts-wrapper .gridinfo{
    order: 2;
    text-align:left;
  }
}

/* --- MQ: body#article16 .shortcuts-wrapper (freies Bracket) ---- */
@media (max-width: 99999px){
  /* Ergänzungen für article16/shortcuts-wrapper */
}



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

  #inhalt2spalten40 .spalte2{
    justify-content: center !important;
    align-items: center !important;
  }

  #inhalt2spalten40 .spalte2 img{
    transform: none !important;
    padding-top: 0 !important;

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

    margin: 0 auto !important;
    display: block !important;
  }

  #inhalt2spalten40 .spalte2 .innerspalte{
    width: 100% !important;
    max-width: 100% !important;
  }
}