/**
 * Layout
 */
body {
    background-image: none;
    background-color: var(--background-color-white);
}
.main-content {
    width: 100%;
    margin-inline-end: 0;
}
.layout--content-medium,
.layout--pass--content-medium > * {
    grid-column: 1 / 13;
}
@media (min-width: 43.75rem) {
    .layout--content-medium,
    .layout--pass--content-medium > * {
        grid-column: 1 / 15;
    }
    .wide-content {
        width: 100%;
        margin-block: 0;
        margin-inline-start: 0;
    }
}
@media (min-width: 62.5rem) {
    #block-kastaniecustom-content,
    #block-kastaniecustom-page-title {
        grid-column: 1 / 13;
    }
    .wide-content {
        width: 100%;
        margin-inline-start: 0;
    }
}

/* Form */
form select,
form input {
    height: 70px;
}
/* Menü */
.site-branding__logo img {
    max-height: var(--sp3);
    min-height: 75px;
}
.main-content__container {
    padding-block-start: 50px;
}
.site-branding__name {
    display: none;
}
.primary-nav__menu-link.is-active span {
    text-decoration: underline 5px var(--primary-color);
}
.primary-nav__menu-link-inner::after {
    inset-block-end: 0px;
    border-color: var(--primary-color);
}
#block-kastaniecustom-menubarrierearmutfunktionen {
    display: flex;
}
.primary-nav__menu-item {
    margin-block-end: 0px;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
    border: none;
}
@media (min-width: 75rem) {
    body:not(.is-always-mobile-nav) .primary-nav__menu-link {
        font-size: 1.125rem;
    }

    body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
        padding-block: var(--sp0-5);
    }
    body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
        border-top-width: 3px;
    }

    body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
        top: 55px;
        padding-block: 1rem;
        padding-inline-start: 1rem;
        padding-inline-end: 1rem;
        border-top: solid var(--primary-color) 3px;
        width: fit-content;
        max-height: unset;
        display: grid;
        grid-template-columns: [line1] 200px [line2] 200px;
    }
    .primary-nav__menu--level-2 li:nth-child(odd) {
        border-right: 2px solid lightgrey;
        padding-right: 10px;
    }
    .primary-nav__menu--level-2 li:nth-child(even) {
        padding-left: 10px;
    }
    .site-branding__logo img {
        max-height: 120px;
    }
    .site-branding__inner {
        height: 120px;
    }
}
.form-search::placeholder,
.block-search-narrow input[type="search"],
.block-search-wide__wrapper input[type="search"] {
    font-family: var(--font-sans);
}

/* Sekundares Menü */
#sek-menu-wrapper,
#sek-menu-wrapper .text-content {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: absolute;
    top: 10px;
}
#sek-menu-holder {
    display: flex;
    gap: 20px;
}
.sek-menu-item,
.language-link {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: normal;
    box-shadow: inset 0 -2px 0 0 var(--link-color);
    padding: 3px 3px 0px 28px;
    text-decoration: none;
    display: inline-block;
}
.sek-menu-item:hover,
.language-link:hover {
    text-decoration-color: transparent;
    color: var(--text-color-light);
    box-shadow: inset 0 -2em 0 0 var(--primary-color);
    transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
}
.sek-menu-item::before,
.language-link::before {
    width: 22px;
    height: 22px;
    position: absolute;
    margin-left: -25px;
}
#suche-button::before {
    content: url(/themes/custom/kastanieolivero/images/icons/suche-icon.svg);
}
#barrierearmut-button::before {
    content: url(/themes/custom/kastanieolivero/images/icons/barrierearmut-icon.svg);
}
.language-link::before {
    content: url(/themes/custom/kastanieolivero/images/icons/einfache-sprache-icon.svg);
}

#suche-button:hover::before {
    content: url(/themes/custom/kastanieolivero/images/icons/suche-icon-w.svg);
}
#barrierearmut-button:hover::before {
    content: url(/themes/custom/kastanieolivero/images/icons/barrierearmut-icon-w.svg);
}
.language-link:hover::before {
    content: url(/themes/custom/kastanieolivero/images/icons/einfache-sprache-icon-w.svg);
}

