/* =====================================================================
   BAUKASTEN - Grav Theme
   Alles Projektspezifische läuft über die Design-Tokens in :root.
   Für eine neue Site: Tokens in custom.css überschreiben, fertig.
   ===================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root {
    /* Typografie */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Karla', 'Segoe UI', sans-serif;
    --text-base: 1.0625rem;
    --leading: 1.65;

    /* Farben */
    --color-bg: #faf7f2;
    --color-surface: #ffffff;
    --color-surface-alt: #f1ebe1;
    --color-ink: #23201c;
    --color-muted: #6d675e;
    --color-accent: #b4552d;
    --color-accent-hover: #97431f;
    --color-accent-ink: #ffffff;
    --color-dark: #23201c;
    --color-dark-ink: #faf7f2;
    --color-line: #e2dbce;

    /* Layout */
    --container: 72rem;
    --container-narrow: 46rem;
    --container-wide: 86rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(3.5rem, 9vw, 7rem);

    /* Details */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 12px 32px -12px rgba(35, 32, 28, 0.18);
    --transition: 200ms ease;

    /* Header */
    --header-height: 4.5rem;
}

/* ---------- 2. Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anker-Sprünge landen nicht unter dem Sticky-Header */
[id] { scroll-margin-top: calc(var(--header-height) + 1.25rem); }
/* Bei Sticky-Headern liefert bereits scroll-padding-top (unten) den exakten Versatz -
   scroll-margin und scroll-padding ADDIEREN sich, sonst klafft unter dem Header ein
   Balken der vorigen Sektion in Höhe von --header-height + 1.25rem (gemessen 92px,
   neufrisch/berndt 2026-08-24). Deshalb hier neutralisieren. */
html:has(> body.has-sticky-header) [id] { scroll-margin-top: 0; }

/* Anker-Ziele nicht unter dem Sticky-Header landen. scroll-padding wirkt am
   Scroll-Container (html), deshalb muss dort auch die Header-Höhe bekannt sein. */
html:has(> body.header--minimal) { --header-height: 3.4rem; }
/* Exakt die Header-Höhe, ohne Zuschlag: Sektionen bringen eigenes Innenabstand mit, und
   ein Zuschlag gäbe dekorative Überhänge der vorigen Sektion frei (bei fitmitjasmin ragte
   das Laufband der Hero 30px in die Lücke). theme.js verfeinert den Wert auf die real
   gemessene Höhe, das hier ist der Fallback ohne JavaScript. */
html:has(> body.has-sticky-header) { scroll-padding-top: var(--header-height); }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--color-ink);
    color: var(--color-bg);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- 3. Layout-Container ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-surface-alt); }
.section--dark { background: var(--color-dark); color: var(--color-dark-ink); }
.section--dark .section-head__title,
.section--dark h2, .section--dark h3 { color: inherit; }
.section__intro { margin-bottom: 2.5rem; max-width: var(--container-narrow); }

/* ---------- 4. Header ---------- */
.site-header {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-line);
    z-index: 100;
}
.has-sticky-header .site-header { position: sticky; top: 0; }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-height);
}

.site-header--minimal { --header-height: 3.4rem; }
.site-header--minimal .logo__text { font-size: 1.1rem; }

.site-header--centered .site-header__inner {
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.9rem 0.5rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-ink);
}
.logo img { max-height: 2.6rem; width: auto; }
.logo__text {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Navigation */
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__item { position: relative; }
.nav__link {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-ink);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.nav__link.is-active { color: var(--color-accent); }

/* Dropdown (eine Ebene) */
.nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav__item--has-children:hover .nav__sub,
.nav__item--has-children:focus-within .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__sublink {
    display: block;
    padding: 0.5rem 0.8rem;
    text-decoration: none;
    color: var(--color-ink);
    border-radius: var(--radius-sm);
}
.nav__sublink:hover { background: var(--color-surface-alt); }
.nav__sublink.is-active { color: var(--color-accent); }

/* Burger */
.nav-toggle {
    display: none;
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1.2rem;
    height: 2px;
    background: var(--color-ink);
    transform: translateX(-50%);
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bar { top: 50%; margin-top: -1px; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 800px) {
    .nav-toggle { display: block; }
    .site-header--centered .site-header__inner { flex-direction: row; padding-block: 0; }
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem var(--gutter) 1.25rem;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-line);
        box-shadow: var(--shadow);
    }
    .nav.is-open { display: flex; }
    .site-header { position: relative; }
    .has-sticky-header .site-header { position: sticky; }
    .nav__list { flex-direction: column; align-items: stretch; }
    .nav__sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding-left: 1rem;
    }
    .nav__cta { margin-top: 0.75rem; }
}

