#inhalt2spalten22 p:has(strong){
  margin-bottom: 0.5rem; /* Wert anpassen */
}


@media (max-width: 1600px){

 #inhalt2spalten22 {
  --img-ratio: 3 / 2.2;
}
}


@media (max-width: 1500px){

 #inhalt2spalten22 {
  --img-ratio: 3 / 2.5;
}
}

@media (max-width: 1350px){

 #inhalt2spalten22 {
  --img-ratio: 3 / 2.9 !important;
}
}

@media (max-width: 1200px){

 #inhalt2spalten22 {
  --img-ratio: 3 / 3.2 !important;
}
}


@media (max-width: 1000px){

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



/* =========================================================
   SPECIAL – #inhalt2spalten22
========================================================= */
#inhalt2spalten22 .innerspalte-text {
  max-width: 70ch;
}

#inhalt2spalten22 .spalte-text{
  display: flex;
  justify-content: center;
}

#inhalt2spalten22 .inhalt2spalten-inner{
  align-items: flex-start;   /* oder flex-start */
}

#inhalt2spalten22 .innerspalte-text{
  background: var(--color-primary);   /* brauner Kasten */
  color: var(--color-sand);           /* beige Text */

  padding-top: clamp(1rem, 5vw, 3rem);
  padding-bottom: clamp(1rem, 5vw, 3rem);
  padding-left: clamp(0rem, 6vw, 2rem);
   padding-right: clamp(0rem, 6vw, 2rem);
  max-width: 700px;
  width: 100%;
  text-align: center;
}

/* Headings beige */
#inhalt2spalten22 h3,
#inhalt2spalten22 h4,
#inhalt2spalten22 p{
  color: var(--color-sand);
}

#inhalt2spalten22 p strong{
  font-weight: 700;   /* oder 500 / 700 je nach gewünschter Stärke */
}



@media (max-width: 1000px){

  #inhalt2spalten22 .innerspalte-text{
    width: min(65%, 700px);            /* Kastenbreite */
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 3.5rem);
  }
  .inhalt2spalten .innerspalte-bild {
  --img-ratio: 3 / 2;
}
}


@media (max-width: 600px){

  #inhalt2spalten22 .innerspalte-text{
    width: 100%;
  }

}

#textrahmen23 {
padding-top: 1.5rem;
padding-bottom: clamp(1rem, 3vw, 2rem);
}



@media (max-width: 450px){
  #textrahmen23 h2{
    font-size: 1.7rem;
    letter-spacing: 0.02em;  
  }
}

@media (max-width: 1000px){

#textrahmen23 {
padding-top: 2.5rem;
}
}




/* =========================================================
   KONTAKTFORMULAR – Look wie Screenshot
========================================================= */

.kontaktformular,
.yform--fiesemichel{
  --line: rgba(70, 35, 28, .75);
  --text: rgba(70, 35, 28, .92);
  --muted: rgba(70, 35, 28, .70);
  --bg: transparent;
  --gapY: clamp(22px, 3.2vw, 34px);
  --gapX: clamp(28px, 4vw, 70px);
}

/* Nur auf großen Bildschirmen begrenzen */
@media (min-width: 1200px){
  .kontaktformular,
  .yform--fiesemichel{
    width: min(100%, 130ch);
    margin-inline: auto;
  }
}

/* Überschrift */
.kontaktformular h2,
.kontaktformular .headline,
.yform--fiesemichel .headline{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: clamp(24px, 4vw, 52px);
}

/* ---------------------------------------------------------
   Labels
--------------------------------------------------------- */
.kontaktformular select,
.yform--fiesemichel select{
  text-transform: uppercase;
}

.kontaktformular .form-group > label,
.yform--fiesemichel .form-group > label{
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 1.0em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 10px 0;
  display: none;
}

.kontaktformular .checkbox label,
.yform--fiesemichel .checkbox label{
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
  color: var(--text);
}

/* ---------------------------------------------------------
   Form-Groups
--------------------------------------------------------- */

.kontaktformular .form-group,
.yform--fiesemichel .form-group{
  margin: 0 0 var(--gapY) 0;
}

/* ---------------------------------------------------------
   Input Felder
--------------------------------------------------------- */

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"],
.kontaktformular input[type="datetime-local"],
.kontaktformular select,
.kontaktformular textarea,
.yform--fiesemichel input[type="text"],
.yform--fiesemichel input[type="email"],
.yform--fiesemichel input[type="tel"],
.yform--fiesemichel input[type="datetime-local"],
.yform--fiesemichel select,
.yform--fiesemichel textarea{
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--color-primary);
  background: var(--bg);
  color: var(--text);
  padding: 17px 0 12px 0;
  letter-spacing: var(--letter-spacing);
  outline: none;
  border-radius: 0;
  box-shadow: none;
  font-size:1.1em;
  font-family:'Barlow', sans-serif;
}