.header-nav {
    padding-top: 60px;
    min-width: 450px;
}
@media (min-width: 75rem) {
    body:not(.is-always-mobile-nav) .header-nav {
        padding-top: 0px;
    }
}
@media (max-width: 440px) {
    .header-nav {
        padding-top: 110px;
        min-width: unset;
    }
}
/* sprachswitcher definition */
.language-switcher-language-url,
.language-switcher-language-url li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}
.language-switcher-language-url li {
    display: none;
}
.language-switcher-language-url li:not(.is-active) {
    display: list-item;
}

/* Startseite Header */
#block-kastaniecustom-startseiteheader {
    margin-bottom: 100px;
}
#block-kastaniecustom-startseiteheader .text-content {
    position: relative;
}
.header-slogan {
    width: fit-content;
    background-color: var(--background-color-light);
    padding: 1rem;
    position: absolute;
    z-index: 1;
    margin-top: 30%;
}
.header-slogan::before {
    content: url(/themes/custom/kastaniecustom/images/grafiken/pinsel-grafik-1.svg);
    position: absolute;
    width: 50%;
    left: -50px;
    border-radius: 50%;
    bottom: -50%;
}
.header-slogan h1 {
    margin: 0;
}
.header-image-holder {
    width: 50%;
    margin-left: 50%;
}
@media only screen and (max-width: 700px) {
    #block-kastaniecustom-startseiteheader {
        margin-bottom: 50px;
    }
    .header-slogan {
        margin-top: 40%;
    }
    .header-image-holder {
        width: 70%;
        margin-left: 30%;
    }
}
.header-image {
    padding-top: 100%;
    position: relative;
}
.header-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    object-fit: cover;
}
.header-image::before {
    content: url(/themes/custom/kastaniecustom/images/grafiken/pinsel-grafik-4.svg);
    position: absolute;
    width: 80%;
    left: 30%;
    top: 10%;
}
/* Startseite Angebote */
#block-kastaniecustom-views-block-dienstleistungen-block-1 #more-items {
    width: 100%;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1 #more-items,
#block-kastaniecustom-views-block-dienstleistungen-block-1 .view-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1 .item {
    width: calc(50% - 2rem);
    min-width: 280px;
}
@media only screen and (max-width: 650px) {
    #block-kastaniecustom-views-block-dienstleistungen-block-1 .item {
        width: 100%;
    }
}
#block-kastaniecustom-views-block-dienstleistungen-block-1 .item header {
    box-shadow: 2px 2px 8px 2px var(--box-shadow);
}
#block-kastaniecustom-views-block-dienstleistungen-block-1 .item .node__title {
    width: 100%;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1
    .item
    .node__title
    a {
    padding: 1rem;
    display: block;
    font-weight: bold;
    width: 100%;
    background-color: var(--background-color-light);
    transition: 0.3s;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1
    .item
    .node__title
    a:hover {
    background-color: var(--primary-color);
    color: var(--background-color-white);
}
#block-kastaniecustom-views-block-dienstleistungen-block-1
    .item
    .node__title
    a
    span {
    box-shadow: inset 0 -2px 0 0 var(--background-color-light);
    transition: 0.3s;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1
    .item
    .node__title
    a:hover
    span {
    box-shadow: inset 0 -2px 0 0 var(--text-color-light);
}
#block-kastaniecustom-views-block-dienstleistungen-block-1
    .node--type-dienstleistung,
#block-kastaniecustom-views-block-dienstleistungen-block-1 .node__top-wrapper,
#block-kastaniecustom-views-block-dienstleistungen-block-1 .item h2,
#block-kastaniecustom-views-block-dienstleistungen-block-1 .node__content {
    margin: 0 !important;
    margin-block-end: 0;
    padding: 0;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1 img {
    width: 100%;
    transition: 0.3s;
}
#block-kastaniecustom-views-block-dienstleistungen-block-1 a:hover img {
    opacity: 0.5;
}
#toggle-more-items {
    margin: auto;
}

