/* --- Basis-Einstellunge und Variablen: Schriften, Farben, Abstände, Eck-Radien ------------------------------------------------------------------------------------ */
@import url("https://use.typekit.net/fxv8ret.css");

@font-face {
    font-family: "Inria Sans";
    src: url("../fonts/InriaSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: bold;
}

@font-face {
    font-family: "Inria Sans";
    src: url("../fonts/InriaSans-Regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inria Sans";
    src: url("../fonts/InriaSans-Italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Inria Sans";
    src: url("../fonts/InriaSans-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Inria Sans";
    src: url("../fonts/InriaSans-LightItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
}

 
/* --- Variablen ------------------------------------------------------------------------- */

:root {
    /* Schriftfamilien ---*/
    --font-family--primary: "Inria Sans", serif;

    /* Schriftgrössen ---*/
    --font-size--xx-small: 0.9rem;
    --font-size--x-small: clamp(1rem, 0.8rem + 0.1227vw, 1.15rem);
    --font-size--small: clamp(1.0625rem, 1.0341rem + 0.1227vw, 1.1875rem); /* Standard-Schriftgrösse ca. 19 px*/
    --font-size--medium: clamp(1.25rem, 1.2216rem + 0.1227vw, 1.375rem);
    --font-size--large: clamp(1.4rem, 2vw + 1rem, 1.7rem);
    --font-size--x-large: clamp(2rem, 3.5vw + 1rem, 1.75rem);
    /* --font-size--xx-large: clamp(2.125rem, 1.9831rem + 0.6135vw, 2.75rem); */
    --font-size--xx-large: clamp(2.25rem, 1.848rem + 1.071vw, 3rem);
    --font-size--xxx-large: clamp(2.8125rem, 2.4578rem + 1.5337vw, 4.375rem);

    /* --- Schriftbreiten --- */
    --font-weight--headline: 700;
    --font-weight--copy: 400;

    /* --- Farben --- */
    --color--primary-1: #587470;
    --color--primary-2: #304744;
    --color--primary-3: #ffffff;
    --color--secondary-1: #f2f2f2;
    --color--secondary-2: #cecece;
    --color--secondary-3: #ab836dc8;
    --color--shadow-1: rgba(60, 112, 221, 0.2);

    /* --- Eck-Radien für Bilder, Kacheln, etc. ---*/
    --border-radius--small: 0.5rem;
    --border-radius--medium: clamp(0.35rem, 5vw, 0.5rem);

    /* --- Schatten für Cards und Boxen  */
    --shadow--primary: 0px 4px 32px 0px var(--color--shadow-1);
}
/*----------------------------------------------------------------------------------------------------------------------------------------*/

/* --- Basis-Einstellungen, -Abstände  ------------------------------------------------------------------------------------ */
html,
body {
    height: 100%;
    margin: 0;
}

body:not(.wp-admin) {
    /* padding-left: 15px; 
    padding-right: 15px; */
    overflow-x: hidden;
    font-family: var(--font-family--primary);
}

section {
    padding-top: clamp(2rem, 4vw + 1rem, 5rem); /* Abstände zwischen den Haupt-Sections */
    padding-bottom: clamp(2rem, 4vw + 1rem, 5rem);
    /* padding-left: 2rem;
    padding-right: 2rem; */
}

section.is-style-group-bg-grey {
    padding-top: clamp(4rem, 8vw + 2rem, 10rem);
    padding-bottom: clamp(4rem, 8vw + 2rem, 10rem);
    margin-top: clamp(2rem, 4vw + 1rem, 5rem); /* Abstände zwischen den Haupt-Sections */
    margin-bottom: clamp(2rem, 4vw + 1rem, 5rem);
}

.entry-content {
    /* padding: clamp(2.5rem, 1.889rem + 1.954dvw, 4rem) 0 0 0; */
    /* padding: clamp(4.5rem, round(7rem + -8.333vw, 0.5em), 2rem) 0 0 0; */
    padding: 2rem 0 0 0;
    overflow-x: hidden;
}

section.wp-block-group > div:not(.alignwide),
section.wp-block-group.alignfull > div:not(.alignwide) {
    padding: 0 2rem;
}

section:last-of-type:not(.is-style-group-bg-grey ){
    margin-bottom: clamp(2rem, 4vw + 1rem, 5rem);
}

section:last-of-type{
    margin-bottom: 0;
}

/* --- Bild-Basiseinstellungen ------------------------------------------------------------------------------------ */
img,
.wp-block-media-text__media img,
.wp-block-cover img,
.wp-block-cover span,
.wp-block-image img {
    border-radius: var(--border-radius--medium);
}

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

/* :where(figure) {
    margin: 0 0 0em;
  } */

.wp-block-cover .wp-block-cover__background {
    background: linear-gradient(0deg, hsl(22deg 27% 20% / 69%) 0%, #ab836d00 35%, rgba(86, 146, 206, 0) 100%);
    opacity: 1 !important;
    background-color: transparent !important;
}

/* --- Standard-Paragraph ------------------------------------------------------------------------------------ */
.wp-block-group p {
    font-family: var(--font-family--primary);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--copy);
    line-height: 1.45em;
    margin: 0;
    /* margin-bottom: clamp(0.5rem, 2vw + 1rem, 1rem); */
    hyphens: auto;
    color: var(--color--primary-2);
}

.is-layout-constrained > .alignwide {
    padding: 0 2rem;
}

.wp-block-columns.alignwide.is-layout-flex {
    column-gap: 4rem;
}

div.wp-block-group.alignwide p.lead-text {
    font-size: var(--font-size--xx-large);
    font-style: italic;
    line-height: 127% !important;
}

/* --- Standard-Links ------------------------------------------------------------------------------------ */
a:link,
a:visited {
    color: var(--color--primary-2);
    transition: all 0.5s ease;
    text-decoration: underline;
}
a:hover,
a:active {
    color: var(--color--primary-1);
    transition: all 0.5s ease;
}

/* --- Bulletpoint-Liste ------------------------------------------------------------------------------------ */
ul.wp-block-list {
    font-family: var(--font-family--primary);
    font-size: var(--font-size--small);
    hyphens: auto;
    list-style: none; /* Entfernt die Standard-Bullets */
    padding: 0;
    margin: 0;
}

.wp-block-list li {
    position: relative;
    padding-left: 20px; /* Platz für den Bulletpoint (10px Abstand + Bulletgröße) */
    line-height: 120%;
    margin-bottom: 0.8rem; /* Abstand nach */
}

/* Bulletpoint */
.wp-block-list li::before {
    content: ""; /* Erzeugt ein eigenes Bullet-Element */
    position: absolute;
    left: 0; /* Positioniert das Bullet vor dem Text */
    top: 0.55em; /* Zentriert das Bullet optisch zur ersten Zeile */
    width: 0.6rem;
    height: 2px;
    background-color: var(--color--primary-1);
}

/* --- Headings H1-H5 ------------------------------------------------------------------------------------ */

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading {
    margin: 0;
    font-family: var(--font-family--primary);
    font-size: var(--font-size--xxx-large);
    line-height: 115%;
}

h2.wp-block-heading, h3#wdt-table-title-1 {
    font-size: var(--font-size--xx-large);
    margin-bottom: clamp(0.75rem, 1vw + 1rem, 3rem);
    color: var(--color--primary-1);
    font-weight: var(--font-weight--headline);
}
h3, 
h3.wp-block-heading {
    font-size: var(--font-size--x-large);
    margin-bottom: clamp(1rem, 2.6667vw, 2rem);
    line-height: 115%;
    color: var(--color--primary-1);
    font-weight: var(--font-weight--headline);
}
h4.wp-block-heading {
    font-size: var(--font-size--large);
    line-height: 115%;
    color: var(--color--primary-1);
}
h5.wp-block-heading {
    font-size: var(--font-size--medium);
    line-height: 115%;
    
}

:where(.wp-block-heading:not(.section-card-employees h3)) {
    white-space: normal;
    /* Automatische Silbentrennung aktivieren – für verschiedene Browser */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    /* Trennungsgrenzen festlegen: 
     Erlaubt wird nur eine Trennung, wenn mindestens 4 Zeichen vor und 4 Zeichen nach der Trennstelle stehen 
     und das Wort insgesamt mindestens 8 Zeichen hat. */
    -webkit-hyphenate-limit-chars: 8 4 4;
    -moz-hyphenate-limit-chars: 8 4 4;
    -ms-hyphenate-limit-chars: 8 4 4;
    hyphenate-limit-chars: 8 4 4;
    /* Fallback: Falls Hyphenation nicht unterstützt wird, 
     sollen lange Wörter umgebrochen werden */
    /* overflow-wrap: break-word;
    word-wrap: break-word; */
}

/* --- Paragraphs, Summary ------------------------------------------------------------------------------------ */


p:not(.wp-block-group:has(a.cta) > p), summary {
    line-height: 140% !important;
}

.block-editor-block-list__block.header-1 .wp-block-cover__inner-container > div > .block-editor-block-list__block > p{
    line-height: 100% !important;
    color: white !important;
}

block-editor-block-list__block.header-1 .wp-block-cover__inner-container > div > .block-editor-block-list__block > p > a:link,
block-editor-block-list__block.header-1 .wp-block-cover__inner-container > div > .block-editor-block-list__block > p > a:visited,
block-editor-block-list__block.header-1 .wp-block-cover__inner-container > div > .block-editor-block-list__block > p > a:hover,
block-editor-block-list__block.header-1 .wp-block-cover__inner-container > div > .block-editor-block-list__block > p > a:active,
block-editor-block-list__block.header-1 .wp-block-cover__inner-container > div > .block-editor-block-list__block > p > a{
    color: white !important;
}

/* --- Standard centered Items ---------------------------------------------------------------------------------------------- */

.card:has(.has-text-align-center) .wp-block-buttons.is-layout-flex {
    justify-content: center;
}

.card:has(.has-text-align-center) .wp-block-buttons .wp-block-button__link {
    margin-top: 2rem;
}

.wp-block-group.text-wide-centered {
    width: 75%;
    margin-bottom: 5rem;
}

/* --- 404 ---------------------------------------------------------------------------------------------- */

section.error .wp-block-buttons > .wp-block-button {
    margin: 0;
}

.wp-site-blocks:has(.error) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.wp-site-blocks > .error {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: start;
}

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

.section-form-contact .wp-block-group.is-layout-grid .quform {
    grid-column: 2 / span 10;
}

.section-form-contact .quform form {
    margin-left: auto;
    margin-right: auto;
}

/* ---- wp Datatables --------------------------------------------------------------------------------------- */
table#wpdtSimpleTable-1 {
    width: 100% !important;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td.wpdt-cell a[data-link-content="wpdt-link-content"] button.grundriss-pdf {
    background-color: var(--color--primary-1);
    /* padding: 1rem 1.5rem; */
    font-family: var(--font-family--primary);
    font-size: var(--font-size--x-small);
    letter-spacing: 0.015em;
    text-decoration: none;
    white-space: nowrap;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td.wpdt-cell a[data-link-content="wpdt-link-content"] button.grundriss-pdf:hover {
    background-color: var(--color--primary-2);
}

tr.wpdt-cell-row:nth-child(even) {
    background-color: #5a857f21;
}

section .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th.wpdt-cell {
    border: none !important;
    background-color: #5193896e !important;
    padding: 1.5rem 10px !important;
    color: var(--color--primary-2);
    font-size: var(--font-size--small);
    text-align: left;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td.wpdt-cell {
    border: none;
    /* padding: 1.25rem !important; */
    background-color: unset;
    color: var(--color--primary-2);
    font-size: var(--font-size--small);
    text-align: left;
}

.wp-block-wpdatatables-wpdatatables-gutenberg-block {
    margin-bottom: clamp(4rem, 8vw + 1rem, 7rem);
}

p.lead-text {
    hyphens: none;;
}

/* ---- Cover --------------------------------------------------------------------------------------- */
div.wp-block-group:has(>.cta) p {
    pointer-events: none;
}

/* ---- Media Queries --------------------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .is-layout-grid p,
    .ansicht-360 .wp-block-group.is-vertical.is-layout-flex  {
        grid-column: span 7;
    }

    .is-layout-grid p.lead-text {
        grid-column: span 9;
    }

    .is-layout-grid .wp-block-group.alignwide {
        grid-column: span 7;
    }
}

@media (max-width: 960px) {
    .wp-block-group.text-wide-centered {
        width: 80%;
        padding: 4%;
        box-sizing: unset;
    }

    section:not(.alignwide .alignfull) > div:has(.alignfull),
    section.alignfull > div.alignwide {
        padding: 0 !important;
    }

    .is-layout-constrained > .alignwide {
        padding: 0rem !important;
    }

    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: calc(100dvw - 3rem) !important;
    }

    section.wp-block-group > div:not(.alignwide),
    section.wp-block-group.alignfull > div:not(.alignwide) {
        padding: 0;
    }

    h1.wp-block-heading,
    h2.wp-block-heading,
    h3.wp-block-heading,
    h4.wp-block-heading,
    h5.wp-block-heading {
        margin: 0;
        font-family: var(--font-family--primary);
        font-size: var(--font-size--xxx-large);
        line-height: 100%;
        letter-spacing: -0.01rem;
    }

    h2.wp-block-heading {
        font-size: var(--font-size--x-large);
        margin-bottom: clamp(0.75rem, 1vw + 1rem, 3rem);
    }
    h3.wp-block-heading {
        font-size: var(--font-size--large);
        line-height: 115%;
    }
    h4.wp-block-heading {
        font-size: var(--font-size--medium);
        line-height: 115%;
    }
    h5.wp-block-heading {
        font-size: var(--font-size--small);
        line-height: 115%;
    }

    .quform-responsive-elements-phone-landscape .quform-element-submit button {
        margin: 0;
        width: fit-content;
    }
}

@media (max-width: 860px) {
    .section-text-media-classic-m-left > .wp-block-columns.is-layout-flex {
        flex-direction: column;
        width: 80%;
    }
}

@media (max-width: 781px) {
    .header-2 .wp-block-group.is-vertical.is-layout-flex {
        padding: 0 9%;
    }
}

@media (max-width: 400px) {
    .wp-block-group.text-wide-centered {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 2rem;
    }

    .section-form-contact .wp-block-group.is-layout-grid .quform {
        grid-column: 1 / span 12;
    }
}