/* ---------- 5. Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
}
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn--ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: currentColor;
}
.btn--ghost:hover { color: var(--color-accent); }
.section--dark .btn--ghost, .cta--dark .btn--ghost, .hero--image .btn--ghost { color: var(--color-dark-ink); }
.hero--image .btn--ghost:hover { color: var(--color-accent); }
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* ---------- 6. Sektions-Kopf / Eyebrow ---------- */
.eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.section-head { margin-bottom: 2.25rem; max-width: var(--container-narrow); }
.section-head__title { margin-bottom: 0; }

/* ---------- 7. Hero ---------- */
.hero {
    position: relative;
    padding-block: clamp(4.5rem, 12vw, 9rem);
    overflow: hidden;
}
.hero__title { margin-bottom: 0.4em; }
.hero__lead {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    color: var(--color-muted);
    max-width: 38rem;
}
.hero__lead p { margin-top: 0; }
.hero--center { text-align: center; }
.hero--center .hero__lead { margin-inline: auto; }
.hero--center .btn-group { justify-content: center; }

/* align: right - Inhalt fluchtet an der RECHTEN Container-Kante (nie am Viewport
   ausrichten, sonst bricht die Flucht zu Header/Nav bei breiten Fenstern).
   Muster aus fz-luebeck uebernommen, mobil faellt es auf linksbuendig zurueck. */
.hero--right .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.hero--right .hero__lead { text-align: right; }
.hero--right .btn-group { justify-content: flex-end; }
@media (max-width: 48rem) {
    .hero--right .hero__inner { align-items: flex-start; text-align: left; }
    .hero--right .hero__lead { text-align: left; }
    .hero--right .btn-group { justify-content: flex-start; }
}

.hero--image { color: #fff; }
.hero--image .hero__lead { color: rgba(255, 255, 255, 0.85); }
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 18, 16, 0.55), rgba(20, 18, 16, 0.75));
}

/* ---------- 8. Media-Text ---------- */
.media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.media-text--right .media-text__media { order: 2; }
.media-text__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.figure { margin: 0; }
.figure figcaption,
.gallery__item figcaption {
    margin-top: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-muted);
}
@media (max-width: 800px) {
    .media-text { grid-template-columns: 1fr; }
    .media-text--right .media-text__media { order: 0; }
}