/* Breadcrumbs */
#block-kastaniecustom-breadcrumbs {
    grid-column: 1 / 13;
}
@media (min-width: 62.5rem) {
    #block-kastaniecustom-breadcrumbs {
        grid-column: 1 / 13;
    }
}
/* Stellenanzeige Liste */
.view-stellenanzeigen .views-view-grid__item {
    background: var(--background-color-white);
    box-shadow: 2px 2px 8px 2px var(--box-shadow);
}
.block-views-blockstellenanzeigen-block
    .views-view-grid--horizontal
    .views-view-grid__item {
    width: 45%;
    min-width: 350px;
}
.listenansicht.view-stellenanzeigen .view-content .views-row {
    width: 45%;
    min-width: 300px;
}
.view-stellenanzeigen .node__top-wrapper {
    padding: 0 1rem;
}
.view-stellenanzeigen .node__content {
    padding: 0 1rem 1rem 1rem;
}
.view-stellenanzeigen .views-view-grid__item article {
    margin: 0;
}
.view-stellenanzeigen .node__title {
    font-size: 1.75rem;
    line-height: 2.75rem;
    margin-block-end: 0;
}
.view-stellenanzeigen .node--view-mode-teaser .field {
    margin-block-end: 1rem;
}
.view-stellenanzeigen .field--name-field-datum {
    background-color: transparent;
    padding: 0;
    width: unset;
}
.view-stellenanzeigen .field--name-field-datum time {
    font-weight: normal;
}
/* Über uns */
#block-kastaniecustom-uberunsvideo {
    position: relative;
}
.ueber-uns-background {
    background-color: var(--primary-color);
    width: 100vw;
    height: 500px;
    opacity: 70%;
}
.ueber-uns-textbox h2 {
    margin: 0;
}
.ueber-uns.wrapper {
    background-color: var(--background-color-light);
    width: 100%;
    height: 500px;
    background-image: url("../images/kbv-uber-uns-image.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.ueber-uns-textbox {
    margin-left: 0px;
    max-width: 600px;
    background-color: var(--background-color-white);
    box-shadow: 2px 2px 8px 2px var(--box-shadow);
    padding: 1rem;
    width: 100%;
    position: relative;
    min-width: 310px;
    top: 200px;
}
/*Suche Stellenanzeigen List*/
.field--name-field-datum .field__label,
.field--name-field-datum .field__item {
    display: inline-block;
}

#views-exposed-form-stellenanzeigen-uebersichtsliste,
#views-exposed-form-aktuelles-uebersichtsliste,
#views-exposed-form-termine-uebersichtsliste {
    display: flex;
    gap: 1rem;
}
#views-exposed-form-stellenanzeigen-uebersichtsliste .form-text,
#views-exposed-form-aktuelles-uebersichtsliste .form-text,
#views-exposed-form-termine-uebersichtsliste .form-text {
    width: 100%;
}
#views-exposed-form-stellenanzeigen-uebersichtsliste .js-form-type-textfield,
#views-exposed-form-aktuelles-uebersichtsliste .js-form-type-textfield,
#views-exposed-form-termine-uebersichtsliste .js-form-type-textfield {
    width: 80%;
}
.listenansicht.view-stellenanzeigen.view-id-stellenanzeigen .view-content,
.listenansicht.view-id-aktuelles .view-content,
.listenansicht.termine .views-view-grid {
    gap: 2rem 5%;
}
.listenansicht.view-stellenanzeigen.view-id-stellenanzeigen .views-row,
.listenansicht.view-id-aktuelles .views-row {
    background: var(--background-color-white);
    box-shadow: 2px 2px 8px 2px var(--box-shadow);
}
/* Mehr Button */
.block-views .view-footer .list-more-link,
#toggle-more-items {
    display: inline-table;
}
/* Seitenabschnitt */
/* Ansprechperson */
.field--name-field-text-block {
    margin-bottom: 2%;
}
.paragraph--type--ansprechperson .node__title {
    font-size: 1.75rem;
}
.paragraph--type--ansprechperson .field--type-image {
    padding-top: 100%;
    position: relative;
}
.paragraph--type--ansprechperson .field--type-image::before {
    content: url(/themes/custom/kastaniecustom/images/grafiken/pinsel-grafik-kreiss.svg);
    width: 100%;
    height: 100%;
    position: absolute;
    left: -15px;
    top: -15px;
    border-radius: 50%;
}
.paragraph--type--ansprechperson .field--type-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    object-fit: cover;
}
.paragraph--type--ansprechperson .node--view-mode-teaser .field {
    margin: 0 0 1rem 0;
}
.paragraph--type--ansprechperson .field--name-field-ansprechperson {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
@media (min-width: 43.75rem) {
    .paragraph--type--ansprechperson .field--name-field-ansprechperson {
        justify-content: left;
    }
}
.paragraph--type--ansprechperson
    .field--name-field-ansprechperson
    > .field__item {
    width: calc(50% - 2rem);
    min-width: 250px;
}
.paragraph--type--ansprechperson .node__top-wrapper {
    margin: 0 !important;
}
.paragraph--type--ansprechperson .image-area {
    max-width: 250px;
}
.field--name-field-position {
    font-weight: bold;
}
.node--type-ansprechperson.node--view-mode-teaser .field--label-inline {
    display: flex; /* Flexbox wird auf das übergeordnete Element angewendet */
    align-items: baseline;
    gap: 10px; /* Abstand zwischen Label und Adressblock  */
    flex-direction: column; /* Mobil: vertikal */
}

@media (min-width: 730px) {
    .node--type-ansprechperson.node--view-mode-teaser .field--label-inline {
        display: flex; /* Flexbox wird auf das übergeordnete Element angewendet */
        align-items: baseline;
        gap: 10px; /* Abstand zwischen Label und Adressblock  */
        flex-direction: row; /* Standard: horizontal */
    }
}
.node--type-ansprechperson.node--view-mode-teaser .field__label {
    min-width: 100px; /* Feste Breite für das Label, kannst du anpassen */
    text-align: left; /* Label bleibt linksbündig */
}

.node--type-ansprechperson.node--view-mode-teaser .field__item {
    flex-grow: 1; /* Adressblock nimmt den verbleibenden Platz ein */
}
.node--type-ansprechperson.node--view-mode-teaser .address {
    white-space: nowrap; /* verhindert den Umbruch der Adresse */
}

/* Vorstand */
#block-kastaniecustom-views-block-vorstand-block .views-view-grid__item {
    width: 100%;
    position: relative;
}
.item-list li {
    position: relative;
}
.view-vorstand .field--type-image {
    margin-block-end: 2rem !important;
    width: 100%;
    float: left;
    margin: 0 2rem 2rem 0;
}
.view-vorstand .field--type-image::before {
    content: url(/themes/custom/kastaniecustom/images/grafiken/pinsel-grafik-5.svg);
    width: 80%;
    position: absolute;
    left: -70px;
    top: -10px;
    border-radius: 50%;
    z-index: -1;
}