input:placeholder,
textarea:placeholder {
  color: var(--text);
  opacity: 1;
}

/* Fokus */

.kontaktformular input:focus,
.kontaktformular select:focus,
.kontaktformular textarea:focus,
.yform--fiesemichel input:focus,
.yform--fiesemichel select:focus,
.yform--fiesemichel textarea:focus{
  border-bottom-color: rgba(70, 35, 28, 1);
}

/* Placeholder */

.kontaktformular ::placeholder,
.yform--fiesemichel ::placeholder{
  color: rgba(70, 35, 28, 1);
}

/* ---------------------------------------------------------
   Select Pfeil
--------------------------------------------------------- */

.kontaktformular select,
.yform--fiesemichel select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 22px 22px;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='13' viewBox='0 0 20 13' fill='none'%3E%3Cpath d='M0.746094 0.672657L9.65827 10.6726L18.7461 0.672607' stroke='%23441C14' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   Textarea
--------------------------------------------------------- */

.kontaktformular textarea,
.yform--fiesemichel textarea{
  min-height: 44px;
  resize: vertical;
}

/* =========================================================
   LAYOUT
========================================================= */

.kontaktformular .fm-cols,
.yform--fiesemichel .fm-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gapX);
  align-items: start;
  margin-top: clamp(18px, 2.6vw, 28px);
}

.kontaktformular .fm-full,
.yform--fiesemichel .fm-full{
  grid-column: 1 / -1;
}

/* Bottom */

.kontaktformular .fm-bottom,
.yform--fiesemichel .fm-bottom{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gapX);
  align-items: center;
  margin-top: clamp(18px, 2.6vw, 26px);
}

/* ---------------------------------------------------------
   CHECKBOX – BRAUN, ECKIG
--------------------------------------------------------- */

.kontaktformular .checkbox,
.yform--fiesemichel .checkbox{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.kontaktformular .checkbox input[type="checkbox"],
.yform--fiesemichel .checkbox input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;

  width: 26px;
  height: 26px;

  margin-top: 7px;   /* vorher 2px → jetzt tiefer */

  border: 2px solid #46231C;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

/* Haken */

.kontaktformular .checkbox input[type="checkbox"]:checked::after,
.yform--fiesemichel .checkbox input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;

  width: 7px;
  height: 14px;

  border-right: 3px solid #46231C;
  border-bottom: 3px solid #46231C;

  transform: rotate(45deg);
  left: 7px;
  top: 2px;
}

/* Checkbox Text */

.kontaktformular .checkbox label,
.yform--fiesemichel .checkbox label{
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
  color: var(--text);
}

/* Links */

.kontaktformular .checkbox a,
.yform--fiesemichel .checkbox a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pflichtfeld */

.kontaktformular .fm-req,
.yform--fiesemichel .fm-req{
  margin-top: 12px;
  font-weight: 700;
  color: var(--text);
  font-size:1.0em;
}

/* ---------------------------------------------------------
   Button
--------------------------------------------------------- */

.kontaktformular .fm-bottom .button,
.kontaktformular .fm-bottom button,
.kontaktformular .fm-bottom input[type="submit"],
.yform--fiesemichel .fm-bottom .button,
.yform--fiesemichel .fm-bottom button,
.yform--fiesemichel .fm-bottom input[type="submit"]{
  justify-self: end;
  text-transform: uppercase;
  letter-spacing: .22em;
  padding: 12px 28px;
  border-radius: 0;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px){

  .kontaktformular .fm-cols,
  .yform--fiesemichel .fm-cols{
    grid-template-columns: 1fr;
    gap: var(--gapY);
  }

  .kontaktformular .fm-bottom,
  .yform--fiesemichel .fm-bottom{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .kontaktformular .fm-bottom .button,
  .kontaktformular .fm-bottom button,
  .kontaktformular .fm-bottom input[type="submit"],
  .yform--fiesemichel .fm-bottom .button,
  .yform--fiesemichel .fm-bottom button,
  .yform--fiesemichel .fm-bottom input[type="submit"]{
    justify-self: start;
  }

}

#rex-yform{
  margin-bottom: var(--padding-bottom);
}