/* Kontext · Ziel (2 Spalten) + Umsetzung (einspaltig) — Karten wie .about-card */
:root {
    --case-kzu-card-radius: 12px;
    --case-kzu-card-pad-y: 24px;
    --case-kzu-card-pad-x: 22px;
    --case-kzu-card-shadow: 0 2px 12px rgba(19, 28, 36, 0.04);
    --case-kzu-card-border: 1px solid rgba(42, 42, 42, 0.08);
}

.case-kzu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 40px;
    align-items: stretch;
}

/* Karten analog .about-card (index.html) */
.case-kzu-col {
    min-width: 0;
    background: var(--card-bg, #ffffff);
    border: var(--case-kzu-card-border);
    border-radius: var(--case-kzu-card-radius);
    padding: var(--case-kzu-card-pad-y) var(--case-kzu-card-pad-x);
    box-shadow: var(--case-kzu-card-shadow);
}

.case-kzu-col h2 {
    font-size: var(--section-heading-size, clamp(20px, 2.35vw, 26px));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--text, #2a2a2a);
}

.case-kzu-col p {
    font-size: var(--body-text-size, 18px);
    line-height: var(--body-line-height, 1.65);
    color: var(--muted, #2a2a2a);
    margin: 0;
}

/* Projekt-Unterseiten (.project-page): eine rote Linie wie .project-page-header */
.project-page > .case-kzu {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 28px;
    padding-left: var(--accent-bar-pad, 13px);
    border-left: var(--accent-bar, 3px solid #f56e61);
    box-sizing: border-box;
}

/* Rich-Media Cases (.case-wrap): Hauptspalte mit Akzentlinie */
.case-wrap {
    --card-bg: #ffffff;
    --accent-bar-pad: 13px;
    --accent-bar: 3px solid var(--accent, #f56e61);
}

/* Sticky wie Projektseiten (ohne separate Nav-Leiste) */
.case-wrap .case-back {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 990;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: 12px 0 14px;
    background: var(--bg, #f4f4f2);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text, #2a2a2a);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s, color 0.2s;
    box-shadow: 0 1px 0 rgba(42, 42, 42, 0.06);
}

.case-wrap .case-back:hover {
    opacity: 1;
    color: var(--accent, #f56e61);
}

.case-wrap-main {
    padding-left: 0;
    border-left: none;
    box-sizing: border-box;
}

/* Durchgehende rote Linie nur für Intro + Kontext/Ziel (nicht Live-Vorschau / Darstellung) */
.case-wrap-accent {
    padding-left: var(--accent-bar-pad);
    border-left: var(--accent-bar);
    box-sizing: border-box;
}

/* Live-Vorschau / Darstellung: gleiche Texteinrückung wie .case-wrap-accent, ohne Akzentlinie */
.case-wrap-main > .case-section.case-banner-section,
.case-wrap-main > .case-section:has(.case-gallery) {
    padding-left: calc(var(--accent-bar-pad) + 3px);
    border-left: none;
    box-sizing: border-box;
}

/* Abstand vor Live-Vorschau / Darstellung (Inhalt liegt in .case-wrap-main) */
.case-wrap .case-kzu {
    margin-bottom: 32px;
}

.case-kzu--kz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Nur noch eine Karte (z. B. nur Kontext) */
.case-kzu--single {
    grid-template-columns: 1fr;
}

/* Lead-Text wie Ziel: 60 % Breite der Accent-Spalte */
.case-wrap-accent .case-lead {
    width: 60%;
    max-width: 80%;
    min-width: 0;
    box-sizing: border-box;
}

/* Ziel als Fließtext innerhalb .case-wrap-accent (eine gemeinsame Akzentlinie) */
.case-wrap-accent .case-section.case-ziel {
    margin-top: 24px;
    margin-bottom: 0;
    width: 60%;
    max-width: 80%;
    min-width: 0;
}

/* Fließtext-Abschnitte in .case-wrap (u. a. Ziel in Accent, Umsetzung, Darstellung) */
.case-wrap-main .case-section h2 {
    font-size: var(--section-heading-size, clamp(20px, 2.35vw, 26px));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-transform: none;
    color: var(--text, #2a2a2a);
    margin-bottom: 10px;
}

.case-wrap-main .case-section p,
.case-wrap-main .case-section li {
    font-size: var(--body-text-size, 18px);
    line-height: var(--body-line-height, 1.65);
    color: var(--text, #2a2a2a);
}

.case-wrap-main .case-section p {
    margin-bottom: 10px;
}

.case-wrap-main > .case-section.case-umsetzung {
    margin-top: 40px;
    margin-bottom: 0;
    padding-left: var(--accent-bar-pad);
    border-left: var(--accent-bar);
    box-sizing: border-box;
    width: 60%;
    max-width: 80%;
    min-width: 0;
}

@media (max-width: 900px) {
    .case-kzu {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .case-kzu--kz {
        grid-template-columns: 1fr;
    }
}

/* Live-Vorschau (Rich-Media in .case-wrap): Überschrift, Banner-Paar, Hinweis — zentriert */
.case-banner-section > h2 {
    text-align: center;
    width: 100%;
}

.case-banner-section .case-banner-dual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 24px 28px;
    width: 100%;
}

.case-banner-section .case-banner-col--leaderboard {
    flex: 1 1 320px;
    max-width: 970px;
    min-width: 0;
}

.case-banner-section .case-banner-col--skyscraper {
    flex: 0 0 auto;
}

.case-section.case-banner-section .case-banner-hint {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
}

.case-banner-section .case-cptr-shell {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .case-wrap-accent .case-lead,
    .case-wrap-accent .case-section.case-ziel,
    .case-wrap-main > .case-section.case-umsetzung,
    .case-section.case-banner-section .case-banner-hint {
        width: 100%;
        max-width: 100%;
    }

    .case-banner-section .case-banner-dual {
        flex-direction: column;
        align-items: center;
    }
}

/* Zurück-Link: dezentes Pulsieren nur über Opacity (kein Farbrand, transform bricht sticky) */
@keyframes back-link-pulse {
    0%, 100% {
        opacity: 0.78;
    }
    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .case-back.back-pulse,
    .project-back.back-pulse {
        animation: back-link-pulse 2.25s ease-in-out infinite;
    }
}

/* Footer wie Startseite */
footer {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 48px var(--content-pad-x, 36px) 40px;
    text-align: center;
    background: var(--bg-band, #e7ebf0);
}

.footer-contact {
    max-width: 560px;
    margin: 0 auto;
}

.footer-contact-heading {
    font-size: var(--section-heading-size, clamp(20px, 2.35vw, 26px));
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text, #2a2a2a);
    margin-bottom: 10px;
}

.footer-contact-lead {
    font-size: var(--body-text-size, 18px);
    font-weight: 400;
    line-height: var(--body-line-height, 1.65);
    color: var(--text, #2a2a2a);
    margin-bottom: 20px;
}

.contact-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

footer .contact-links {
    justify-content: center;
    margin-bottom: 24px;
}

.contact-links a {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--text, #2a2a2a);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.contact-links a:hover {
    border-bottom-color: var(--accent, #f56e61);
    color: var(--accent, #f56e61);
}

.footer-text {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--muted, #2a2a2a);
}

/* Nach oben — gleiche Optik wie Startseite; in case-kzu damit auch reine case-kzu-Unterseiten den Pfeil sehen */
.scroll-to-top-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 48px var(--content-pad-x, 36px) 40px;
    background: var(--bg, #f4f4f2);
}
.scroll-to-top {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--text, #2a2a2a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #f4f4f2);
    color: var(--text, #2a2a2a);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.scroll-to-top:hover {
    opacity: 0.85;
    transform: scale(1.1);
}
.scroll-to-top::after {
    content: '↑';
    font-size: 16px;
    line-height: 1;
    animation: scrollBounceUp 2s infinite;
}
@keyframes scrollBounceUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.scroll-to-top:focus-visible {
    outline: 2px solid var(--accent, #f56e61);
    outline-offset: 4px;
    border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-to-top::after { animation: none; }
}

@media (max-width: 768px) {
    .footer-contact {
        max-width: 100%;
        width: 100%;
    }

    footer {
        padding: 40px max(var(--page-gutter-x, calc(20px + clamp(10px, 5.2vw, 24px))), env(safe-area-inset-left, 0px)) 32px
            max(var(--page-gutter-x, calc(20px + clamp(10px, 5.2vw, 24px))), env(safe-area-inset-right, 0px));
    }

    .scroll-to-top-wrap {
        padding: 40px max(var(--page-gutter-x, calc(20px + clamp(10px, 5.2vw, 24px))), env(safe-area-inset-left, 0px)) 32px
            max(var(--page-gutter-x, calc(20px + clamp(10px, 5.2vw, 24px))), env(safe-area-inset-right, 0px));
    }
}