/* ---------- 9. Features ---------- */
.features {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}
.features--2 { grid-template-columns: repeat(2, 1fr); }
.features--4 { grid-template-columns: repeat(4, 1fr); }
.feature {
    padding: 1.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.section--dark .feature { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.feature__icon { display: block; font-size: 1.8rem; margin-bottom: 0.75rem; }
.feature__title { margin-bottom: 0.4em; }
.feature__title a { color: inherit; text-decoration: none; }
.feature__title a:hover { color: var(--color-accent); }
.feature__text { margin: 0; color: var(--color-muted); }
.section--dark .feature__text { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 900px) {
    .features, .features--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .features, .features--2, .features--4 { grid-template-columns: 1fr; }
}

/* ---------- 10. Galerie ---------- */
.gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
.gallery__item { margin: 0; }
.gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
@media (max-width: 800px) {
    .gallery, .gallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .gallery, .gallery--2, .gallery--4 { grid-template-columns: 1fr; }
}

/* ---------- 11. Zitate ---------- */
.quotes--grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.quote {
    margin: 0;
    padding: 2rem;
    background: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
}
.quote__text {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.45;
}
.quote__text::before { content: '\201E'; }
.quote__text::after { content: '\201C'; }
.quote__meta { font-size: 0.92rem; color: var(--color-muted); }
.quote__author { font-style: normal; font-weight: 700; color: var(--color-ink); }
.quote__role::before { content: ' \00B7 '; }

/* ---------- 12. FAQ (Akkordeon) ---------- */
.faq { border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__question {
    padding: 1.1rem 2.5rem 1.1rem 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-accent);
    transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: translateY(-50%) rotate(45deg); }
.faq__answer { padding: 0 0 1.25rem; }
.faq__answer > :first-child { margin-top: 0; }

/* ---------- 13. Call-to-Action ---------- */
.cta { text-align: center; }
.cta--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.cta--accent .cta__title { color: inherit; }
.cta--accent .btn--primary { background: var(--color-accent-ink); color: var(--color-accent); }
.cta--accent .btn--ghost { color: var(--color-accent-ink); }
.cta--dark { background: var(--color-dark); color: var(--color-dark-ink); }
.cta--dark .cta__title { color: inherit; }
.cta--soft { background: var(--color-surface-alt); }
.cta__text { max-width: 34rem; margin-inline: auto; opacity: 0.9; }
.cta__inner .btn-group { justify-content: center; }

/* ---------- 14. Footer ---------- */
.site-footer {
    margin-top: auto;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-line);
    font-size: 0.95rem;
}
.site-footer a { color: var(--color-ink); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }

.site-footer__grid {
    display: grid;
    /* Neben repeat(auto-fit, ...) sind nur Spuren mit fester Mindestgroesse erlaubt -
       ein nacktes 2fr macht die ganze Deklaration ungueltig, der Browser verwirft sie
       und der Footer stapelte auf dem Desktop einspaltig. minmax(16rem, 1.7fr) ist
       die gueltige Form: feste Untergrenze, flexibel nach oben. */
    grid-template-columns: minmax(16rem, 1.7fr) repeat(auto-fit, minmax(9rem, 1fr));
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.site-footer__brand .logo { margin-bottom: 0.75rem; }
.site-footer__text { color: var(--color-muted); max-width: 22rem; }
.site-footer__heading {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.9rem;
}

.site-footer--centered { text-align: center; }
.site-footer--centered .site-footer__text { margin-inline: auto; }
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 !important;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
}
.site-footer--centered .site-footer__bottom,
.site-footer--minimal .site-footer__bottom { justify-content: center; }
.site-footer--minimal { padding-block: 1.5rem; }
.site-footer--minimal .site-footer__bottom { border-top: 0; padding-top: 0; }
.site-footer__copy { margin: 0; }
.site-footer__legal { display: flex; gap: 1.25rem; }
.site-footer__legal li { margin: 0; }

@media (max-width: 800px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- 15. Modal ---------- */
.modal {
    width: min(34rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--color-surface);
    color: var(--color-ink);
}
.modal::backdrop { background: rgba(20, 18, 16, 0.55); backdrop-filter: blur(2px); }
.modal__inner { padding: 2rem; position: relative; }
.modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.4rem;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-alt);
    color: var(--color-ink);
    cursor: pointer;
}
.modal__close:hover { background: var(--color-line); }
.modal__title { margin-bottom: 0.75rem; padding-right: 2rem; }
.modal__body > :last-child { margin-bottom: 0; }

/* ---------- 16. Message of the Day ---------- */
.modal--motd { width: min(56rem, calc(100vw - 2rem)); }
.modal--motd .modal__inner { padding: clamp(1.5rem, 4vw, 2.75rem); }

/* Ohne Bild: schmal und einspaltig statt halbleerer Bildspalte */
.modal--motd-text { width: min(38rem, calc(100vw - 2rem)); }
.modal--motd-text .motd { grid-template-columns: 1fr; }

.motd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: center;
}
.motd__body > :last-child { margin-bottom: 0; }
.motd__media img {
    width: 100%;
    max-height: 20rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

@media (max-width: 700px) {
    .motd { grid-template-columns: 1fr; }
    .motd__media { order: -1; }
    .motd__media img { max-height: 11rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .modal--motd[open] { animation: motd-in 320ms ease both; }
    @keyframes motd-in {
        from { opacity: 0; transform: translateY(14px) scale(0.98); }
    }
}

/* ---------- 17. Prose (Fließtext aus Markdown) ---------- */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { margin-block: 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.35em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose img { border-radius: var(--radius); }
.prose blockquote {
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1.25em;
    border-left: 4px solid var(--color-accent);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1em;
    color: var(--color-muted);
}
.prose hr {
    margin: 2.5em 0;
    border: 0;
    border-top: 1px solid var(--color-line);
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1.5em;
    font-size: 0.95em;
}
.prose th, .prose td {
    padding: 0.6em 0.8em;
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}
.prose th {
    font-weight: 700;
    border-bottom-width: 2px;
}
.prose code {
    padding: 0.15em 0.4em;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}
.prose pre {
    padding: 1.25rem;
    background: var(--color-dark);
    color: var(--color-dark-ink);
    border-radius: var(--radius);
    overflow-x: auto;
}
.prose pre code { background: transparent; padding: 0; }

/* ---------- 18. Scroll-Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 550ms ease, transform 550ms ease;
    }
    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}