@media (min-width: 500px) {
    .view-vorstand .field--type-image {
        margin-block-end: 2rem !important;
        width: 30%;
        float: left;
        margin: 0 2rem 2rem 0;
    }
    .view-vorstand .field--type-image::before {
        content: url(/themes/custom/kastaniecustom/images/grafiken/pinsel-grafik-5.svg);
        width: 30%;
        position: absolute;
        left: -50px;
        top: -10px;
        border-radius: 50%;
        z-index: -1;
    }
}
.view-vorstand .field--type-image img {
    border-radius: 50%;
}
.view-vorstand .image-area {
    min-width: 300px;
}
.view-stellenanzeigen .node--view-mode-teaser .field {
    font-size: 16px;
    line-height: var(--sp1-5);
}
#block-kastaniecustom-views-block-vorstand-block,
#block-kastaniecustom-uberunskbvinzahlen,
#block-kastaniecustom-uberunsvideo,
#block-kastaniecustom-views-block-termine-startseitenblock {
    grid-column: 1 / 15;
}
@media (min-width: 43.75rem) {
    #block-kastaniecustom-views-block-vorstand-block,
    #block-kastaniecustom-uberunskbvinzahlen,
    #block-kastaniecustom-uberunsvideo,
    #block-kastaniecustom-views-block-termine-startseitenblock {
        grid-column: 1 / 15;
    }
    .view-stellenanzeigen .node--view-mode-teaser .field {
        font-size: 1.125rem;
        line-height: var(--sp2);
    }
}
@media (min-width: 62.5rem) {
    #block-kastaniecustom-views-block-vorstand-block,
    #block-kastaniecustom-uberunskbvinzahlen,
    #block-kastaniecustom-uberunsvideo,
    #block-kastaniecustom-views-block-termine-startseitenblock {
        grid-column: 1 / 15;
    }
}
@media only screen and (max-width: 550px) {
    .view-vorstand .field--type-image {
        margin-block-end: 0 !important;
        margin: 0 1rem 1rem 0;
    }
}
/* Chronik */
.timline-element-datum {
    font-weight: bold;
    font-size: calc(2rem + var(--font-size-modifier));
    margin-bottom: 0.5em;
}
/* The actual timeline (the vertical ruler) */
.paragraph--type--timeline .timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.paragraph--type--timeline .timeline::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #b2b2b2;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.paragraph--type--timeline .timeline-element {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

