/* nötig für Abstände in Gutenberg */

:root {
    --wp--preset--line-height--small: clamp(26px, 3vw, 32px); 
    --wp--preset--line-height--medium: clamp(32px, 4vw, 40px); 
    --wp--preset--line-height--large: clamp(40px, 5vw, 60px); 
    --wp--preset--line-height--x-large: clamp(70px, 6vw, 110px); 
    --wp--preset--line-height--extra-large: clamp(80px, 7vw, 132px); 
}


:root {
    --wp--custom--spacing--small: clamp(26px, 3vw, 32px); 
    --wp--custom--spacing--medium: clamp(32px, 4vw, 40px); 
    --wp--custom--spacing--large: clamp(40px, 5vw, 60px); 

}

/* ===========================
   BASE BLOCK STYLES
   =========================== */

.wp-block {
    display: block;
    box-sizing: border-box;
}

.wp-block img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===========================
   IMAGE STYLES
   =========================== */
.wp-block-image {
    border: none;
}

.wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wp-block-image.is-style-rounded img,
.is-style-rounded img {
    border-radius: 100rem !important;
    overflow: hidden;
}

figure.image-portrait,
.image-portrait {
    width: 80% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

figure.image-portrait img,
.image-portrait img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ===========================
   COLUMN LAYOUT
   =========================== */
.wp-block-columns {
    display: flex;
    gap: 2rem;  /* Fester Abstand zwischen Spalten */
    flex-wrap: wrap;
 /*    */

 
}

.wp-block-column {
    flex-grow: 0;
    flex-basis: 66.66%;
    min-width: 0;
    margin-bottom: 0px !important;
}


.wp-block-column:last-child {
    flex-grow: 0;
    flex-basis: 66.66%;
    min-width: 0;
}

.wp-block-column p{

}

.wp-block-columns {
    box-sizing: border-box !important;

}

.wp-block-column {

    box-sizing: border-box !important;
}

@media (max-width: 47.9375rem) {
    .wp-block-columns {
        flex-direction: column;
        gap: 2rem;  /* Größerer Abstand zwischen gestapelten Spalten */
    }

    .wp-block-column {
        flex-basis: 100%;
    }

    .wp-block-columns.is-layout-flex {
        gap: 0;

    /*    margin: 0 !important; */  
    }
    figure.image-portrait,
.image-portrait {
    width: 100% !important;
 
}


}

/* ===========================
   TYPOGRAPHY
   =========================== */

/* Debug borders for Gutenberg blocks */
p,
.wp-block-paragraph {
    box-sizing: border-box !important
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {

    box-sizing: border-box !important;
  /*  margin: 10px 0 !important; */
}


.container {
    display: flex;
}

.column {
    flex-grow: 1; /* Alle Spalten wachsen gleichmäßig */
    flex-basis: 0; /* Startbreite */

}



/* ===========================
   BLOCK SPACING SYSTEM
   =========================== */

/* Letztes Element sollte keinen Abstand haben 
.wp-block:last-child {
    margin-bottom: 0;
}
*/
/* Spalten-Layout */
.wp-block-columns {
    display: flex;
    gap: 2rem;  /* Fester Abstand zwischen Spalten */
    flex-wrap: wrap;

/* margin-bottom: calc(var(--wp--custom--spacing--small) * 2); */
}

/* Abstände für Inhalte innerhalb von Spalten */
.wp-block-column > * {
/*  margin-bottom: 1.5rem; */
}

.wp-block-column > *:last-child {
 /*
    margin-bottom: 0; */
}

/* Spezielle Abstände für Überschriften */
.wp-block-heading {
  /*  margin-top: 2rem; */
/*  margin-bottom: 1.5rem; */
}

/* Abstände für Listen */
.wp-block-list {
    margin-top: calc(var(--wp--custom--spacing--small) * 1);
/*  margin-bottom: 1.5rem; */
    padding-left: 1.5rem;
}

.wp-block-list li {
/*  margin-bottom: 0.5rem; */
}

/* Responsive Anpassungen */
@media (max-width: 47.9375rem) {
    .wp-block-columns {
        flex-direction: column;
        gap: 2rem;  /* Größerer Abstand zwischen gestapelten Spalten */
    }

    .wp-block-column {
        flex-basis: 100%;
    }

 
    /* Angepasste Abstände für mobile */
    .wp-block-column > * {
       /* margin-bottom: 1rem; */
    }

    .wp-block-heading {
       /* margin-top: 1.5rem; */
        /* margin-bottom: 1rem; */
    }


}

.mobile-paragraph-spacer {
    margin-bottom: calc(var(--wp--custom--spacing--small) * 3) !important;

     }



@media (max-width: 1024px) {
.wp-block-column > *:last-child {
     
  /*  margin-bottom: 0 !important; */
}

.wp-block-column {

/* margin-bottom: calc(var(--wp--custom--spacing--small) * 1) !important; */
 
}

.mobile-paragraph-spacer {
    margin-bottom: calc(var(--wp--custom--spacing--small) * 1) !important;

     }
}

/* ===========================
   VERTICAL ALIGNMENT
   =========================== */

/* Bottom alignment **/
.is-vertically-aligned-bottom {
    align-self: flex-end !important;
    justify-content: flex-end !important;
}

.wp-block-columns .wp-block-column.is-vertically-aligned-bottom {
    align-self: flex-end !important;
    justify-content: flex-end !important;
}

.wp-block-group.is-vertically-aligned-bottom {
    justify-content: flex-end !important;
    height: 100%;
}

.wp-block-image.is-vertically-aligned-bottom {
    align-self: flex-end !important;
    margin-top: auto !important;
}

p.is-vertically-aligned-bottom,
.wp-block-paragraph.is-vertically-aligned-bottom {
    align-self: flex-end !important;
    margin-top: auto !important;
}


/* Responsive adjustments */
@media (max-width: 781px) {
    .wp-block-columns .wp-block-column.is-vertically-aligned-top {
        margin-bottom: auto !important;
    }
    
    .wp-block-columns .wp-block-column.is-vertically-aligned-center,
    .wp-block-columns .wp-block-column.is-vertically-aligned-middle {
        margin: auto !important;
    }
    
    .wp-block-columns .wp-block-column.is-vertically-aligned-bottom {
        margin-top: auto !important;
    }
}

/* Workaround notwendig für paragraph-block, 
da dieser block nicht die font-size-attribute akzeptiert 
Betrifft Seite: Wie ich arbeite */


.has-large-font-size,
p.has-large-font-size,
.wp-block-paragraph.has-large-font-size {
    line-height: var(--wp--preset--line-height--large) !important;


}

.has-x-large-font-size,
p.has-x-large-font-size,
.wp-block-paragraph.has-x-large-font-size {
    line-height: var(--wp--preset--line-height--x-large) !important;

}

.has-extra-large-font-size,
p.has-extra-large-font-size,
.wp-block-paragraph.has-extra-large-font-size {
    line-height: var(--wp--preset--line-height--extra-large) !important;
}