/* pt-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* pt-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --font-size-default: 1.25rem;
    --black: #000;
    --white: #fff;
    --lightblack: rgba(68, 68, 68, 1);
    --color-bodyfont: #000;
    --color-primary: #51773c;
    --color-secondary: #ded5c4;
    --bgcolor-dark: #e3dcce;
    --bgcolor-light: #ede8df;
    --bgcolor-events: #f1eee6;
    --margin-extrasmall: 0.5rem;
    --margin-small: 1rem;
    --margin-medium: 2rem;
    --margin-large: 4rem;
    --border-radius-default: 0.75rem;
    --border-radius-small: 0.25rem;
    /* Nav */
    --nav-font-size: var(--font-size-default);
    --nav-color: var(--color-bodyfont);
    --nav-active-color: var(--color-bodyfont);
    --nav-font-weight: 400;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

[id="wrapper"] {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body {
    font-size: var(--font-size-default);
    font-family: 'PT Sans', Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color: var(--color-bodyfont);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lightblack);
    font-weight: normal;
    margin-top: 0;
}

.content-headline.hl-primary {
    color: var(--color-primary);
}

p {
    margin: 0 0 0.5rem 0;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.img--round {
    border-radius: 100%;
}

.mod_article {
    padding-top: var(--margin-medium);
    padding-bottom: var(--margin-medium);
}

.container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.bg-dark {
	background-color: var(--bgcolor-dark);
}

.bg-light {
	background-color: var(--bgcolor-light);
}

.bg-events {
	background-color: var(--bgcolor-events);
}

.std-btn {
    display: inline-block;
    text-decoration: none;
    background-color: var(--bgcolor-events);
    padding: 1rem 2rem 1rem 1rem;
    color: var(--color-bodyfont);
}

/* Header */
[id="header"] {
    /*padding: 1rem;*/
}

.header--fixed {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    background: #fff;
    padding: 15px 0 0 0;
}

.logo-search {
    margin-top: 5rem;
    display: flex;
    justify-content: space-between;
}


/* Footer */
[id="footer"] {
    padding: 1rem;
}

/* Nav */

.nav-is-desktop .nav--main .not-mainmenu {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.nav-is-desktop .navigation-main a.trail, 
.nav-is-desktop .navigation-main a:hover, 
.nav-is-desktop .navigation-main strong:not(.does-not-exist) {
    font-weight: bold;
}

.nav-is-desktop .navigation-main li {
    display: flex;
}

.nav-is-desktop .navigation-main li::before {
    content: '|';
    padding-right: 1.25rem;
}

.nav-is-desktop .navigation-main li:first-of-type::before {
    content: '';
    padding-right: 0;
}

/* Nav Footer */
.mod_customnav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
    }
    li {
        margin-right: 0.5rem;
    }
    li::after {
        content: "|";
        margin-left: 0.5rem;
    }
    li:last-of-type::after {
        content: "";
    }
    a, strong {
        color: var(--color-bodyfont);
        text-decoration: none;
    }
}

/* Slider allgemein */
/* bei Events */
.swiper-wrapper.boxed {
    padding: 0 60px;
}

/* Events */

/* Home */
.events--home, .events--verein {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 60px;
}

.events--home .event {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
    background-color: var(--bgcolor-events);
    border-radius: var(--border-radius-default);
    padding: 1rem;
    .title__fix {
        color: var(--color-primary);
    }
    .date {
        color: var(--black);
        font-weight: 700;
        margin-bottom: 0;
    }
    h2 {
        color: var(--black);
        font-size: var(--font-size-default);
    }
}

/* Verein */
.events--verein .event {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    background-color: var(--bgcolor-events);
    border-radius: var(--border-radius-default);
    padding: 1rem;
    .date {
        color: var(--black);
        font-weight: 700;
        margin-bottom: 0;
        margin: 0;
    }
    .time, .location, .address {
        margin: 0;
    }
    h2 {
        color: var(--color-primary);
        font-size: var(--font-size-default);
        margin: 0;
    }
    .teasertext {
        margin-top: 0.5rem;
    }
}

/* Zukünftige Werderaner Gespräche */
.events--current {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 60px;
}

.events--current .event {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
    background-color: var(--white);
    border-radius: var(--border-radius-default);
    padding: 1rem;
    .title__fix {
        color: var(--color-primary);
    }
    .date {
        color: var(--black);
        font-weight: 700;
        margin-top: 0.5rem;
        margin-bottom: 0;
    }
    h2 {
        color: var(--black);
        font-size: var(--font-size-default);
    }
}

/* Ältere Werderaner Gespräche */
.events--older {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 60px;
}

.events--older .event {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 15px;
    background-color: transparent;
    border-radius: var(--border-radius-default);
    border: 1px solid var(--black);
    padding: 1rem;
    .date {
        color: var(--black);
        font-weight: 700;
        margin-bottom: 0;
    }
    h2 {
        color: var(--color-primary);
        font-size: var(--font-size-default);
    }
}

/* Werderaner Archiv */
.events--archiv {
    display: flex;
    gap: 30px;
    img {
        border: 1px solid var(--black);
    }
}

/* Downloads */