/* The circles on the timeline */
.paragraph--type--timeline .timeline-element::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    right: -9px;
    background-color: var(--primary-color);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

/* Place the container to the left */
.paragraph--type--timeline .links {
    left: 0;
}

/* Place the container to the right */
.paragraph--type--timeline .rechts {
    left: 50%;
}

/* Fix the circle for containers on the right side */
.paragraph--type--timeline .rechts::after {
    left: -11px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .paragraph--type--timeline .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .paragraph--type--timeline .timeline-element {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .paragraph--type--timeline .timeline-element::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make sure all circles are at the same spot */
    .paragraph--type--timeline .links::after,
    .paragraph--type--timeline .rechts::after {
        left: 19px;
    }

    /* Make all right containers behave like the left ones */
    .paragraph--type--timeline .rechts {
        left: 0%;
    }
}

/*Startseite Dienstleistungen Accordion*/
#more-items {
    margin-top: 20px;
}

button.pswp__button.pswp__button--share {
    display: none;
}
/*Colorbox, Dialog*/
#cboxClose {
    top: -26px;
    right: -26px;
    width: 80px;
    height: 80px;
    background: url(../images/icons/kbv-schliessen-icon-1.svg) no-repeat;
}
#cboxClose:hover {
    background: url(../images/icons/kbv-schliessen-icon-hover.svg) no-repeat;
}

/*termin add on filter wird hochgeschoben wenn er erscheint */
.listenansicht.termine .view-filters {
    margin-top: -40px;
}
/*time field probleme - muss noch genau analysiert werden */
.field.field--name-field-datum.field--type-datetime.field--label-inline.clearfix {
    margin: 0;
}
/*Termin*/
.listenansicht.termine .views-view-grid {
    gap: 2rem 5%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
.listenansicht.termine .views-view-grid .views-view-grid__item {
    width: 30%;
    min-width: 300px;
}
/* video */
.field--name-field-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    height: auto;
    max-width: 900px;
}
/* termin und datumsansicht - schriftgröße anpassen wäre gut ist aber nicht erwünscht */
.field--name-field-datum-von-bis time:nth-of-type(2) {
    display: block;
}
/* vorstand - verbrechen - muss überarbeitet werden */
.view-id-vorstand .item-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.listenansicht.vorstand {
    display: inline-block !important;
    width: 100% !important;
}

.listenansicht.vorstand .view-content {
    display: block;
    width: 100%;
}
#block-kastaniecustom-uberunskbvinzahlen {
    margin-bottom: -20px;
}
.page-node-59 .region--content {
    margin-block-end: 0;
}
/* karrierebereich */
.page-node-285 .node__content {
}

@media (min-width: 768px) {
    .page-node-285 .node__content {
    }

    .page-node-285 .node__content > div {
    }
}
.listenansicht.horizontal .view-content .views-row {
    width: 100%;
    min-width: 300px;
}
.listenansicht.horizontal h2 {
    padding: 0 1rem 1rem 1rem;
}
