/* Hospiz St. Martinus Alb-Donau – Stylesheet (nachgebaut nach hospiz-st-martinus.de) */

@font-face {
    font-family: "RotisSES";
    src: url("../fonts/RotisSES-Light.woff2") format("woff2"), url("../fonts/RotisSES-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "RotisSES";
    src: url("../fonts/RotisSES-Regular.woff2") format("woff2"), url("../fonts/RotisSES-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "RotisSES";
    src: url("../fonts/RotisSES-Bold.woff2") format("woff2"), url("../fonts/RotisSES-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}

:root {
    --blue: #002d72;
    --grey: #eeeeee;
    --text: #333333;
    --white: #ffffff;
    --container: 1170px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: "RotisSES", "Segoe UI", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--white);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 { line-height: 1.1; font-weight: 400; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.skip-link {
    position: absolute; left: 1rem; top: -10rem; z-index: 100;
    padding: 1rem 1.5rem; background: var(--white); color: var(--blue);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }

.top-30 { margin-top: 3rem; }

.btn {
    display: inline-block;
    padding: .6rem 1.6rem;
    border: 1px solid var(--blue);
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
    font-size: 1.6rem;
    transition: background .2s, color .2s;
}
.btn:hover, .btn:focus { background: var(--white); color: var(--blue); }

/* Header -------------------------------------------------------------- */

.header { background: var(--blue); height: 10rem; }
.header__inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo { max-height: 9.5rem; }
.logo--ses { max-width: 27rem; }

.navigation { background: var(--grey); min-height: 4rem; margin-bottom: 4rem; }
.navigation__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.navigation__menu a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--blue);
    text-decoration: none;
    font-size: 1.6rem;
}
.navigation__menu a:hover { text-decoration: underline; }

.navigation__toggle {
    display: none;
    margin: .8rem 0 .8rem auto;
    padding: .9rem 1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.navigation__bar {
    display: block; width: 22px; height: 2px; border-radius: 1px;
    background: var(--blue);
}
.navigation__bar + .navigation__bar { margin-top: 4px; }

/* Slider -------------------------------------------------------------- */

.slider { position: relative; overflow: hidden; }
.slider__track { display: grid; }
.slider__item {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transition: opacity .6s ease;
}
.slider__item.is-active { opacity: 1; }
.slider__item img { width: 100%; height: auto; }

.slider__control {
    position: absolute; top: 0; bottom: 0; width: 15%;
    border: 0; cursor: pointer;
    color: var(--white); font-size: 6rem; line-height: 1;
    opacity: .5; transition: opacity .2s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.slider__control:hover, .slider__control:focus-visible { opacity: .9; }
.slider__control--prev { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .5), transparent); }
.slider__control--next { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .5), transparent); }

/* About --------------------------------------------------------------- */

.about {
    max-width: 50%;
    margin: 4rem auto 0;
    text-align: center;
}
.about__kicker {
    font-size: 2.4rem;
    text-transform: uppercase;
    color: var(--blue);
    margin: 2rem 0 1rem;
}
.about__title {
    font-size: 5rem;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 4rem;
}
.about__text { font-weight: 300; font-style: normal; margin: 0 0 1rem; }
.about__phone { font-weight: 700; font-size: 1.8rem; text-decoration: none; }

/* Eindruck ------------------------------------------------------------ */

.impression { background: var(--grey); margin-top: 3rem; }
.impression .container { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.impression__hero {
    position: relative;
    min-height: 35rem;
    margin-bottom: 5rem;
    background: url("../img/eindruck.jpg") center / cover no-repeat;
}
.impression__title {
    position: absolute; left: 4rem; bottom: 4rem; margin: 0;
    font-size: 4rem; font-weight: 700; text-transform: uppercase;
    color: var(--white);
    text-shadow: #000 2px 8px 15px;
}
.impression__text {
    column-count: 2;
    column-gap: 4rem;
    text-align: justify;
}
.impression__text p { margin: 0 0 1rem; break-inside: avoid; }

.video {
    position: relative;
    margin-top: 2.5rem;
    aspect-ratio: 16 / 9;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Spenden ------------------------------------------------------------- */

.donation { padding: 5.5rem 0; }
.donation__title {
    margin: 0 0 5rem;
    font-size: 2.4rem; font-weight: 700;
    text-transform: uppercase; text-align: center;
    color: var(--blue);
}
.donation__title span { font-size: 5rem; }
.donation__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.donation__text { text-align: justify; }
.donation__list { margin: 0; padding-left: 2rem; }
.donation__account { margin: 2rem 0; }
.donation__iban { white-space: nowrap; }
.donation__cta { text-align: center; margin-top: 3rem; }

/* Onlinespende -------------------------------------------------------- */

.spenden__image { width: 100%; margin-bottom: 3rem; }
.spenden__form { margin-bottom: 5rem; }

/* Footer -------------------------------------------------------------- */

.footer { background: var(--blue); color: var(--white); }
.footer__title {
    margin: 0;
    padding-top: 5rem;
    font-size: 3.6rem;
    text-transform: uppercase;
    text-align: center;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
    padding-bottom: 8rem;
}
.footer__col { text-align: justify; }
.footer__logo { max-height: 7rem; max-width: 22rem; margin: 7rem 0 2.5rem auto; }
.footer__col a { color: var(--white); }

.footer__links { background: var(--grey); min-height: 6.5rem; display: flex; align-items: center; }
.footer__links ul {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 3rem;
}
.footer__links a { color: var(--blue); text-decoration: underline; }

/* Responsive ---------------------------------------------------------- */

@media (max-width: 990px) {
    .about { max-width: 80%; }
    .about__kicker { font-size: 1.8rem; }
    .about__title { font-size: 3rem; }
    .impression__text { column-count: 1; }
    .impression__title { font-size: 3rem; left: 2rem; bottom: 2rem; }
    .donation__grid, .footer__grid { grid-template-columns: 1fr; gap: 0; }
    .footer__grid { padding-bottom: 4rem; }
    .navigation__menu a { font-size: 1.4rem; padding: 1rem; }
}

@media (max-width: 767px) {
    .about { max-width: 96%; }
    .navigation__toggle { display: block; }
    .navigation__menu { display: none; flex-direction: column; padding-bottom: 1rem; }
    .navigation__menu.is-open { display: flex; }
    .donation__title span { font-size: 3.6rem; }
}

@media (max-width: 560px) {
    .logo { max-height: 8rem; }
    .impression__hero { min-height: 22rem; }
}

@media (max-width: 375px) {
    .header { height: 7rem; }
    .logo { max-height: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .slider__item { transition: none; }
}