.content-downloads.in-row {
    ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 15px;
        &.ext-pdf::before {
            content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjY2MyNzJhIj48cGF0aCBkPSJNMTEuMzYzIDJjNC4xNTUgMCAyLjYzNyA2IDIuNjM3IDZzNi0xLjY1IDYgMi40NTd2MTEuNTQzaC0xNnYtMjBoNy4zNjN6bS44MjYtMmgtMTAuMTg5djI0aDIwdi0xNC4zODZjMC0yLjM5MS02LjY0OC05LjYxNC05LjgxMS05LjYxNHptNC44MTEgMTNoLTIuNjI4djMuNjg2aC45MDd2LTEuNDcyaDEuNDl2LS43MzJoLTEuNDl2LS42OThoMS43MjF2LS43ODR6bS00LjkgMGgtMS41OTl2My42ODZoMS41OTljLjUzNyAwIC45NjEtLjE4MSAxLjI2Mi0uNTM1LjU1NS0uNjU4LjU4Ny0yLjAzNC0uMDYyLTIuNjkyLS4yOTgtLjMtLjcxMi0uNDU5LTEuMi0uNDU5em0tLjY5Mi43ODNoLjQ5NmMuNDczIDAgLjgwMi4xNzMuOTE1LjY0NC4wNjQuMjY3LjA3Ny42NzktLjAyMS45NDgtLjEyOC4zNTEtLjM4MS41MjgtLjc1NC41MjhoLS42Mzd2LTIuMTJ6bS0yLjc0LS43ODNoLTEuNjY4djMuNjg2aC45MDd2LTEuMjc3aC43NjFjLjYxOSAwIDEuMDY0LS4yNzcgMS4yMjQtLjc2My4wOTUtLjI5MS4wOTUtLjU5NyAwLS44ODUtLjE2LS40ODQtLjYwNi0uNzYxLTEuMjI0LS43NjF6bS0uNzYxLjczMmguNTQ2Yy4yMzUgMCAuNDY3LjAyOC41NzYuMjI4LjA2Ny4xMjMuMDY3LjM2NiAwIC40ODktLjEwOS4xOTktLjM0MS4yMjctLjU3Ni4yMjdoLS41NDZ2LS45NDR6Ii8+PC9zdmc+')
        }
    }
    a {
        text-decoration: none;
        color: var(--color-bodyfont);
        &:hover {
            text-decoration: underline;
        }
    }  
}

/* RSCE */
/* Historical */
[class*="historical__text--"],
[class*="historical__image--"] {
    opacity: 0;
    height: 0;
    transition: all 0.3s ease;
    p {
        margin: 0;
    }
}

[class*="historical__text--"].visible,
[class*="historical__image--"].visible {
    height: auto;
    opacity: 1;
}

.historical-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.historical__texts {
    pointer-events: none;
    p {
        margin-bottom: 0;
    }
}

.historical__text-type {
    color: var(--color-primary);
}

.historical__previews {
    display: flex;
    gap: 15px;
}

@media (min-width: 992px) {
    .historical-grid {
        display: grid;
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 90px 1fr 90px;
    }

    .historical__headline {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .historical__texts {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .historical__previews {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .historical__images {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
    }

}

/* Text extended */

.text-ext__main {
    display: grid;
    gap: 30px 60px;
    grid-template-columns: 1fr;
}

.text-ext__first, .text-ext__second {
    a {
        color: var(--color-primary);
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    .text-ext__btn {
        color: var(--color-bodyfont);
    }
    ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    li {
        position: relative;
        padding-left: 2rem;
        &::before {
            content: '';
            background-image: url(/files/themes/heimatverein/media/Heimatverein_Haken.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: 1em;   /* beliebig anpassbar */
            height: 1em;
            position: absolute;
            left: 0;
            top: 0.15em; /* vertikale Feinjustierung */
        }
    }
}

@media (min-width: 992px) {
    .text-ext__main {
        grid-template-columns: repeat(2, 1fr);
    }
}

.with-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margin-small);
}

.image--single {
    min-width: 0;
}

.image--multiple {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Button */
.hw-button {
    margin-top: 1.5rem;
}

/* Bild-Links */
.img-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.img-link {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 30px;
    align-items: center;
    text-decoration: none;
}

.img-link__text {
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
}

/* Content Gallery */

.content-gallery--cols-4 ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Produktliste */
.product__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.product__text .product + .product {
    margin-top: 30px;
}

.txt-img .product__images, .txt-btn-img .product__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.txt-img .product__images .product, .txt-btn-img .product__images .product {
    min-width: 0;
}

.product__images img {
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
}

.order__button {
    margin-top: 1rem;
    padding: 1rem;
}

.gallery .product {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gallery .product .product__images {
    min-width: 0;
}

/* Formular */
label, input, textarea {
    display: block;
    width: 100%;
}

label {
    margin-bottom: 0.5rem;
}

input, textarea {
    padding: 0.5rem;
    font-size: 1.25rem;
}

.widget {
    margin-bottom: 1.5rem;
}

button.submit {
    appearance: none;
    border: none;
    display: inline-block;
    text-decoration: none;
    background-color: var(--bgcolor-events);
    padding: 1rem 2rem 1rem 1rem;
    color: var(--color-bodyfont);
}