/*
Theme Name:        SLA Overlay Theme
Theme URI:         https://stadtlabor-architekten.com
Description:       Erweiterung des Stadt : Labor – Architekten Themes: Projekte öffnen sich als Slide-in-Overlay über der aktuellen Seite (× zum Schließen, Pfeile links/rechts zum Navigieren, Tastatur-Support: Esc + ← →). Direkt-Aufrufe von /project/* funktionieren weiterhin als normale Seite (teilbare URLs).
Author:            Stadt : Labor – Architekten
Author URI:        https://stadtlabor-architekten.com
Version: 1.7.3
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       sla-overlay-theme
Tags:              portfolio, architecture, modern, minimalist, overlay
*/

/* ====================================================================
   Stadt : Labor Modern · Eigenständiges Theme
   Alle Farben & Layout-Tokens sind unten in :root definiert.
   ==================================================================== */

/* --- Font: CIRCULAR_SLA (wie Semplice) --- */
@font-face {
    font-family: 'CIRCULAR_SLA';
    src: url('https://stadtlabor-architekten.com/wp-content/uploads/2023/06/CIRCULAR_SLA.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* 1. DESIGN-TOKENS */
:root {
    --sl-charcoal: #36454F;
    --sl-slate:    #708090;
    --sl-light:    #D3D3D3;
    --sl-off:      #FAFAFA;
    --sl-paper:    #FFFFFF;
    --sl-ink:      #1A1F23;
    --sl-font:     'CIRCULAR_SLA', sans-serif;
    --sl-maxw:     1320px;
    --sl-gap:      24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
}
body {
    background: var(--sl-off);
    color: var(--sl-charcoal);
    font-family: var(--sl-font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sl-font);
    font-weight: 600;
    color: var(--sl-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--sl-charcoal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
a:hover, a:focus-visible {
    border-bottom-color: var(--sl-charcoal);
    color: var(--sl-ink);
}
a:focus-visible {
    outline: 2px solid var(--sl-slate);
    outline-offset: 4px;
}


/* ============================================================
   GRID-SPALTEN — Mobile-First, sehr defensiv, immer am Anfang.
   Aus User-Feedback: weniger Thumbnails auf kleinen Bildschirmen.
   ============================================================ */
@media (max-width: 1280px) {
    body .grid,
    body .team-grid,
    body .journal-grid,
    body .pillars {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 760px) {
    body .grid,
    body .team-grid,
    body .journal-grid,
    body .pillars,
    body .gallery {
        grid-template-columns: 1fr !important;
    }
    /* Stats bleiben immer in einer Zeile mit 4 Spalten */
    body .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 20px 14px !important;
    }
    body .stat { border-right: 1px solid var(--sl-light); border-bottom: none; padding: 8px 4px; }
    body .stat:last-child { border-right: none; }
}
@media (max-width: 480px) {
    /* Sicherheitsnetz für iPhone-Breiten */
    body .grid,
    body .team-grid,
    body .journal-grid,
    body .pillars,
    body .gallery {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* 2. HEADER ======================================================= */
.site-header {
    --hdr-fg: var(--sl-ink);            /* gemeinsame Farbe für Logo + Burger + Links */
    --hdr-bg: transparent;
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--hdr-bg);
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled {
    --hdr-fg: var(--sl-ink);
    --hdr-bg: rgba(250,250,250,.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--sl-light);
}
/* Auf Cover-Seiten: weiß, bis gescrollt wird */
body.has-cover .site-header:not(.is-scrolled) { --hdr-fg: #fff; }
.nav {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
}
.logo {
    font-family: var(--sl-font);
    font-weight: 700;
    font-size: clamp(18px, 1.4vw, 22px);
    letter-spacing: -0.01em;
    color: var(--hdr-fg);
}
.logo a { color: inherit; border-bottom: none; }
.logo span { color: var(--hdr-fg); opacity: 0.7; }
nav.main { }
nav.main ul { list-style: none; display: flex; gap: clamp(14px, 1.6vw, 28px); flex-wrap: wrap; align-items: center; }
nav.main a {
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 500;
    color: var(--hdr-fg);
    white-space: nowrap;
    padding: 6px 0;
}
nav.main a.active,
nav.main .current-menu-item > a,
nav.main .current_page_item > a,
nav.main .current-menu-ancestor > a,
nav.main a[aria-current="page"] {
    border-bottom-color: currentColor;
}

/* Cover-Hero: dezenter dunkler Gradient hinter dem Header für maximale Lesbarkeit. 
   Nur sichtbar über Bildern, optisch unauffällig auf hellen Seiten. */
body.has-cover .site-header:not(.is-scrolled)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 100%);
    z-index: -1;
}
body.has-cover .site-header:not(.is-scrolled) {
    /* Header braucht position für das ::before-Overlay */
    overflow: visible;
}

/* Stärkere Text-Shadows für Logo, Nav und Burger über Bildern */
body.has-cover .site-header:not(.is-scrolled) .logo,
body.has-cover .site-header:not(.is-scrolled) nav.main a {
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35);
    font-weight: 600;
}
body.has-cover .site-header:not(.is-scrolled) .burger span {
    box-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* Damit Inhalte ohne Cover nicht hinter dem fixierten Header verschwinden */
body:not(.has-cover) main.site-main { padding-top: 76px; }

/* Mobile Burger – immer rechts ausgerichtet, gleiche Farbe wie das Logo */
.burger {
    display: none;
    background: none;
    border: 0;
    width: 40px; height: 40px;
    cursor: pointer;
    color: var(--hdr-fg);
    padding: 8px;
    margin-left: auto;     /* schiebt den Burger ganz nach rechts */
    order: 99;             /* falls flex-order von außen kommt */
}
.burger span {
    display: block; height: 2px; background: var(--hdr-fg); margin: 5px 0; transition: transform .25s;
    border-radius: 1px;
}

/* 3. HERO (Front-Page Cover) ====================================== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background-size: cover;
    background-position: center;
    background-color: #2a2f33;
    color: #fff;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Slideshow-Layer: liegen übereinander und werden per JS ein-/ausgeblendet */
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 1.6s ease, transform 8s ease-out;
    z-index: 0;
}
.hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}
.hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 100%);
    pointer-events: none;
    z-index: 1;
}
.hero-inner {
    position: relative; z-index: 2;
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 0 32px 80px; width: 100%;
}
.hero-eyebrow {
    text-transform: uppercase;
    font-size: 12px; letter-spacing: 0.18em;
    color: rgba(255,255,255,.8);
    margin-bottom: 18px; font-weight: 500;
}
.hero h1 {
    color: #fff;
    font-size: clamp(40px, 6vw, 84px);
    max-width: 18ch;
    margin-bottom: 28px;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    background: rgba(255,255,255,.95); color: var(--sl-ink);
    border-radius: 2px;
    font-family: var(--sl-font);
    font-weight: 600; font-size: 15px;
    border-bottom: none;
    transition: transform .2s, background .2s;
}
.hero-cta::after { content: '→'; font-size: 18px; }
.hero-cta:hover { background: #fff; transform: translateY(-1px); border-bottom: none; color: var(--sl-ink); }

/* Page-Hero (für Seiten ohne Cover) */
.page-hero {
    padding: 140px 32px 40px;
    max-width: var(--sl-maxw); margin: 0 auto;
}
.page-hero .eyebrow {
    text-transform: uppercase;
    font-size: 12px; letter-spacing: 0.18em;
    color: var(--sl-slate);
    font-weight: 500; margin-bottom: 14px;
}
.page-hero h1 {
    font-size: clamp(36px, 4.5vw, 64px);
    max-width: 18ch; margin-bottom: 18px;
}
.page-hero p.lede {
    font-size: clamp(18px, 1.5vw, 22px);
    color: var(--sl-charcoal); max-width: 62ch;
}

/* 4. STATS ======================================================= */
.stats {
    background: var(--sl-paper);
    border-bottom: 1px solid var(--sl-light);
}
.stats-grid {
    max-width: var(--sl-maxw); margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 56px 32px;
}
.stat {
    text-align: center; padding: 0 24px;
    border-right: 1px solid var(--sl-light);
}
.stat:last-child { border-right: none; }
.stat-num {
    font-weight: 600;
    font-size: clamp(40px, 4vw, 56px);
    color: var(--sl-ink); letter-spacing: -0.03em;
}
.stat-label {
    text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 12px; color: var(--sl-slate);
    margin-top: 6px; font-weight: 500;
}

/* 5. INTRO ======================================================= */
.intro {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 120px 32px;
    display: grid; grid-template-columns: 1fr 2fr; gap: 80px;
    align-items: start;
}
.intro .eyebrow {
    text-transform: uppercase;
    font-size: 12px; letter-spacing: 0.18em;
    color: var(--sl-slate); font-weight: 500;
}
.intro-text {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.45;
    color: var(--sl-ink); font-weight: 400;
}
.intro-text em {
    font-style: normal;
    color: var(--sl-slate);
    border-bottom: 1px solid var(--sl-light);
    padding-bottom: 1px;
}
.intro-more {
    margin-top: 28px;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: var(--sl-charcoal);
    border-bottom: 1px solid var(--sl-charcoal);
}

/* 6. SECTIONS / HEADS ============================================ */
.section-head {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 0 32px 32px;
    display: flex; align-items: end; justify-content: space-between;
    border-bottom: 1px solid var(--sl-light);
    margin-bottom: 48px;
    gap: 24px; flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(28px, 3vw, 40px); }
.section-head .meta {
    font-size: 13px; color: var(--sl-slate);
    text-transform: uppercase; letter-spacing: .14em;
}

/* 7. FILTER CHIPS ================================================ */
.filter-bar {
    max-width: var(--sl-maxw); margin: 0 auto 32px;
    padding: 0 32px;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.chip {
    padding: 8px 14px;
    border: 1px solid var(--sl-light);
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    color: var(--sl-charcoal); background: transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.chip:hover { border-color: var(--sl-charcoal); }
.chip.active { background: var(--sl-ink); color: #fff; border-color: var(--sl-ink); }

/* 8. PROJECT GRID ================================================ */
.grid-wrap {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 0 32px 100px;
}
.grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sl-gap);
}
.card {
    display: block; position: relative; overflow: hidden;
    background: var(--sl-light);
    aspect-ratio: 3 / 2;
    border-bottom: none;
}
.card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover img { transform: scale(1.04); }
.card .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 42%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.24) 100%);
    pointer-events: none;
    transition: background .25s ease;
}
.card:hover .scrim,
.card:focus-visible .scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 38%, rgba(0,0,0,.16) 70%, rgba(0,0,0,.34) 100%);
}
.card .meta {
    position: absolute; left: 22px; right: 22px; bottom: 18px;
    color: #fff; z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35);
}
.card .meta h3 {
    font-size: 20px; color: #fff; font-weight: 600;
    letter-spacing: -0.01em; margin-bottom: 4px;
}
.card .meta-line {
    font-size: 13px; color: rgba(255,255,255,.85);
    text-transform: uppercase; letter-spacing: 0.12em;
}
.card .meta-line span + span::before { content: ' · '; }

/* 9. PROJECT DETAIL ============================================== */
.project-hero {
    position: relative; height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh;
    background-size: cover; background-position: center;
    background-color: var(--sl-light);
}
.project-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}
.project-hero-inner {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 0; padding: 0 32px 56px;
    color: #fff; z-index: 1;
    max-width: var(--sl-maxw); width: 100%;
}
.project-hero h1 {
    color: #fff; font-size: clamp(36px, 5vw, 68px);
    max-width: 22ch; margin-bottom: 14px;
}
.project-hero .meta-line {
    font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.14em; color: rgba(255,255,255,.85);
}
.project-hero .meta-line span + span::before { content: ' · '; }

.project-body {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 100px 32px;
    display: grid; grid-template-columns: 1fr 2fr; gap: 64px;
    align-items: start;
}
.project-side { position: sticky; top: 120px; font-size: 14px; }
.project-side h4 {
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--sl-slate);
    margin-bottom: 6px; font-weight: 600;
}
.project-side .meta-block {
    margin-bottom: 22px; color: var(--sl-charcoal);
}
.project-text p {
    margin-bottom: 20px; font-size: 17px;
    line-height: 1.7; max-width: 62ch;
}
.project-text p.lede {
    font-size: 22px; line-height: 1.45;
    color: var(--sl-ink); margin-bottom: 36px;
    max-width: 30ch; font-weight: 500;
}
.gallery {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 0 32px 120px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sl-gap);
}
.gallery img {
    width: 100%; aspect-ratio: 3/2; object-fit: cover;
    background: var(--sl-light);
}

/* 10. DARK QUOTE ================================================= */
.quote-section {
    background: var(--sl-ink); color: #fff;
    padding: 140px 32px;
}
.quote-inner { max-width: 980px; margin: 0 auto; }
.quote-eyebrow {
    text-transform: uppercase;
    font-size: 12px; letter-spacing: 0.18em;
    color: rgba(255,255,255,.6); font-weight: 500;
    margin-bottom: 32px;
}
.quote-section blockquote {
    font-weight: 500;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.25; letter-spacing: -0.02em;
    color: #fff;
}
.quote-attr { margin-top: 36px; font-size: 14px; color: rgba(255,255,255,.6); }

/* 11. CONTACT ==================================================== */
.contact {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 120px 32px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.contact h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 24px; }
.contact .lead { font-size: 19px; max-width: 38ch; }
address { font-style: normal; font-size: 16px; line-height: 1.7; }
address a { border-bottom: 1px solid var(--sl-light); }
.contact-actions {
    margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap;
}
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: var(--sl-ink); color: #fff;
    border-radius: 2px;
    /* v1.4.7: font explizit — <button class="btn"> erbt sonst die Systemschrift */
    font: inherit; font-family: var(--sl-font);
    font-weight: 500; font-size: 14px;
    border: 0; border-bottom: none; cursor: pointer;
}
.btn.secondary {
    background: transparent; color: var(--sl-ink);
    border: 1px solid var(--sl-light);
}
.btn:hover { border-bottom: none; transform: translateY(-1px); }

/* 12. PILLARS / TEAM / JOURNAL =================================== */
.pillars {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 60px 32px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sl-gap);
    border-bottom: 1px solid var(--sl-light);
}
.pillar h3 { font-size: 22px; margin-bottom: 10px; }
.pillar p { font-size: 16px; color: var(--sl-charcoal); }

.text-block {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 80px 32px;
    border-bottom: 1px solid var(--sl-light);
}
.text-block h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 18px; }
.text-block p { font-size: 17px; color: var(--sl-charcoal); max-width: 72ch; }
.text-block.clients p {
    font-size: 15px; color: var(--sl-slate); line-height: 1.9;
}

.team-grid {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 0 32px 120px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sl-gap);
}
.person { display: flex; flex-direction: column; gap: 14px; }
.person img {
    aspect-ratio: 1/1; object-fit: cover;
    background: var(--sl-light); width: 100%;
}
.person h3 { font-size: 20px; }
.person .role {
    font-size: 14px; color: var(--sl-slate);
    text-transform: uppercase; letter-spacing: 0.12em;
}

.journal-grid {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 0 32px 120px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.post { display: flex; flex-direction: column; gap: 14px; }
.post .thumb {
    aspect-ratio: 3/2; width: 100%; object-fit: cover;
    background: var(--sl-light);
}
.post .date {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--sl-slate);
}
.post h3 { font-size: 20px; line-height: 1.3; }
.post p { font-size: 15px; color: var(--sl-charcoal); }

/* 13. LONGFORM (Impressum / Datenschutz / generische Seite) ===== */
.longform {
    max-width: 780px; margin: 0 auto;
    padding: 60px 32px 120px;
}
.longform h2 { font-size: 24px; margin: 36px 0 10px; }
.longform h3 { font-size: 18px; margin: 24px 0 8px; }
.longform p { margin-bottom: 14px; font-size: 16px; line-height: 1.7; }
.longform ul { margin: 14px 0 14px 22px; }

/* 14. FOOTER ===================================================== */
.site-footer {
    background: var(--sl-paper);
    border-top: 1px solid var(--sl-light);
    padding: 48px 32px;
}
.foot-inner {
    max-width: var(--sl-maxw); margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    gap: 32px; flex-wrap: wrap;
}
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { font-size: 13px; color: var(--sl-slate); }
.foot-copyright { font-size: 13px; color: var(--sl-slate); }

/* 15. RESPONSIVE ================================================= */



/* Mindest-Touch-Target 44×44 für jedes interaktive Element */
@media (pointer: coarse) {
    a, button, .chip, .btn, .hero-cta, .burger {
        min-height: 44px;
    }
    .chip { padding: 10px 16px; }
}

/* Laptop/Tablet (≤ 1280px): 2 statt 3 Spalten */
@media (max-width: 1280px) {
    .grid, .team-grid, .journal-grid, .pillars {
        grid-template-columns: repeat(2, 1fr);
    }
    .intro {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 80px 32px;
    }
    .stats-grid { padding: 40px 32px; }
    .project-body {
        grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
        gap: 40px;
        padding: 72px 32px;
    }
    .project-side { position: static; }
}

/* Phone (≤ 900px) */
/* Tablet & Phone (≤ 1024px) — Burger statt Top-Nav */
@media (max-width: 1024px) {
    body { font-size: 16px; }

    .nav { padding: 14px 20px; }
    .burger { display: block; }
    nav.main { display: none; }
    nav.main.is-open {
        display: block;
        position: absolute; top: 100%; left: 0; right: 0;
        background: rgba(250,250,250,.98);
        backdrop-filter: saturate(140%) blur(8px);
        border-bottom: 1px solid var(--sl-light);
        padding: 20px 20px 24px;
    }
    nav.main.is-open ul { flex-direction: column; gap: 18px; }
    nav.main.is-open {
        background: var(--sl-paper);
        color: var(--sl-charcoal);
        box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    nav.main.is-open a {
        font-size: 19px;
        padding: 14px 0;
        display: block;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    nav.main.is-open a:last-child { border-bottom: none; }
    nav.main.is-open a:last-child { border-bottom: none; }
    nav.main.is-open a:hover { color: var(--sl-ink) !important; }

    /* Wenn Burger-Menü offen: Header bekommt opaken Hintergrund, alles dunkel */
    .site-header:has(nav.main.is-open) {
        background: rgba(250,250,250,.98);
        border-bottom: 1px solid var(--sl-light);
    }
    body.has-cover .site-header:has(nav.main.is-open) .logo,
    body.has-cover .site-header:has(nav.main.is-open) nav.main a,
    body.has-cover .site-header:has(nav.main.is-open) .burger {
        color: var(--sl-charcoal) !important;
        text-shadow: none !important;
    }
    body.has-cover .site-header:has(nav.main.is-open) .logo span {
        color: var(--sl-slate) !important;
    }
    /* Links innerhalb des offenen Menüs IMMER dunkel (Fallback ohne :has) */
    nav.main.is-open a { color: var(--sl-charcoal) !important; text-shadow: none !important; }

    body.has-cover .site-header:not(.is-scrolled) .burger { color: #fff; }

    .hero { min-height: 100vh; min-height: 100svh; }
    .hero-inner { padding: 0 20px 56px; }
    .hero h1 { font-size: clamp(34px, 10vw, 56px); margin-bottom: 22px; line-height: 1.05; }

    .page-hero { padding: 110px 20px 32px; }
    .page-hero h1 { font-size: clamp(32px, 9vw, 48px); }

    .stats-grid { grid-template-columns: repeat(2, 1fr); padding: 28px 20px; }
    .stat { border-right: none; border-bottom: 1px solid var(--sl-light); padding: 18px 12px; }
    .stat:nth-child(odd) { border-right: 1px solid var(--sl-light); }
    .stat:nth-last-child(-n+2) { border-bottom: none; }
    .stat-num { font-size: 36px; }

    .intro { padding: 48px 20px; gap: 16px; }
    .intro-text { font-size: 20px; }

    .grid, .team-grid, .journal-grid, .pillars { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .grid-wrap, .section-head, .filter-bar, .page-hero, .text-block,
    .team-grid, .journal-grid, .pillars { padding-left: 20px; padding-right: 20px; }

    .section-head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 18px; margin-bottom: 32px; }
    .section-head h2 { font-size: 26px; }

    .contact { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; }
    .quote-section { padding: 56px 20px; }
    .quote-section blockquote { font-size: 24px; }

    .project-hero { height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; }
    .project-hero h1 { font-size: clamp(28px, 8vw, 44px); }
    .project-body { grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr); padding: 40px 20px; gap: 20px; }
    .project-text p { font-size: 16px; }
    .project-text p.lede { font-size: 19px; }

    .card .meta h3 { font-size: 18px; }
    .card .meta-line { font-size: 12px; }
    .card .meta-line span + span::before { content: ' · '; }

    .filter-bar { gap: 6px; }

    .site-footer { padding: 32px 20px; }
    .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .foot-copyright, .foot-links a { font-size: 12px; }
}

/* iPhone (≤ 480px) — finetuning für reale iPhone-Breiten 375/390/393 */
@media (max-width: 480px) {
    :root { --sl-gap: 16px; }

    /* Header */
    .nav { padding: 12px 16px; }
    .logo { font-size: 17px; letter-spacing: -0.02em; line-height: 1.15; }
    .logo span { display: inline; opacity: 0.7; }
    .nav { padding: 14px 18px; }
    .burger { width: 40px; height: 40px; }
    .burger span { margin: 4px 0; }

    /* Hero – mehr Luft, etwas kleinere H1 */
    .hero { min-height: 100vh; min-height: 100svh; }
    .hero-inner { padding: 0 18px 44px; }
    .hero-eyebrow { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 14px; }
    .hero h1 { font-size: 36px; line-height: 1.05; margin-bottom: 18px; }
    .hero-cta { padding: 12px 16px; font-size: 14px; gap: 8px; }

    /* Page-Hero */
    .page-hero { padding: 96px 18px 24px; }
    .page-hero .eyebrow { font-size: 11px; margin-bottom: 12px; }
    .page-hero h1 { font-size: 28px; line-height: 1.1; margin-bottom: 12px; }
    .page-hero p.lede { font-size: 16px; line-height: 1.5; }

    /* Stats */
    .stats-grid { padding: 22px 16px; }
    .stat { padding: 14px 8px; }
    .stat-num { font-size: 24px; }
    .stat-label { font-size: 10px; letter-spacing: 0.1em; }
    .stat { padding: 12px 6px; }

    /* Intro */
    .intro { padding: 40px 18px; }
    .intro .eyebrow { font-size: 11px; }
    .intro-text { font-size: 17px; line-height: 1.45; }
    .intro-text em { padding-bottom: 0; }

    /* Section Heads */
    .section-head { padding: 0 18px 14px; margin-bottom: 22px; }
    .section-head h2 { font-size: 22px; }
    .section-head .meta { font-size: 11px; letter-spacing: 0.12em; }

    /* Filter Chips */
    .filter-bar { padding: 0 18px; gap: 6px; }
    .chip { padding: 8px 12px; font-size: 12px; min-height: 36px; }

    /* Project Grid – Kacheln auf einer Spalte, schöne Höhe */
    .grid-wrap { padding: 0 18px 56px; }
    .grid { gap: 14px; }
    .card { aspect-ratio: 4/3; }                /* etwas kürzer als 3/2 für besseres Daumen-Scrolling */
    .card .meta { left: 14px; right: 14px; bottom: 12px; }
    .card .meta h3 { font-size: 15px; line-height: 1.2; font-weight: 600; }
    .card .meta-line { font-size: 10px; letter-spacing: 0.08em; opacity: 0.9; }

    /* Projekt-Detail */
    .project-hero { height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; }
    .project-hero-inner { padding: 0 18px 36px; }
    .project-hero h1 { font-size: 28px; line-height: 1.1; margin-bottom: 10px; }
    .project-hero .meta-line { font-size: 11px; letter-spacing: 0.1em; }
    .project-body { grid-template-columns: minmax(104px, 0.78fr) minmax(0, 1.22fr); padding: 36px 18px; gap: 14px; }
    .project-side { font-size: 13px; }
    .project-side h4 { font-size: 10px; letter-spacing: 0.16em; }
    .project-side .meta-block { margin-bottom: 16px; }
    .project-text p { font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
    .project-text p.lede { font-size: 18px; line-height: 1.4; margin-bottom: 24px; max-width: none; }
    .gallery { padding: 0 18px 64px; gap: 10px; }
    .gallery img { aspect-ratio: 4/3; }

    /* Quote */
    .quote-section { padding: 48px 18px; }
    .quote-eyebrow { font-size: 11px; margin-bottom: 20px; }
    .quote-section blockquote { font-size: 20px; line-height: 1.3; }
    .quote-attr { margin-top: 24px; font-size: 13px; }

    /* Kontakt */
    .contact { padding: 40px 18px; gap: 28px; }
    .contact h2 { font-size: 24px; margin-bottom: 18px; }
    .contact .lead { font-size: 16px; }
    .btn { padding: 11px 16px; font-size: 13px; }
    address { font-size: 15px; }

    /* Pillars */
    .pillars { padding: 36px 18px; gap: 18px; }
    .pillar h3 { font-size: 19px; }
    .pillar p { font-size: 15px; }

    /* Text-Blocks (Nachhaltigkeit, Kunden, Longform) */
    .text-block { padding: 48px 18px; }
    .text-block h2 { font-size: 22px; margin-bottom: 14px; }
    .text-block p { font-size: 16px; line-height: 1.65; }
    .text-block.clients p { font-size: 14px; line-height: 1.8; }

    /* Team-Grid */
    .team-grid { padding: 0 18px 64px; gap: 22px; }
    .person { gap: 10px; }
    .person h3 { font-size: 18px; }
    .person .role { font-size: 12px; letter-spacing: 0.1em; }

    /* Journal-Grid */
    .journal-grid { padding: 0 18px 64px; gap: 28px; }
    .post .thumb { aspect-ratio: 4/3; }
    .post h3 { font-size: 18px; line-height: 1.3; }
    .post p { font-size: 14px; line-height: 1.5; }
    .post .date { font-size: 11px; letter-spacing: 0.12em; }

    /* Longform (Impressum, Datenschutz) */
    .longform { padding: 36px 18px 80px; }
    .longform h2 { font-size: 20px; margin: 28px 0 8px; }
    .longform h3 { font-size: 17px; margin: 20px 0 6px; }
    .longform p { font-size: 15px; line-height: 1.65; }

    /* Footer */
    .site-footer { padding: 24px 18px; }
    .foot-copyright, .foot-links a { font-size: 11px; }
    .foot-links { gap: 16px; }
}

/* Sehr schmal (≤ 360px – ältere iPhones im Querformat etc.) */
@media (max-width: 360px) {
    .hero h1 { font-size: 32px; }
    .page-hero h1 { font-size: 26px; }
    .card .meta h3 { font-size: 13px; }
    .card .meta-line { font-size: 9px; }
    .stat-num { font-size: 22px; }
}


/* Menü-Open: Header schaltet immer auf "scrolled"-Look (dunkler Text, weißer Hintergrund) */
.site-header:has(nav.main.is-open) {
    --hdr-fg: var(--sl-ink) !important;
    --hdr-bg: #fff !important;
    border-bottom: 1px solid var(--sl-light) !important;
}
.site-header:has(nav.main.is-open) .logo,
.site-header:has(nav.main.is-open) .logo span,
.site-header:has(nav.main.is-open) nav.main a,
.site-header:has(nav.main.is-open) .burger,
.site-header:has(nav.main.is-open) .burger span {
    text-shadow: none !important;
    box-shadow: none !important;
}
.site-header nav.main.is-open {
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.site-header nav.main.is-open a {
    color: var(--sl-charcoal) !important;
    text-shadow: none !important;
}
/* Fallback für Browser ohne :has — sobald Menü offen, links explizit dunkel */
nav.main.is-open a { color: var(--sl-charcoal) !important; text-shadow: none !important; }



/* ============================================================
   Menü-Items: Feintuning für Mid-Range
   ============================================================ */
@media (max-width: 1100px) {
    nav.main ul { gap: 18px; }
    nav.main a { font-size: 15px; }
}
@media (min-width: 901px) and (max-width: 1024px) {
    /* Schmale Laptops: kompakter aber lesbar */
    nav.main ul { gap: 16px; }
    nav.main a { font-size: 14.5px; }
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print */
@media print {
    .site-header, .burger, .hero-cta, .filter-bar, .quote-section { display: none; }
    .hero { min-height: 0; padding: 24px 0; background: none; color: var(--sl-ink); }
    .hero::after { display: none; }
    body { background: #fff; color: #000; }
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 90px 32px 0;
    font-size: 12px;
    color: var(--sl-slate);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: '/'; color: var(--sl-light); margin-right: 4px; }
.breadcrumbs a { color: var(--sl-slate); border-bottom: none; }
.breadcrumbs a:hover { color: var(--sl-charcoal); }
.breadcrumbs span[aria-current] { color: var(--sl-charcoal); }

@media (max-width: 480px) {
    .breadcrumbs { padding: 80px 18px 0; font-size: 11px; }
}

/* ============================================================
   Hero-Subline (unter H1, über CTA)
   ============================================================ */
.hero-subline {
    color: rgba(255,255,255,0.92);
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.5;
    max-width: 56ch;
    margin: -8px 0 28px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
@media (max-width: 480px) {
    .hero-subline { font-size: 14px; max-width: none; margin-bottom: 22px; }
}

/* Skip-Link (Accessibility) — VOR allen anderen Stilen, mit !important defensiv */
a.skip-link,
.skip-link {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--sl-ink);
    color: #fff !important;
    padding: 12px 18px;
    border-radius: 2px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: none !important;
    z-index: 9999;
}
a.skip-link:focus,
.skip-link:focus,
a.skip-link:focus-visible,
.skip-link:focus-visible {
    left: 12px !important;
    top: 12px !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    outline: 2px solid var(--sl-slate);
    outline-offset: 2px;
}

/* ============================================================
   EDITORIAL HOME (helle Startseite gemäß Screenshot)
   ============================================================ */

/* Body-Variante: kein dunkler Hero, keine has-cover-Logik */
body.is-editorial-home .site-header {
    --hdr-fg: var(--sl-ink);
    --hdr-bg: rgba(250,250,250,.92);
    border-bottom: 1px solid var(--sl-light);
}
body.is-editorial-home .site-header .logo a { font-size: 18px; letter-spacing: 0.04em; }
body.is-editorial-home main.site-main { padding-top: 0; }

/* Hero: weiße Bühne, große Text-Headline */
.editorial-hero {
    padding: 120px 32px 36px;
    max-width: var(--sl-maxw);
    margin: 0 auto;
    background: var(--sl-off);
}
.editorial-inner { max-width: 1100px; }
.editorial-eyebrow {
    font-size: 14px;
    color: var(--sl-charcoal);
    margin-bottom: 18px;
    letter-spacing: 0;
    text-transform: none;
}
.editorial-h1 {
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--sl-ink);
    margin-bottom: 0;
}

/* Grid (3 Spalten, zwei Reihen) */
.editorial-grid {
    max-width: var(--sl-maxw);
    margin: 28px auto 56px;
    padding: 0 32px;
}
.editorial-grid .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.edit-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--sl-light);
    border-bottom: none;
    border-radius: 2px;
}
.edit-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.edit-card:hover img { transform: scale(1.04); }
.edit-card .edit-label {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 10px rgba(0,0,0,0.25);
    z-index: 1;
}
.edit-card .edit-label .cat {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.edit-card .edit-label .sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.25;
    color: rgba(255,255,255,0.86);
    font-weight: 400;
}

/* Büro + Stats Sektion */
.editorial-buero {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 32px 32px 24px;
    border-top: 1px solid var(--sl-light);
}
.buero-inner {
    display: grid;
    grid-template-columns: minmax(260px, 440px) 1fr;
    gap: 64px;
    align-items: end;
}
.buero-h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    color: var(--sl-ink);
    margin: 6px 0 12px;
    letter-spacing: -0.01em;
}
.buero-copy {
    font-size: 14px;
    line-height: 1.55;
    color: var(--sl-charcoal);
    max-width: 46ch;
}
.buero-stats {
    display: flex;
    justify-content: flex-end;
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    border-left: 1px solid var(--sl-light);
    padding-left: clamp(24px, 4vw, 56px);
}
.bstat { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 80px; }
.bstat .num {
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 500;
    color: var(--sl-ink);
    letter-spacing: -0.02em;
    line-height: 1;
}
.bstat .lab {
    font-size: 13px;
    color: var(--sl-charcoal);
    letter-spacing: 0;
}

/* Horizontaler Footer-Block (Adress-Zeile) */
.editorial-foot-contact {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 16px 32px 28px;
    border-top: 1px solid var(--sl-light);
}
.editorial-foot-contact .foot-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--sl-charcoal);
}
.editorial-foot-contact .foot-row li { line-height: 1.4; }
.editorial-foot-contact .foot-row a { color: var(--sl-charcoal); border-bottom: none; }
.editorial-foot-contact .foot-row a:hover { color: var(--sl-ink); }

/* Auf Editorial-Home den großen Footer der site-footer kompakter halten — 
   Adresse wird hier ja schon angezeigt */
body.is-editorial-home footer.site-footer .foot-copyright { display: none; }

/* Responsive Anpassungen */
@media (max-width: 1100px) {
    .editorial-grid .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .editorial-hero { padding: 100px 20px 24px; }
    .editorial-h1 { font-size: clamp(26px, 7vw, 36px); }
    .editorial-grid { padding: 0 20px; }
    .editorial-grid .grid { grid-template-columns: 1fr; gap: 14px; }
    .editorial-buero { padding: 28px 20px 20px; }
    .buero-inner { grid-template-columns: 1fr; gap: 24px; }
    .buero-stats {
        border-left: none;
        padding-left: 0;
        justify-content: space-between;
        gap: 12px;
    }
    .bstat { min-width: 0; flex: 1; }
    .editorial-foot-contact { padding: 14px 20px 24px; }
    .editorial-foot-contact .foot-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .editorial-h1 { font-size: 26px; }
    .edit-card .edit-label .cat { font-size: 13px; }
    .edit-card .edit-label .sub { font-size: 11px; }
    .bstat .num { font-size: 24px; }
    .bstat .lab { font-size: 11px; }
}


/* ============================================================
   STATS — IMMER 4 Spalten in einer Zeile, alle Bildschirmgrößen
   (Override mit höchster Defensiv-Specificity)
   ============================================================ */
body section.stats .stats-grid,
body .stats .stats-grid,
.stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid !important;
}
@media (max-width: 600px) {
    body section.stats .stats-grid,
    body .stats .stats-grid,
    .stats-grid {
        padding: 14px 8px !important;
        gap: 4px !important;
    }
    body section.stats .stat,
    body .stats .stat {
        padding: 6px 2px !important;
        border-right: 1px solid var(--sl-light) !important;
        border-bottom: none !important;
    }
    body section.stats .stat:last-child,
    body .stats .stat:last-child {
        border-right: none !important;
    }
    body .stat-num { font-size: clamp(14px, 4.4vw, 22px) !important; line-height: 1 !important; }
    body .stat-label { font-size: clamp(8px, 2.2vw, 10px) !important; letter-spacing: 0.04em !important; margin-top: 4px !important; }
}
@media (max-width: 380px) {
    body .stat-num { font-size: 13px !important; }
    body .stat-label { font-size: 7px !important; }
}


/* ============================================================
   Hamburger-Menü-Einträge rechtsbündig (Open-State)
   ============================================================ */
nav.main.is-open ul,
.site-header nav.main.is-open ul {
    align-items: flex-end !important;
    text-align: right !important;
    padding-right: 20px;
}
nav.main.is-open li,
.site-header nav.main.is-open li {
    width: 100%;
    text-align: right !important;
}
nav.main.is-open a,
.site-header nav.main.is-open a {
    text-align: right !important;
ant;
    display: block !important;
    width: 100%;
}

/* ====================================================================
   PROJEKT-OVERLAY (Slide-in von rechts, × oben, ‹ › an den Seiten)
   Einzige inhaltliche Änderung gegenüber dem Stadt : Labor Modern Theme.
   ==================================================================== */

/* Backdrop hinter dem Overlay */
.sla-overlay-dim {
    position: fixed;
    inset: 0;
    background: rgba(26, 31, 35, 0);
    z-index: 4990;
    opacity: 0;
    pointer-events: none;
    transition: background 0.5s ease, opacity 0.3s ease;
}
.sla-overlay-dim.is-active {
    background: rgba(26, 31, 35, 0.55);
    opacity: 1;
    pointer-events: auto;
}

/* Das eigentliche Overlay-Panel (Slide-in von rechts) */
.sla-overlay {
    position: fixed !important;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--sl-paper, #fff);
    z-index: 5000 !important;
    transform: translateX(100%);
    transition: transform 0.65s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    will-change: transform;
    margin: 0;
    padding: 0;
}
.sla-overlay.is-open {
    transform: translateX(0) !important;
}

.sla-overlay-content {
    min-height: 100vh;
    width: 100%;
}
.sla-overlay-content > .site-header,
.sla-overlay-content > .site-footer {
    display: none;
}

/* Loader-Ring */
.sla-overlay-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sla-overlay.is-loading .sla-overlay-loader { opacity: 1; }
.sla-overlay-loader::before {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(54, 69, 79, 0.15);
    border-top-color: var(--sl-charcoal, #36454F);
    animation: sla-spin 0.85s linear infinite;
}
@keyframes sla-spin { to { transform: rotate(360deg); } }

/* Schließen-Button (×) oben rechts */
.sla-overlay-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(54, 69, 79, 0.15);
    color: var(--sl-ink, #1A1F23);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6000;
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}
.sla-overlay-close.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.sla-overlay-close:hover,
.sla-overlay-close:focus-visible {
    background: var(--sl-ink, #1A1F23);
    color: #fff;
    border-color: var(--sl-ink, #1A1F23);
    outline: none;
}
.sla-overlay-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
    pointer-events: none;
}

/* Navigations-Pfeile ‹ › links und rechts */
.sla-overlay-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(54, 69, 79, 0.15);
    color: var(--sl-ink, #1A1F23);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}
.sla-overlay-nav.is-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}
.sla-overlay-nav.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.sla-overlay-nav:hover:not(.is-disabled),
.sla-overlay-nav:focus-visible:not(.is-disabled) {
    background: var(--sl-ink, #1A1F23);
    color: #fff;
    border-color: var(--sl-ink, #1A1F23);
    outline: none;
}
.sla-overlay-nav.prev { left: 24px; }
.sla-overlay-nav.next { right: 24px; }
.sla-overlay-nav svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
}

/* Wenn Overlay offen: Hintergrund nicht scrollbar */
body.sla-overlay-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Mobile */
@media (max-width: 720px) {
    .sla-overlay-close { top: 14px; right: 14px; width: 42px; height: 42px; }
    .sla-overlay-nav { width: 44px; height: 44px; }
    .sla-overlay-nav.prev { left: 10px; }
    .sla-overlay-nav.next { right: 10px; }
    .sla-overlay-nav svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .sla-overlay { transition: transform 0.15s ease; }
    .sla-overlay-dim { transition: opacity 0.15s ease, background 0.15s ease; }
    .sla-overlay-close,
    .sla-overlay-nav { transition: opacity 0.15s ease; }
}

/* ====================================================================
   SCHRIFTGRÖSSEN — Lesbarkeit auf Tablet & Smartphone
   Tablet ≤1024px:   Fließtext mind. 17px
   Mobile ≤720px:    Fließtext 17px, Meta/Nav 15px
   (Desktop bleibt unverändert.)
   ==================================================================== */

/* TABLET — Fließtext mindestens 17px */
@media (max-width: 1024px) {
    body { font-size: 17px !important; }
    p,
    .intro-text,
    .lede,
    .project-text,
    .project-text p,
    .text-block p,
    .longform p,
    address {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }
    /* Nav-Links auf Tablet noch komfortabel */
    nav.main a,
    .foot-links a {
        font-size: 16px !important;
    }
}

/* SMARTPHONE — Fließtext 17px, Meta/Nav 15px */
@media (max-width: 720px) {
    body { font-size: 17px !important; }
    p,
    .intro-text,
    .lede,
    .project-text,
    .project-text p,
    .text-block p,
    .longform p,
    address,
    .pillar p,
    .post p,
    .contact .lead {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }
    /* Navigation (Hauptmenü, Footer-Menü, Burger-Menü) */
    nav.main a,
    .site-header nav.main a,
    nav.main.is-open a,
    .foot-links a,
    .foot-copyright,
    .foot-inner a {
        font-size: 15px !important;
    }
    /* Meta-Informationen: Karten-Untertitel, Eyebrows, Project-Side, Tags */
    .meta-line,
    .meta-line span,
    .card .meta-line,
    .card .meta-line span,
    .eyebrow,
    .hero-eyebrow,
    .quote-eyebrow,
    .stat-label,
    .meta,
    .section-head .meta,
    .project-side,
    .project-side .meta-block,
    .meta-block h4,
    .post-meta,
    .quote-attr {
        font-size: 15px !important;
    }
    /* Filter-Chips & kleine Buttons auch lesbar machen */
    .chip,
    .btn.secondary {
        font-size: 15px !important;
    }
}


/* ============================================================
   SEO / UX Typografie-Feinschliff — keine Layoutänderung
   Ziel: bessere mobile Lesbarkeit und Engagement-Signale.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    body { font-size: 17px; line-height: 1.6; }
    .project-text p,
    .text-block p,
    .longform p { font-size: 17px; line-height: 1.65; }
    .project-side,
    .project-side .meta-block,
    .project-hero .meta-line,
    .section-head .meta,
    .foot-copyright,
    .foot-links a { font-size: 15px; line-height: 1.45; }
}

@media (max-width: 768px) {
    body { font-size: 16px; line-height: 1.6; }
    .project-text p { font-size: 17px; line-height: 1.65; margin-bottom: 1.1em; }
    .project-text p.lede { font-size: 19px; line-height: 1.45; }
    .project-side,
    .project-side .meta-block,
    .project-hero .meta-line,
    nav.main.is-open a,
    .foot-copyright,
    .foot-links a { font-size: 15px; line-height: 1.45; }
    figcaption, .caption, small { font-size: 14px; line-height: 1.45; }
}


/* SEO/Mobile optimization */

@media (max-width:768px){
  body,.project-content p{font-size:17px!important;line-height:1.6!important;}
  .project-meta,.project-meta li,nav a,footer{font-size:15px!important;line-height:1.45!important;}
  figcaption,.caption,small{font-size:14px!important;line-height:1.45!important;}
}
@media (min-width:769px) and (max-width:1024px){
  body,.project-content p{font-size:17px!important;line-height:1.6!important;}
  .project-meta,.project-meta li,nav a,footer{font-size:15px!important;line-height:1.45!important;}
}
.skip-link{
 position:absolute;left:-9999px;top:auto;
}
.skip-link:focus{
 left:10px;top:10px;background:#fff;padding:10px;z-index:9999;
}
img{height:auto}


/* SEO v1.2.4: performance/accessibility refinements without visual redesign */
.gallery, .grid-wrap, .longform { content-visibility:auto; contain-intrinsic-size: 1px 900px; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Ultra compact statistics block — v1.2.6 */
.stats-section,
.stat-section,
.stats-strip,
.stats,
.home-stats,
.site-stats,
.sla-stats,
.metrics-section,
.numbers-section,
.counter-section,
section:has(.stat-number),
section:has(.counter-number),
section:has(.number-value),
section:has(.metric-number) {
  padding-top: clamp(1rem, 2vw, 2.25rem) !important;
  padding-bottom: clamp(1rem, 2vw, 2.25rem) !important;
  min-height: 0 !important;
}

.stats-grid,
.stats-list,
.stats-row,
.home-stats,
.site-stats,
.sla-stats,
.metrics-grid,
.numbers-grid,
.counter-grid,
section:has(.stat-number) .container,
section:has(.counter-number) .container,
section:has(.number-value) .container,
section:has(.metric-number) .container {
  min-height: 0 !important;
}

.stats-grid,
.stats-list,
.stats-row,
.home-stats,
.site-stats,
.sla-stats,
.metrics-grid,
.numbers-grid,
.counter-grid {
  align-items: center !important;
  gap: clamp(0.35rem, 1vw, 1rem) !important;
}

.stat-card,
.stat-item,
.stat,
.metric-card,
.metric-item,
.number-card,
.number-item,
.counter-card,
.counter-item,
.stats-grid > *,
.stats-list > *,
.stats-row > *,
.home-stats > *,
.site-stats > *,
.sla-stats > * {
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(0.35rem, 0.8vw, 0.75rem) !important;
  padding-bottom: clamp(0.35rem, 0.8vw, 0.75rem) !important;
  padding-left: clamp(0.5rem, 1.2vw, 1.25rem) !important;
  padding-right: clamp(0.5rem, 1.2vw, 1.25rem) !important;
}

.stat-number,
.metric-number,
.number-value,
.counter-number,
.stat-card strong,
.stat-item strong,
.stat strong,
.metric-card strong,
.metric-item strong,
.number-card strong,
.number-item strong,
.counter-card strong,
.counter-item strong,
.stats-grid strong,
.stats-list strong,
.stats-row strong,
.home-stats strong,
.site-stats strong,
.sla-stats strong {
  display: block !important;
  font-size: clamp(1.55rem, 2.7vw, 3.05rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.055em !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(0.25rem, 0.45vw, 0.45rem) !important;
}

.stat-label,
.metric-label,
.number-label,
.counter-label,
.stat-card span,
.stat-item span,
.stat span,
.metric-card span,
.metric-item span,
.number-card span,
.number-item span,
.counter-card span,
.counter-item span,
.stats-grid span,
.stats-list span,
.stats-row span,
.home-stats span,
.site-stats span,
.sla-stats span {
  display: block !important;
  font-size: clamp(0.55rem, 0.62vw, 0.68rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.14em !important;
  margin: 0 !important;
}

.stats-grid > * + *,
.stats-list > * + *,
.stats-row > * + *,
.home-stats > * + *,
.site-stats > * + *,
.sla-stats > * + * {
  border-left-width: 1px !important;
}

@media (min-width: 1025px) {
  .stats-section,
  .stat-section,
  .stats-strip,
  .stats,
  .home-stats,
  .site-stats,
  .sla-stats,
  .metrics-section,
  .numbers-section,
  .counter-section,
  section:has(.stat-number),
  section:has(.counter-number),
  section:has(.number-value),
  section:has(.metric-number) {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  .stat-number,
  .metric-number,
  .number-value,
  .counter-number,
  .stats-grid strong,
  .stats-list strong,
  .stats-row strong,
  .home-stats strong,
  .site-stats strong,
  .sla-stats strong {
    font-size: 3rem !important;
  }

  .stat-label,
  .metric-label,
  .number-label,
  .counter-label,
  .stats-grid span,
  .stats-list span,
  .stats-row span,
  .home-stats span,
  .site-stats span,
  .sla-stats span {
    font-size: 0.62rem !important;
  }
}

@media (max-width: 768px) {
  .stats-section,
  .stat-section,
  .stats-strip,
  .stats,
  .home-stats,
  .site-stats,
  .sla-stats,
  .metrics-section,
  .numbers-section,
  .counter-section,
  section:has(.stat-number),
  section:has(.counter-number),
  section:has(.number-value),
  section:has(.metric-number) {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .stats-grid,
  .stats-list,
  .stats-row,
  .home-stats,
  .site-stats,
  .sla-stats,
  .metrics-grid,
  .numbers-grid,
  .counter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }

  .stat-card,
  .stat-item,
  .stat,
  .metric-card,
  .metric-item,
  .number-card,
  .number-item,
  .counter-card,
  .counter-item,
  .stats-grid > *,
  .stats-list > *,
  .stats-row > *,
  .home-stats > *,
  .site-stats > *,
  .sla-stats > * {
    padding: 0.45rem 0.5rem !important;
  }

  .stat-number,
  .metric-number,
  .number-value,
  .counter-number,
  .stats-grid strong,
  .stats-list strong,
  .stats-row strong,
  .home-stats strong,
  .site-stats strong,
  .sla-stats strong {
    font-size: 2rem !important;
    margin-bottom: 0.25rem !important;
  }

  .stat-label,
  .metric-label,
  .number-label,
  .counter-label,
  .stats-grid span,
  .stats-list span,
  .stats-row span,
  .home-stats span,
  .site-stats span,
  .sla-stats span {
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
  }
}


/* Marker-specific ultra compact stats */
.sla-ultra-compact-stats {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  min-height: 0 !important;
}
.sla-ultra-compact-stats * {
  min-height: 0;
}
.sla-ultra-compact-stats strong,
.sla-ultra-compact-stats .stat-number,
.sla-ultra-compact-stats .counter-number {
  font-size: clamp(1.75rem, 2.7vw, 3rem) !important;
  line-height: 0.9 !important;
  margin-bottom: 0.3rem !important;
}
.sla-ultra-compact-stats span,
.sla-ultra-compact-stats .stat-label,
.sla-ultra-compact-stats .counter-label {
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.14em !important;
}


/* Direct homepage stats override — v1.2.8 lower vertical height */
.stats {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  min-height: 0 !important;
  height: auto !important;
}

.stats-grid {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: center !important;
  min-height: 0 !important;
}

.stat {
  min-height: 0 !important;
  height: auto !important;
  padding: 0.18rem 0.85rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.stat + .stat {
  border-left: 1px solid rgba(0,0,0,0.12) !important;
}

.stat-num {
  font-size: clamp(1.8rem, 2.6vw, 2.65rem) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.055em !important;
  font-weight: 500 !important;
  margin: 0 0 0.16rem 0 !important;
  padding: 0 !important;
}

.stat-label {
  font-size: clamp(0.54rem, 0.56vw, 0.64rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 1025px) {
  .stats {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  .stat {
    padding-top: 0.12rem !important;
    padding-bottom: 0.12rem !important;
  }

  .stat-num {
    font-size: 2.55rem !important;
    margin-bottom: 0.14rem !important;
  }

  .stat-label {
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 900px) {
  .stats {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .stats-grid {
    max-width: 560px !important;
  }

  .stat-num {
    font-size: 2.1rem !important;
  }
}

@media (max-width: 768px) {
  .stats {
    padding: 0.55rem 1rem !important;
  }

  .stats-grid {
    max-width: 340px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 0.15rem !important;
  }

  .stat {
    padding: 0.28rem 0.5rem !important;
  }

  .stat:nth-child(odd) {
    border-left: 0 !important;
  }

  .stat:nth-child(even) {
    border-left: 1px solid rgba(0,0,0,0.12) !important;
  }

  .stat-num {
    font-size: 1.75rem !important;
    line-height: 0.82 !important;
    margin-bottom: 0.12rem !important;
  }

  .stat-label {
    font-size: 0.56rem !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
  }
}

@media (max-width: 420px) {
  .stats {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }

  .stats-grid {
    max-width: 300px !important;
  }

  .stat {
    padding-top: 0.24rem !important;
    padding-bottom: 0.24rem !important;
  }

  .stat-num {
    font-size: 1.6rem !important;
  }

  .stat-label {
    font-size: 0.52rem !important;
  }
}


/* SEO landing pages — v1.2.9 */
.seo-landing-page {
  background: var(--color-bg, #f7f4ef);
}

.seo-landing-page .container {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.landing-hero {
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(2.5rem, 5vw, 5rem);
}

.landing-hero .eyebrow,
.landing-projects .eyebrow {
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  opacity: 0.72;
}

.landing-hero h1 {
  max-width: 980px;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
  margin: 0;
}

.landing-hero .lead {
  max-width: 760px;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  margin: 1.5rem 0 0;
}

.landing-content {
  padding: clamp(2rem, 4vw, 4rem) 0;
}

.landing-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.landing-text-block {
  max-width: 760px;
  padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(0,0,0,0.12);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.landing-text-block:last-child {
  margin-bottom: 0;
}

.landing-text-block h2,
.landing-aside h2,
.landing-projects h2,
.landing-cta h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 0.8rem;
}

.landing-text-block p,
.landing-cta p {
  font-size: clamp(1rem, 1.05vw, 1.14rem);
  line-height: 1.6;
  margin: 0;
}

.landing-aside {
  position: sticky;
  top: 6rem;
  padding: 1.25rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 1rem;
  background: rgba(255,255,255,0.35);
}

.landing-aside ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  margin: 1rem 0 0;
}

.landing-aside li {
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
}

.landing-projects {
  padding: clamp(2.5rem, 5vw, 5rem) 0;
}

.landing-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.landing-project-card a {
  display: block;
  min-height: 100%;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 1rem;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,0.32);
}

.landing-project-card h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.15;
  margin: 0 0 0.8rem;
}

.landing-project-card p {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 1rem;
  opacity: 0.82;
}

.landing-project-card span,
.landing-cta a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-cta {
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
}

.landing-cta .container {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(0,0,0,0.14);
}

.landing-cta a {
  display: inline-block;
  margin-top: 1.2rem;
  color: inherit;
}

@media (max-width: 900px) {
  .landing-content-grid {
    grid-template-columns: 1fr;
  }

  .landing-aside {
    position: static;
  }

  .landing-project-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .landing-project-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    padding-top: 3rem;
  }
}



/* v1.3.5 — keep project detail description as two columns on tablet and smartphone */
@media (max-width: 1280px) {
  .project-body {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  }
}

@media (max-width: 900px) {
  .project-body {
    grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 600px) {
  .project-body {
    grid-template-columns: minmax(104px, 0.78fr) minmax(0, 1.22fr);
    gap: 14px;
  }
  .project-side,
  .project-text {
    min-width: 0;
  }
}

/* v1.3.6 — keep project data column visible while the project text scrolls */
.project-body .project-side {
  position: sticky;
  top: clamp(72px, 10vh, 120px);
  align-self: start;
  max-height: calc(100svh - clamp(96px, 14vh, 150px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1280px) {
  .project-body .project-side {
    position: sticky;
    top: 88px;
    max-height: calc(100svh - 112px);
  }
}

@media (max-width: 900px) {
  .project-body .project-side {
    position: sticky;
    top: 74px;
    max-height: calc(100svh - 96px);
  }
}

@media (max-width: 600px) {
  .project-body .project-side {
    position: sticky;
    top: 64px;
    max-height: calc(100svh - 82px);
    padding-right: 2px;
  }
}


/* Journal lazy loading / infinite scroll */
.journal-loadmore {
    max-width: var(--sl-maxw);
    margin: -64px auto 96px;
    padding: 0 32px;
    text-align: center;
}
.journal-loadmore-button {
    appearance: none;
    border: 1px solid var(--sl-light);
    background: transparent;
    color: var(--sl-ink);
    border-radius: 999px;
    padding: 12px 18px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.journal-loadmore-button:hover {
    background: var(--sl-ink);
    color: #fff;
}
.journal-loadmore-button:disabled {
    cursor: wait;
    opacity: 0.55;
}
.journal-loading {
    margin-top: 14px;
    font-size: 13px;
    color: var(--sl-slate);
}
.journal-sentinel {
    width: 100%;
    height: 1px;
}
@media (max-width: 700px) {
    .journal-loadmore {
        margin-top: -40px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   Version 1.3.8 — Hamburger menu text slightly larger
   ============================================================ */
@media (max-width: 1024px) {
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 720px) {
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 16.5px !important;
        line-height: 1.4 !important;
    }
}

/* Version 1.3.9 — editable project gallery + fullscreen lightbox */
.project-gallery .project-gallery-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
    text-align: left;
}
.project-gallery .project-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    background: var(--sl-light);
    transition: transform .45s ease, filter .45s ease;
}
@media (hover:hover) {
    .project-gallery .project-gallery-item:hover img {
        transform: scale(1.025);
        filter: brightness(.92);
    }
}
.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 56px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}
.project-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.project-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, .92);
}
.project-lightbox-stage {
    position: relative;
    z-index: 1;
    width: min(100%, 1500px);
    height: min(100%, 88svh);
    margin: 0;
    display: grid;
    place-items: center;
}
.project-lightbox-stage img {
    max-width: 100%;
    max-height: calc(88svh - 34px);
    object-fit: contain;
    box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.project-lightbox-stage figcaption {
    align-self: end;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    letter-spacing: .08em;
    margin-top: 14px;
}
.project-lightbox-close,
.project-lightbox-nav {
    position: fixed;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
}
.project-lightbox-close {
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 46px;
    height: 46px;
    border-radius: 999px;
    font-size: 30px;
    line-height: 1;
}
.project-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 72px;
    border-radius: 999px;
    font-size: 48px;
    line-height: 1;
}
.project-lightbox-nav.prev { left: max(18px, env(safe-area-inset-left)); }
.project-lightbox-nav.next { right: max(18px, env(safe-area-inset-right)); }
.project-lightbox-nav[hidden] { display: none; }
.project-lightbox-open { overflow: hidden; }
@media (max-width: 700px) {
    .project-lightbox { padding: 12px; }
    .project-lightbox-stage { height: 86svh; }
    .project-lightbox-stage img { max-height: calc(86svh - 30px); }
    .project-lightbox-close { width: 42px; height: 42px; font-size: 28px; }
    .project-lightbox-nav { width: 44px; height: 60px; font-size: 40px; }
}


/* v1.3.11 — Powerhouse-inspired usability improvements, Stadt : Labor visual identity preserved */
.project-index-tools {
    max-width: var(--sl-maxw);
    margin: -32px auto 22px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 0.7fr));
    gap: 14px;
    align-items: end;
}
.project-index-tools label { display: flex; flex-direction: column; gap: 7px; }
.project-index-tools span {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.project-index-tools input,
.project-index-tools select {
    width: 100%;
    border: 1px solid var(--sl-light);
    background: rgba(255,255,255,.62);
    color: var(--sl-ink);
    font: inherit;
    font-size: 15px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 0;
    outline: none;
}
.project-index-tools input:focus,
.project-index-tools select:focus { border-color: var(--sl-ink); background: #fff; }
.project-result-line {
    max-width: var(--sl-maxw);
    margin: 0 auto 20px;
    padding: 0 32px;
    color: var(--sl-slate);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* v1.4.4: Alles-zurücksetzen in der Ergebniszeile */
.project-reset {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--sl-light);
    padding: 0 0 1px;
    font: inherit;
    color: var(--sl-charcoal);
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.project-reset:hover { border-bottom-color: var(--sl-charcoal); }
.project-empty {
    padding: 48px 32px 96px;
    color: var(--sl-slate);
    text-align: center;
}
.project-hero .project-subtitle {
    max-width: 42ch;
    color: rgba(255,255,255,.9);
    font-size: clamp(17px, 2vw, 24px);
    line-height: 1.35;
    margin: -4px 0 16px;
    text-shadow: 0 1px 10px rgba(0,0,0,.28);
}
.project-tab-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.project-tab-buttons button {
    border: 1px solid var(--sl-light);
    background: transparent;
    color: var(--sl-slate);
    font: inherit;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 10px;
    cursor: pointer;
}
.project-tab-buttons button.is-active {
    background: var(--sl-ink);
    border-color: var(--sl-ink);
    color: #fff;
}
.project-tab-panel[hidden] { display: none; }
.project-section-list { margin-top: 44px; }
.project-story-section {
    border-top: 1px solid var(--sl-light);
    padding-top: 28px;
    margin-top: 30px;
}
.project-story-section h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.team-grid-extended .person-extended { gap: 18px; }
.person-fallback {
    aspect-ratio: 1/1;
    width: 100%;
    display: grid;
    place-items: center;
    background: var(--sl-light);
    color: var(--sl-slate);
    font-size: clamp(42px, 7vw, 78px);
    text-transform: uppercase;
}
.person-body { display: flex; flex-direction: column; gap: 10px; }
.person-bio {
    color: var(--sl-charcoal);
    font-size: 15px;
    line-height: 1.55;
}
.person-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
}
.person-meta dt {
    color: var(--sl-slate);
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 10px;
}
.person-meta dd { margin: 0; color: var(--sl-charcoal); }
.careers-block {
    max-width: var(--sl-maxw);
    margin: 0 auto 120px;
    padding: 56px 32px;
    border-top: 1px solid var(--sl-light);
    border-bottom: 1px solid var(--sl-light);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
}
.careers-block h2 {
    font-size: clamp(26px, 3vw, 42px);
    margin: 12px 0 0;
}
.careers-block p {
    color: var(--sl-charcoal);
    font-size: 18px;
    line-height: 1.6;
    max-width: 56ch;
    margin-bottom: 20px;
}
@media (max-width: 900px) {
    .project-index-tools { grid-template-columns: 1fr 1fr; margin-top: -20px; padding: 0 24px; }
    .project-result-line { padding: 0 24px; }
    .careers-block { grid-template-columns: 1fr; gap: 22px; margin-bottom: 88px; }
}
@media (max-width: 600px) {
    .project-index-tools { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px; }
    .project-search { grid-column: 1 / -1; }
    .project-index-tools input, .project-index-tools select { font-size: 14px; min-height: 42px; }
    .project-result-line { padding: 0 18px; }
    .project-tab-buttons { gap: 5px; }
    .project-tab-buttons button { font-size: 10px; padding: 7px 8px; }
    .person-meta { grid-template-columns: 1fr; gap: 2px; }
    .careers-block { padding: 42px 18px; }
}


/* v1.3.12 — Powerhouse-like on-demand project search/filter + typography scale */
.project-demand-tools {
    max-width: var(--sl-maxw);
    margin: -34px auto 26px;
    padding: 0 32px;
}
.project-demand-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
    border-top: 1px solid var(--sl-light);
    padding-top: 18px;
}
.project-demand-toggle {
    appearance: none;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--sl-ink);
    font: inherit;
    font-size: clamp(18px, 1.65vw, 24px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 3px;
}
.project-demand-toggle small {
    font-size: .62em;
    line-height: 1;
    color: var(--sl-slate);
    letter-spacing: 0;
}
.project-demand-toggle:hover,
.project-demand-toggle[aria-expanded="true"] {
    border-bottom-color: currentColor;
}
.project-search-panel,
.project-index-tools[data-project-panel] {
    margin-top: 22px;
}
.project-search-panel[hidden],
.project-index-tools[hidden] {
    display: none !important;
}
.project-search-panel {
    display: block;
    max-width: min(760px, 100%);
    margin-left: auto;
}
.project-search-panel label,
.project-index-tools label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-search-panel span,
.project-index-tools span {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.project-search-panel input,
.project-index-tools input,
.project-index-tools select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--sl-light);
    background: transparent;
    color: var(--sl-ink);
    font: inherit;
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.12;
    min-height: 54px;
    padding: 8px 0 12px;
    border-radius: 0;
    outline: none;
}
.project-index-tools select {
    font-size: clamp(18px, 1.45vw, 23px);
    min-height: 50px;
}
.project-search-panel input::placeholder { color: var(--sl-slate); opacity: .72; }
.project-search-panel input:focus,
.project-index-tools select:focus { border-bottom-color: var(--sl-ink); }
.project-index-tools[data-project-panel] {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}
.project-result-line {
    font-size: 12px;
    letter-spacing: .14em;
}
body { font-size: 18px; line-height: 1.56; }
.page-hero h1 { font-size: clamp(48px, 5.3vw, 78px); line-height: .98; letter-spacing: -0.045em; }
.page-hero p.lede { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.34; max-width: 54ch; }
.project-hero h1 { font-size: clamp(50px, 6vw, 88px); line-height: .98; letter-spacing: -0.05em; }
.project-hero .project-subtitle { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.22; max-width: 46ch; }
.project-text p { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.58; }
.project-text p.lede { font-size: clamp(23px, 2.05vw, 32px); line-height: 1.3; }
.card .meta h3 { font-size: clamp(21px, 1.8vw, 28px); line-height: 1.05; letter-spacing: -0.035em; }
.card .meta-line { font-size: 12px; letter-spacing: .1em; }
.section-head h2, .contact h2 { font-size: clamp(36px, 4vw, 58px); line-height: 1; letter-spacing: -0.045em; }

@media (max-width: 1024px) {
    body { font-size: 17px; line-height: 1.58; }
    .page-hero h1 { font-size: clamp(42px, 8vw, 64px); line-height: 1; }
    .page-hero p.lede { font-size: 20px; line-height: 1.38; }
    .project-hero h1 { font-size: clamp(42px, 8.5vw, 68px); }
    .project-demand-tools { margin-top: -18px; padding-left: 24px; padding-right: 24px; }
    .project-demand-actions { justify-content: flex-start; }
    .project-index-tools[data-project-panel] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .project-search-panel input { font-size: clamp(28px, 5vw, 42px); }
    .project-index-tools select { font-size: 18px; }
    .card .meta h3 { font-size: 22px; }
}

@media (max-width: 720px) {
    body { font-size: 16px; line-height: 1.55; }
    .page-hero h1 { font-size: clamp(34px, 11vw, 48px); line-height: .98; }
    .page-hero p.lede { font-size: 17px; line-height: 1.42; }
    .project-hero h1 { font-size: clamp(34px, 11vw, 50px); line-height: .98; }
    .project-hero .project-subtitle { font-size: 18px; line-height: 1.28; }
    .project-demand-tools { margin: -6px auto 22px; padding-left: 18px; padding-right: 18px; }
    .project-demand-actions { justify-content: space-between; gap: 18px; padding-top: 14px; }
    .project-demand-toggle { font-size: clamp(20px, 6.2vw, 28px); }
    .project-search-panel, .project-index-tools[data-project-panel] { margin-top: 18px; }
    .project-index-tools[data-project-panel] { grid-template-columns: 1fr; gap: 14px; }
    .project-search-panel input { font-size: clamp(30px, 10vw, 44px); min-height: 58px; }
    .project-index-tools select { font-size: 18px; min-height: 46px; }
    .project-result-line { padding-left: 18px; padding-right: 18px; font-size: 11px; }
    .project-text p { font-size: 16px; line-height: 1.58; }
    .project-text p.lede { font-size: 19px; line-height: 1.34; }
    .card .meta h3 { font-size: 20px; line-height: 1.06; }
    .card .meta-line { font-size: 11px; }
    .section-head h2, .contact h2 { font-size: 32px; }
}

@media (max-width: 420px) {
    .project-demand-toggle { font-size: 19px; }
    .project-demand-toggle small { display: none; }
    .project-search-panel input { font-size: 32px; }
}

/* v1.3.12 final responsive type override — placed last to beat older mobile !important rules */
@media (max-width: 720px) {
    body { font-size: 16px !important; line-height: 1.55 !important; }
    p,
    .intro-text,
    .lede,
    .project-text,
    .project-text p,
    .text-block p,
    .longform p,
    address,
    .pillar p,
    .post p,
    .contact .lead {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
    .page-hero h1 { font-size: clamp(34px, 11vw, 48px) !important; line-height: .98 !important; }
    .page-hero p.lede { font-size: 17px !important; line-height: 1.42 !important; }
    .project-hero h1 { font-size: clamp(34px, 11vw, 50px) !important; line-height: .98 !important; }
    .project-text p.lede { font-size: 19px !important; line-height: 1.34 !important; }
    .project-demand-toggle { font-size: clamp(20px, 6.2vw, 28px) !important; }
    .project-search-panel input { font-size: clamp(30px, 10vw, 44px) !important; }
    .project-index-tools select { font-size: 18px !important; }
    .card .meta h3 { font-size: 20px !important; line-height: 1.06 !important; }
}
@media (min-width: 721px) and (max-width: 1024px) {
    body { font-size: 17px !important; line-height: 1.58 !important; }
    p,
    .intro-text,
    .lede,
    .project-text,
    .project-text p,
    .text-block p,
    .longform p,
    address {
        font-size: 17px !important;
        line-height: 1.58 !important;
    }
    .page-hero h1 { font-size: clamp(42px, 8vw, 64px) !important; line-height: 1 !important; }
    .project-hero h1 { font-size: clamp(42px, 8.5vw, 68px) !important; }
    .project-search-panel input { font-size: clamp(28px, 5vw, 42px) !important; }
    .card .meta h3 { font-size: 22px !important; }
}


/* ====================================================================
   Version 1.3.13 — SEO head cleanup
   - single homepage title source
   - duplicate canonical prevention
   - duplicate primary menu link cleanup
   ==================================================================== */


/* Version 1.3.14 — improved intuitive project gallery editor in WP admin */

/* ============================================================
   Version 1.3.15 — Powerhouse-inspired navigation font sizes
   Scope: site navigation only; layout and functionality unchanged.
   ============================================================ */
:root {
    --sl-nav-font-desktop: clamp(18px, 1.18vw, 21px);
    --sl-nav-font-tablet: 22px;
    --sl-nav-font-phone: 19px;
    --sl-nav-line: 1.18;
}

@media (min-width: 1025px) {
    .site-header nav.main a,
    nav.main a {
        font-size: var(--sl-nav-font-desktop) !important;
        line-height: var(--sl-nav-line) !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
    }
    .site-header .logo {
        font-size: clamp(19px, 1.22vw, 22px) !important;
        line-height: var(--sl-nav-line) !important;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .site-header nav.main.is-open a,
    nav.main.is-open a {
        font-size: var(--sl-nav-font-tablet) !important;
        line-height: 1.22 !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .site-header .logo {
        font-size: 20px !important;
        line-height: 1.18 !important;
    }
}

@media (max-width: 720px) {
    .site-header nav.main.is-open a,
    nav.main.is-open a {
        font-size: var(--sl-nav-font-phone) !important;
        line-height: 1.24 !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
    .site-header .logo {
        font-size: 18px !important;
        line-height: 1.18 !important;
    }
}


/* ---------------------------------------------------------------
   Version 1.3.16 — legacy content.json images inside editable project gallery
   --------------------------------------------------------------- */


/* Version 1.3.17 — multiple selectable project types in editor */
.sl-project-types-admin {
  margin: 12px 0 14px;
  padding: 10px 0 12px;
  border-top: 1px solid #dcdcde;
  border-bottom: 1px solid #dcdcde;
}
.sl-project-types-admin__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 9px 0 11px;
}
.sl-project-types-admin__grid label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.25;
  padding: 5px 7px;
  border: 1px solid #e2e4e7;
  border-radius: 6px;
  background: #fff;
}
.sl-project-types-admin__grid input {
  margin-top: 1px;
}


/* ============================================================
   Version 1.3.18 — Powerhouse-responsive typography alignment
   Scope: font sizes for headings, body copy, navigation, and meta text
   across desktop / tablet / smartphone. Layout and functionality unchanged.
   ============================================================ */
:root {
    --sl-type-body-desktop: 18px;
    --sl-type-body-tablet: 17px;
    --sl-type-body-phone: 16px;

    --sl-type-h1-desktop: clamp(56px, 6.6vw, 96px);
    --sl-type-h1-tablet: clamp(44px, 8.2vw, 72px);
    --sl-type-h1-phone: clamp(36px, 12vw, 54px);

    --sl-type-h2-desktop: clamp(40px, 4.6vw, 64px);
    --sl-type-h2-tablet: clamp(34px, 5.8vw, 50px);
    --sl-type-h2-phone: clamp(28px, 8.6vw, 38px);

    --sl-type-project-card-desktop: clamp(22px, 1.95vw, 30px);
    --sl-type-project-card-tablet: clamp(21px, 3vw, 26px);
    --sl-type-project-card-phone: clamp(19px, 6vw, 24px);

    --sl-type-lede-desktop: clamp(21px, 1.9vw, 28px);
    --sl-type-lede-tablet: clamp(19px, 2.8vw, 24px);
    --sl-type-lede-phone: clamp(17px, 5.2vw, 21px);

    --sl-type-meta-desktop: 12px;
    --sl-type-meta-tablet: 11.5px;
    --sl-type-meta-phone: 11px;

    --sl-nav-desktop-powerhouse: clamp(18px, 1.18vw, 22px);
    --sl-nav-tablet-powerhouse: clamp(22px, 3.2vw, 28px);
    --sl-nav-phone-powerhouse: clamp(20px, 6vw, 26px);
}

@media (min-width: 1025px) {
    html body {
        font-size: var(--sl-type-body-desktop) !important;
        line-height: 1.56 !important;
    }

    .site-header nav.main a,
    nav.main a {
        font-size: var(--sl-nav-desktop-powerhouse) !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
        letter-spacing: -0.012em !important;
    }
    .site-header .logo {
        font-size: clamp(19px, 1.2vw, 22px) !important;
        line-height: 1.15 !important;
    }

    .hero h1,
    .page-hero h1,
    .project-hero h1,
    .editorial-h1 {
        font-size: var(--sl-type-h1-desktop) !important;
        line-height: .96 !important;
        letter-spacing: -0.055em !important;
    }

    .section-head h2,
    .contact h2,
    .text-block h2,
    .project-story-section h2,
    .careers-block h2,
    .buero-h2 {
        font-size: var(--sl-type-h2-desktop) !important;
        line-height: 1 !important;
        letter-spacing: -0.045em !important;
    }

    .page-hero p.lede,
    .hero-subline,
    .intro-text,
    .project-hero .project-subtitle,
    .project-text p.lede,
    .contact .lead,
    .careers-block p {
        font-size: var(--sl-type-lede-desktop) !important;
        line-height: 1.32 !important;
        letter-spacing: -0.015em !important;
    }

    .project-text p,
    .text-block p,
    .longform p,
    .post p,
    .pillar p,
    .person-bio,
    address,
    .buero-copy {
        font-size: var(--sl-type-body-desktop) !important;
        line-height: 1.58 !important;
    }

    .card .meta h3,
    .post h3,
    .person h3 {
        font-size: var(--sl-type-project-card-desktop) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.035em !important;
    }

    .hero-eyebrow,
    .page-hero .eyebrow,
    .intro .eyebrow,
    .section-head .meta,
    .project-hero .meta-line,
    .card .meta-line,
    .project-side h4,
    .project-tab-buttons button,
    .post .date,
    .project-result-line,
    .person .role,
    .person-meta dt {
        font-size: var(--sl-type-meta-desktop) !important;
        line-height: 1.25 !important;
        letter-spacing: .13em !important;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    html body {
        font-size: var(--sl-type-body-tablet) !important;
        line-height: 1.58 !important;
    }

    .site-header nav.main.is-open a,
    nav.main.is-open a {
        font-size: var(--sl-nav-tablet-powerhouse) !important;
        line-height: 1.12 !important;
        font-weight: 500 !important;
        letter-spacing: -0.018em !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .site-header .logo {
        font-size: 20px !important;
        line-height: 1.15 !important;
    }

    .hero h1,
    .page-hero h1,
    .project-hero h1,
    .editorial-h1 {
        font-size: var(--sl-type-h1-tablet) !important;
        line-height: .98 !important;
        letter-spacing: -0.05em !important;
    }

    .section-head h2,
    .contact h2,
    .text-block h2,
    .project-story-section h2,
    .careers-block h2,
    .buero-h2 {
        font-size: var(--sl-type-h2-tablet) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em !important;
    }

    .page-hero p.lede,
    .hero-subline,
    .intro-text,
    .project-hero .project-subtitle,
    .project-text p.lede,
    .contact .lead,
    .careers-block p {
        font-size: var(--sl-type-lede-tablet) !important;
        line-height: 1.36 !important;
        letter-spacing: -0.01em !important;
    }

    .project-text p,
    .text-block p,
    .longform p,
    .post p,
    .pillar p,
    .person-bio,
    address,
    .buero-copy {
        font-size: var(--sl-type-body-tablet) !important;
        line-height: 1.6 !important;
    }

    .card .meta h3,
    .post h3,
    .person h3 {
        font-size: var(--sl-type-project-card-tablet) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.032em !important;
    }

    .hero-eyebrow,
    .page-hero .eyebrow,
    .intro .eyebrow,
    .section-head .meta,
    .project-hero .meta-line,
    .card .meta-line,
    .project-side h4,
    .project-tab-buttons button,
    .post .date,
    .project-result-line,
    .person .role,
    .person-meta dt {
        font-size: var(--sl-type-meta-tablet) !important;
        line-height: 1.24 !important;
        letter-spacing: .12em !important;
    }
}

@media (max-width: 720px) {
    html body {
        font-size: var(--sl-type-body-phone) !important;
        line-height: 1.56 !important;
    }

    .site-header nav.main.is-open a,
    nav.main.is-open a {
        font-size: var(--sl-nav-phone-powerhouse) !important;
        line-height: 1.12 !important;
        font-weight: 500 !important;
        letter-spacing: -0.018em !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .site-header .logo {
        font-size: 18px !important;
        line-height: 1.15 !important;
    }

    .hero h1,
    .page-hero h1,
    .project-hero h1,
    .editorial-h1 {
        font-size: var(--sl-type-h1-phone) !important;
        line-height: .98 !important;
        letter-spacing: -0.048em !important;
    }

    .section-head h2,
    .contact h2,
    .text-block h2,
    .project-story-section h2,
    .careers-block h2,
    .buero-h2 {
        font-size: var(--sl-type-h2-phone) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.038em !important;
    }

    .page-hero p.lede,
    .hero-subline,
    .intro-text,
    .project-hero .project-subtitle,
    .project-text p.lede,
    .contact .lead,
    .careers-block p {
        font-size: var(--sl-type-lede-phone) !important;
        line-height: 1.38 !important;
        letter-spacing: -0.006em !important;
    }

    .project-text p,
    .text-block p,
    .longform p,
    .post p,
    .pillar p,
    .person-bio,
    address,
    .buero-copy {
        font-size: var(--sl-type-body-phone) !important;
        line-height: 1.62 !important;
    }

    .card .meta h3,
    .post h3,
    .person h3 {
        font-size: var(--sl-type-project-card-phone) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em !important;
    }

    .hero-eyebrow,
    .page-hero .eyebrow,
    .intro .eyebrow,
    .section-head .meta,
    .project-hero .meta-line,
    .card .meta-line,
    .project-side h4,
    .project-tab-buttons button,
    .post .date,
    .project-result-line,
    .person .role,
    .person-meta dt {
        font-size: var(--sl-type-meta-phone) !important;
        line-height: 1.25 !important;
        letter-spacing: .105em !important;
    }

    .project-demand-toggle {
        font-size: clamp(21px, 6.2vw, 28px) !important;
        line-height: 1.05 !important;
    }
}

@media (max-width: 380px) {
    :root {
        --sl-type-h1-phone: clamp(33px, 11vw, 46px);
        --sl-nav-phone-powerhouse: clamp(19px, 5.6vw, 24px);
    }
}


/* ============================================================
   Version 1.3.19 — Powerhouse headline sweep for all page headings
   Scope: align page/section headings such as “Architektur, die bleibt.”
   on Büro and other static pages across desktop / tablet / smartphone.
   ============================================================ */
:root {
    --sl-type-h3-desktop: clamp(24px, 2.2vw, 34px);
    --sl-type-h3-tablet: clamp(22px, 3.4vw, 30px);
    --sl-type-h3-phone: clamp(20px, 6.2vw, 25px);
}

@media (min-width: 1025px) {
    /* Large editorial page titles: Büro, Kontakt, Journal, Team, default pages, 404, archives */
    .page-hero h1,
    .longform h1,
    .entry-title,
    main > h1,
    .archive-title,
    .landing-hero h1,
    .seo-landing-page h1 {
        font-size: var(--sl-type-h1-desktop) !important;
        line-height: .96 !important;
        letter-spacing: -0.055em !important;
        font-weight: 500 !important;
        max-width: 18ch;
    }

    /* Editorial section headings, including inline homepage/Büro teaser headings */
    .section-head h2,
    .contact h2,
    .text-block h2,
    .longform h2,
    .project-story-section h2,
    .careers-block h2,
    .buero-h2,
    .quote-section h2,
    .landing-text-block h2,
    .landing-projects h2,
    .landing-faq h2,
    .seo-landing-page h2,
    .home .contact h2,
    .home .page-section h2,
    .home section h2,
    .front-page h2,
    .wp-block-heading {
        font-size: var(--sl-type-h2-desktop) !important;
        line-height: 1 !important;
        letter-spacing: -0.045em !important;
        font-weight: 500 !important;
    }

    .pillar h3,
    .post h3,
    .person h3,
    .longform h3,
    .landing-projects h3,
    .landing-faq h3,
    .seo-landing-page h3,
    .card .meta h3 {
        font-size: var(--sl-type-h3-desktop) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.035em !important;
        font-weight: 500 !important;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .page-hero h1,
    .longform h1,
    .entry-title,
    main > h1,
    .archive-title,
    .landing-hero h1,
    .seo-landing-page h1 {
        font-size: var(--sl-type-h1-tablet) !important;
        line-height: .98 !important;
        letter-spacing: -0.05em !important;
        font-weight: 500 !important;
        max-width: 18ch;
    }

    .section-head h2,
    .contact h2,
    .text-block h2,
    .longform h2,
    .project-story-section h2,
    .careers-block h2,
    .buero-h2,
    .quote-section h2,
    .landing-text-block h2,
    .landing-projects h2,
    .landing-faq h2,
    .seo-landing-page h2,
    .home .contact h2,
    .home .page-section h2,
    .home section h2,
    .front-page h2,
    .wp-block-heading {
        font-size: var(--sl-type-h2-tablet) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em !important;
        font-weight: 500 !important;
    }

    .pillar h3,
    .post h3,
    .person h3,
    .longform h3,
    .landing-projects h3,
    .landing-faq h3,
    .seo-landing-page h3,
    .card .meta h3 {
        font-size: var(--sl-type-h3-tablet) !important;
        line-height: 1.07 !important;
        letter-spacing: -0.032em !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 720px) {
    .page-hero h1,
    .longform h1,
    .entry-title,
    main > h1,
    .archive-title,
    .landing-hero h1,
    .seo-landing-page h1 {
        font-size: var(--sl-type-h1-phone) !important;
        line-height: .98 !important;
        letter-spacing: -0.048em !important;
        font-weight: 500 !important;
        max-width: 18ch;
    }

    .section-head h2,
    .contact h2,
    .text-block h2,
    .longform h2,
    .project-story-section h2,
    .careers-block h2,
    .buero-h2,
    .quote-section h2,
    .landing-text-block h2,
    .landing-projects h2,
    .landing-faq h2,
    .seo-landing-page h2,
    .home .contact h2,
    .home .page-section h2,
    .home section h2,
    .front-page h2,
    .wp-block-heading {
        font-size: var(--sl-type-h2-phone) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.038em !important;
        font-weight: 500 !important;
    }

    .pillar h3,
    .post h3,
    .person h3,
    .longform h3,
    .landing-projects h3,
    .landing-faq h3,
    .seo-landing-page h3,
    .card .meta h3 {
        font-size: var(--sl-type-h3-phone) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em !important;
        font-weight: 500 !important;
    }
}


/* Version 1.3.20 — Homepage hero headline updated */

/* ====================================================================
   v1.3.21 — Powerhouse-orientiertes globales responsives Typografie-System
   Gilt für alle Seiten: Desktop, Tablet, Smartphone.
   Ziel: konsistente Schriftgrößen für Überschriften, Fließtext,
   Navigation und Meta-Texte über alle Templates hinweg.
   ==================================================================== */
:root {
    --ph-nav: 18px;
    --ph-logo: 21px;
    --ph-body: 18px;
    --ph-body-line: 1.58;
    --ph-meta: 13px;
    --ph-caption: 14px;
    --ph-h1: clamp(56px, 6.2vw, 88px);
    --ph-h2: clamp(38px, 4.1vw, 58px);
    --ph-h3: clamp(24px, 2.1vw, 30px);
    --ph-lede: clamp(22px, 2.05vw, 28px);
    --ph-card-title: clamp(23px, 2.1vw, 30px);
    --ph-project-title: clamp(58px, 6vw, 86px);
}

html body {
    font-size: var(--ph-body) !important;
    line-height: var(--ph-body-line) !important;
}

/* Navigation + Logo */
.site-header .logo,
.site-header .logo a,
body.is-editorial-home .site-header .logo a {
    font-size: var(--ph-logo) !important;
    line-height: 1.08 !important;
}
.site-header nav.main a,
nav.main a,
.project-demand-toggle,
.project-demand-actions button,
.project-search input,
.project-search-panel input,
.journal-loadmore-button,
.hero-cta,
.btn,
.chip {
    font-size: var(--ph-nav) !important;
    line-height: 1.2 !important;
}

/* Große Seiten- und Hero-Überschriften */
.hero h1,
.page-hero h1,
.editorial-h1,
.landing-hero h1,
.seo-landing-page h1,
.longform h1 {
    font-size: var(--ph-h1) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
}
.project-hero h1,
.project-title,
.single-project .project-hero h1 {
    font-size: var(--ph-project-title) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
}

/* Section-Überschriften und redaktionelle Titel */
.section-head h2,
.section-header h2,
.contact h2,
.quote-section blockquote,
.text-block h2,
.longform h2,
.project-story-section h2,
.landing-content h2,
.landing-text-block h2,
.buero-h2 {
    font-size: var(--ph-h2) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.035em !important;
}
.pillar h3,
.person h3,
.post h3,
.card .meta h3,
.sl-gallery-card__title,
.project-section-list h3,
.longform h3,
.landing-project-card h3,
.project-gallery h3 {
    font-size: var(--ph-h3) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
}
.card .meta h3,
.sl-gallery-card__title {
    font-size: var(--ph-card-title) !important;
}

/* Fließtext / Intro / Projekttext */
p,
.intro-text,
.page-hero p.lede,
.lede,
.lead,
.hero-subline,
.project-subtitle,
.project-text p,
.project-text p.lede,
.text-block p,
.longform p,
.post p,
.pillar p,
.person-bio,
.person-extended,
.landing-content p,
.landing-text-block p,
.buero-copy,
.contact .lead,
address {
    font-size: var(--ph-body) !important;
    line-height: var(--ph-body-line) !important;
}
.intro-text,
.page-hero p.lede,
.project-text p.lede,
.project-subtitle,
.landing-hero .lede,
.landing-main .lead {
    font-size: var(--ph-lede) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.018em !important;
}

/* Meta-Texte, Beschreibungen, Labels, kleine Navigationen */
.meta,
.meta-line,
.meta-line span,
.card .meta-line,
.project-hero .meta-line,
.project-side,
.project-side .meta-block,
.project-side h4,
.project-info-tabs,
.project-tab-buttons button,
.project-result-line,
.project-empty,
.eyebrow,
.hero-eyebrow,
.editorial-eyebrow,
.page-hero .eyebrow,
.quote-eyebrow,
.section-head .meta,
.stat-label,
.role,
.person-meta,
.post .date,
.date,
.breadcrumbs,
.foot-copyright,
.foot-links a,
footer,
figcaption,
.caption,
small,
.sl-gallery-card__meta,
.sl-gallery-card__status,
.journal-loading,
.project-gallery-item,
.careers-block .description {
    font-size: var(--ph-meta) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em !important;
}
figcaption,
.caption,
small {
    font-size: var(--ph-caption) !important;
}

/* Tablet — Powerhouse-artige Zwischenstufe */
@media (min-width: 721px) and (max-width: 1024px) {
    :root {
        --ph-nav: 17px;
        --ph-logo: 19px;
        --ph-body: 17px;
        --ph-body-line: 1.58;
        --ph-meta: 12px;
        --ph-caption: 13px;
        --ph-h1: clamp(44px, 7.1vw, 68px);
        --ph-h2: clamp(34px, 4.8vw, 48px);
        --ph-h3: clamp(22px, 2.8vw, 27px);
        --ph-lede: clamp(20px, 2.6vw, 24px);
        --ph-card-title: clamp(22px, 2.7vw, 27px);
        --ph-project-title: clamp(46px, 7vw, 68px);
    }
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 30px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.035em !important;
        padding: 14px 0 !important;
    }
}

/* Smartphone — große, klare mobile Navigation; kompaktere Editorial-Typo */
@media (max-width: 720px) {
    :root {
        --ph-nav: 16px;
        --ph-logo: 18px;
        --ph-body: 16px;
        --ph-body-line: 1.56;
        --ph-meta: 12px;
        --ph-caption: 12px;
        --ph-h1: clamp(36px, 11.6vw, 52px);
        --ph-h2: clamp(28px, 8.2vw, 38px);
        --ph-h3: clamp(20px, 5.4vw, 25px);
        --ph-lede: clamp(18px, 5.2vw, 22px);
        --ph-card-title: clamp(20px, 5.7vw, 25px);
        --ph-project-title: clamp(38px, 11.8vw, 54px);
    }
    nav.main.is-open,
    .site-header nav.main.is-open {
        padding-top: 26px !important;
        padding-bottom: 30px !important;
    }
    nav.main.is-open ul,
    .site-header nav.main.is-open ul {
        gap: 10px !important;
    }
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 28px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.035em !important;
        padding: 12px 0 !important;
    }
    .hero h1,
    .page-hero h1,
    .editorial-h1,
    .landing-hero h1,
    .seo-landing-page h1,
    .longform h1,
    .project-hero h1 {
        max-width: 10.5ch !important;
    }
    .page-hero p.lede,
    .intro-text,
    .project-text p.lede,
    .project-subtitle {
        max-width: 30ch !important;
    }
}

/* Sehr kleine Smartphone-Breiten */
@media (max-width: 380px) {
    :root {
        --ph-h1: 34px;
        --ph-h2: 27px;
        --ph-h3: 20px;
        --ph-project-title: 36px;
    }
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 26px !important;
    }
}

/* ====================================================================
   v1.3.22 — Powerhouse calibrated font sizes
   Korrektur nach direktem Seitenvergleich: v1.3.21 war auf Tablet/
   Smartphone deutlich zu groß. Diese finale Ebene reduziert H1/Lede/Text
   und harmonisiert Navigation, Meta und Projekttexte über alle Templates.
   ==================================================================== */
:root {
    --ph-nav: 18px;
    --ph-logo: 18px;
    --ph-body: 17px;
    --ph-body-line: 1.55;
    --ph-meta: 13px;
    --ph-caption: 12px;
    --ph-h1: clamp(44px, 4.1vw, 58px);
    --ph-h2: clamp(30px, 2.9vw, 40px);
    --ph-h3: clamp(21px, 1.75vw, 26px);
    --ph-lede: clamp(18px, 1.35vw, 20px);
    --ph-card-title: clamp(20px, 1.8vw, 26px);
    --ph-project-title: clamp(46px, 4.4vw, 64px);
}

html body,
body {
    font-size: var(--ph-body) !important;
    line-height: var(--ph-body-line) !important;
}

.site-header .logo,
.site-header .logo a,
body.is-editorial-home .site-header .logo a {
    font-size: var(--ph-logo) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em !important;
    font-weight: 500 !important;
}

.site-header nav.main a,
nav.main a,
.project-demand-toggle,
.project-demand-actions button,
.project-search input,
.project-search-panel input,
.journal-loadmore-button,
.hero-cta,
.btn,
.chip {
    font-size: var(--ph-nav) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em !important;
}

.hero h1,
.page-hero h1,
.editorial-h1,
.landing-hero h1,
.seo-landing-page h1,
.longform h1 {
    font-size: var(--ph-h1) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    font-weight: 500 !important;
}

.project-hero h1,
.project-title,
.single-project .project-hero h1 {
    font-size: var(--ph-project-title) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.045em !important;
    font-weight: 500 !important;
}

.section-head h2,
.section-header h2,
.contact h2,
.quote-section blockquote,
.text-block h2,
.longform h2,
.project-story-section h2,
.landing-content h2,
.landing-text-block h2,
.buero-h2 {
    font-size: var(--ph-h2) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    font-weight: 500 !important;
}

.pillar h3,
.person h3,
.post h3,
.card .meta h3,
.sl-gallery-card__title,
.project-section-list h3,
.longform h3,
.landing-project-card h3,
.project-gallery h3 {
    font-size: var(--ph-h3) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
    font-weight: 500 !important;
}

.card .meta h3,
.sl-gallery-card__title {
    font-size: var(--ph-card-title) !important;
}

p,
.intro-text,
.page-hero p.lede,
.lede,
.lead,
.hero-subline,
.project-subtitle,
.project-text p,
.text-block p,
.longform p,
.post p,
.pillar p,
.person-bio,
.person-extended,
.landing-content p,
.landing-text-block p,
.buero-copy,
.contact .lead,
address {
    font-size: var(--ph-body) !important;
    line-height: var(--ph-body-line) !important;
    letter-spacing: -0.006em !important;
}

.intro-text,
.page-hero p.lede,
.project-text p.lede,
.project-subtitle,
.landing-hero .lede,
.landing-main .lead {
    font-size: var(--ph-lede) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
}

.meta,
.meta-line,
.meta-line span,
.card .meta-line,
.project-hero .meta-line,
.project-side,
.project-side .meta-block,
.project-side h4,
.project-info-tabs,
.project-tab-buttons button,
.project-result-line,
.project-empty,
.eyebrow,
.hero-eyebrow,
.editorial-eyebrow,
.page-hero .eyebrow,
.quote-eyebrow,
.section-head .meta,
.stat-label,
.role,
.person-meta,
.post .date,
.date,
.breadcrumbs,
.foot-copyright,
.foot-links a,
footer,
figcaption,
.caption,
small,
.sl-gallery-card__meta,
.sl-gallery-card__status,
.journal-loading,
.project-gallery-item,
.careers-block .description {
    font-size: var(--ph-meta) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
}

figcaption,
.caption,
small {
    font-size: var(--ph-caption) !important;
}

/* Tablet: Powerhouse narrow-browser scale */
@media (min-width: 721px) and (max-width: 1024px) {
    :root {
        --ph-nav: 16px;
        --ph-logo: 18px;
        --ph-body: 16px;
        --ph-body-line: 1.52;
        --ph-meta: 13px;
        --ph-caption: 12px;
        --ph-h1: clamp(34px, 5.2vw, 42px);
        --ph-h2: clamp(26px, 3.8vw, 34px);
        --ph-h3: clamp(20px, 2.8vw, 24px);
        --ph-lede: 17px;
        --ph-card-title: clamp(19px, 2.8vw, 23px);
        --ph-project-title: clamp(36px, 5.8vw, 48px);
    }
    .page-hero {
        padding-top: 118px !important;
    }
    .page-hero h1,
    .editorial-h1,
    .hero h1 {
        max-width: 12ch !important;
    }
    .page-hero p.lede,
    .intro-text,
    .project-subtitle {
        max-width: 32ch !important;
    }
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 28px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.035em !important;
        padding: 12px 0 !important;
    }
}

/* Smartphone: matches Powerhouse mobile/narrow browser proportion */
@media (max-width: 720px) {
    :root {
        --ph-nav: 15px;
        --ph-logo: 17px;
        --ph-body: 16px;
        --ph-body-line: 1.5;
        --ph-meta: 12px;
        --ph-caption: 12px;
        --ph-h1: clamp(30px, 8vw, 34px);
        --ph-h2: clamp(23px, 6vw, 28px);
        --ph-h3: clamp(19px, 5vw, 22px);
        --ph-lede: 17px;
        --ph-card-title: clamp(18px, 5vw, 21px);
        --ph-project-title: clamp(32px, 9vw, 40px);
    }
    .site-header .nav {
        padding: 24px 18px !important;
    }
    .page-hero {
        padding: 110px 18px 34px !important;
    }
    .page-hero .eyebrow,
    .editorial-eyebrow,
    .hero-eyebrow {
        margin-bottom: 14px !important;
    }
    .hero h1,
    .page-hero h1,
    .editorial-h1,
    .landing-hero h1,
    .seo-landing-page h1,
    .longform h1,
    .project-hero h1 {
        max-width: 11ch !important;
    }
    .page-hero p.lede,
    .intro-text,
    .project-text p.lede,
    .project-subtitle {
        max-width: 31ch !important;
    }
    nav.main.is-open,
    .site-header nav.main.is-open {
        padding-top: 22px !important;
        padding-bottom: 26px !important;
    }
    nav.main.is-open ul,
    .site-header nav.main.is-open ul {
        gap: 8px !important;
    }
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 27px !important;
        line-height: 1.03 !important;
        letter-spacing: -0.035em !important;
        padding: 10px 0 !important;
    }
}

@media (max-width: 380px) {
    :root {
        --ph-h1: 29px;
        --ph-h2: 23px;
        --ph-h3: 18px;
        --ph-project-title: 31px;
        --ph-body: 15.5px;
        --ph-lede: 16px;
    }
    nav.main.is-open a,
    .site-header nav.main.is-open a {
        font-size: 25px !important;
    }
}


/* ====================================================================
   v1.3.24 — Full-width layout on large screens
   Removes the 1320px desktop cap on wide monitors while keeping readable
   text line-lengths and normal tablet/smartphone behavior unchanged.
   ==================================================================== */
@media (min-width: 1440px) {
    :root {
        --sl-maxw: calc(100vw - 96px);
        --sl-gap: 32px;
    }

    .nav,
    .hero-inner,
    .page-hero,
    .intro,
    .section-head,
    .filter-bar,
    .grid-wrap,
    .project-hero-inner,
    .project-body,
    .gallery,
    .contact,
    .pillars,
    .text-block,
    .team-grid,
    .journal-grid,
    .foot-inner,
    .journal-loadmore,
    .project-demand,
    .project-demand-panels,
    .project-search-panel,
    .project-filter-panel,
    .careers-block {
        max-width: var(--sl-maxw) !important;
        width: 100% !important;
    }

    .page-main-content.longform,
    .longform.page-main-content {
        max-width: var(--sl-maxw) !important;
        width: 100% !important;
    }

    .page-main-content.longform > p,
    .page-main-content.longform > ul,
    .page-main-content.longform > ol,
    .page-main-content.longform > blockquote,
    .page-main-content.longform > h2,
    .page-main-content.longform > h3,
    .page-main-content.longform > h4 {
        max-width: 760px;
    }

    .grid,
    .journal-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .team-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1800px) {
    :root {
        --sl-maxw: calc(100vw - 128px);
        --sl-gap: 36px;
    }

    .gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ====================================================================
   v1.3.25 — Slightly more whitespace across pages
   Adds calmer vertical rhythm and breathing room without changing layout,
   typography, colors or functionality.
   ==================================================================== */
:root {
    --sl-page-space: clamp(72px, 7vw, 132px);
    --sl-section-space: clamp(84px, 8vw, 152px);
    --sl-section-space-tight: clamp(52px, 5vw, 96px);
}

.page-hero {
    padding-top: clamp(150px, 12vw, 210px) !important;
    padding-bottom: clamp(56px, 6vw, 96px) !important;
}

.page-hero p.lede {
    margin-top: 10px;
}

.intro,
.text-block,
.contact,
.pillars,
.quote-section {
    padding-top: var(--sl-section-space) !important;
    padding-bottom: var(--sl-section-space) !important;
}

.section-head {
    padding-bottom: clamp(42px, 4vw, 72px) !important;
}

.grid-wrap,
.team-grid,
.journal-grid,
.gallery {
    padding-bottom: var(--sl-section-space) !important;
}

.project-body {
    padding-top: var(--sl-section-space-tight) !important;
    padding-bottom: var(--sl-section-space-tight) !important;
}

.project-text p,
.text-block p,
.longform p,
.page-main-content p {
    margin-bottom: 1.15em;
}

.pillars,
.team-grid,
.journal-grid,
.grid,
.gallery {
    gap: clamp(28px, 3vw, 52px) !important;
}

.site-footer {
    padding-top: clamp(56px, 6vw, 96px) !important;
    padding-bottom: clamp(36px, 4vw, 72px) !important;
}

@media (max-width: 1024px) {
    :root {
        --sl-page-space: 72px;
        --sl-section-space: 78px;
        --sl-section-space-tight: 54px;
    }

    .page-hero {
        padding-top: 128px !important;
        padding-bottom: 48px !important;
    }

    .section-head {
        padding-bottom: 34px !important;
    }
}

@media (max-width: 480px) {
    :root {
        --sl-page-space: 56px;
        --sl-section-space: 62px;
        --sl-section-space-tight: 42px;
    }

    .page-hero {
        padding-top: 110px !important;
        padding-bottom: 34px !important;
    }

    .intro,
    .text-block,
    .contact,
    .pillars,
    .quote-section {
        padding-top: var(--sl-section-space) !important;
        padding-bottom: var(--sl-section-space) !important;
    }

    .section-head {
        padding-bottom: 24px !important;
    }

    .grid-wrap,
    .team-grid,
    .journal-grid,
    .gallery {
        padding-bottom: 72px !important;
    }

    .pillars,
    .team-grid,
    .journal-grid,
    .grid,
    .gallery {
        gap: 28px !important;
    }
}


/* v1.3.26 — Team portraits with correct portrait ratio + bio overlay */
.team-grid-extended .person-extended {
    position: relative;
    cursor: pointer;
}
.team-grid-extended .person-extended:focus-visible {
    outline: 2px solid var(--sl-ink);
    outline-offset: 6px;
}
.person-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--sl-light);
}
.person-media img,
.team-grid-extended .person-extended > img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.person-fallback {
    aspect-ratio: 4 / 5;
}
.person-more {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.person-extended:hover .person-more,
.person-extended:focus-visible .person-more {
    color: var(--sl-ink);
}
.team-bio-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: rgba(246, 245, 242, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.team-bio-overlay.is-open { display: block; }
body.team-bio-open { overflow: hidden; }
.team-bio-overlay-inner {
    min-height: 100svh;
    padding: clamp(22px, 3vw, 42px);
    display: grid;
    place-items: center;
}
.team-bio-panel {
    width: min(1180px, 100%);
    max-height: calc(100svh - clamp(44px, 6vw, 84px));
    overflow: auto;
    background: var(--sl-bg);
    border: 1px solid var(--sl-light);
    box-shadow: 0 24px 80px rgba(0,0,0,.12);
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(22px, 4vw, 64px);
}
.team-bio-close {
    position: fixed;
    top: clamp(18px, 2.5vw, 32px);
    right: clamp(18px, 2.5vw, 32px);
    width: 44px;
    height: 44px;
    border: 1px solid var(--sl-light);
    background: var(--sl-bg);
    color: var(--sl-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.team-bio-close:hover { background: var(--sl-ink); color: var(--sl-bg); }
.team-bio-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    object-position: center top;
    background: var(--sl-light);
    display: block;
}
.team-bio-fallback {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    background: var(--sl-light);
    color: var(--sl-slate);
    font-size: clamp(54px, 8vw, 104px);
    text-transform: uppercase;
}
.team-bio-content .eyebrow { margin-bottom: 16px; }
.team-bio-content h2 {
    font-size: clamp(34px, 5.2vw, 72px);
    line-height: .98;
    letter-spacing: -0.045em;
    margin-bottom: 16px;
}
.team-bio-role {
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.35;
    margin-bottom: clamp(24px, 3vw, 42px);
    color: var(--sl-charcoal);
}
.team-bio-text {
    font-size: 17px;
    line-height: 1.62;
    color: var(--sl-charcoal);
    max-width: 64ch;
}
.team-bio-text p { margin-bottom: 1em; }
.team-bio-meta {
    margin-top: clamp(26px, 3vw, 42px);
    padding-top: 22px;
    border-top: 1px solid var(--sl-light);
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 18px;
    font-size: 14px;
    line-height: 1.45;
}
.team-bio-meta dt {
    color: var(--sl-slate);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
}
.team-bio-meta dd { margin: 0; color: var(--sl-charcoal); }
@media (max-width: 900px) {
    .team-bio-panel { grid-template-columns: 1fr; gap: 28px; }
    .team-bio-media { max-width: 420px; }
    .team-bio-content h2 { font-size: clamp(34px, 8vw, 56px); }
}
@media (max-width: 600px) {
    .team-bio-overlay-inner { padding: 0; place-items: stretch; }
    .team-bio-panel {
        width: 100%;
        min-height: 100svh;
        max-height: none;
        border: 0;
        box-shadow: none;
        padding: 72px 18px 36px;
    }
    .team-bio-close { top: 16px; right: 16px; }
    .team-bio-meta { grid-template-columns: 1fr; gap: 3px; }
}

/* v1.3.27 — Team portraits: head-safe rendering, no crop */
.person-media img,
.team-bio-image {
    object-fit: contain;
    object-position: center top;
}
.team-grid-extended .person-extended > img {
    object-fit: contain;
    object-position: center top;
    background: var(--sl-light);
}

/* v1.3.28 — Team portraits: natural image ratio, no grey background frame */
.team-grid-extended .person-media {
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
}
.team-grid-extended .person-media img,
.team-grid-extended .person-extended > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: transparent !important;
    display: block !important;
}
.team-grid-extended .person-fallback {
    aspect-ratio: 4 / 5;
    background: var(--sl-light);
}
.team-bio-media {
    background: transparent !important;
}
.team-bio-image {
    width: 100% !important;
    height: auto !important;
    max-height: min(72svh, 760px);
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: transparent !important;
    display: block !important;
}
@media (max-width: 900px) {
    .team-bio-media { max-width: 520px; }
    .team-bio-image { max-height: none; }
}


/* v1.3.29 — Team Bio: compact overlay + project-style close button */
.team-bio-overlay {
    background: rgba(246, 245, 242, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.team-bio-overlay-inner {
    min-height: 100svh;
    padding: clamp(28px, 5vw, 72px);
    display: grid;
    place-items: center;
}
.team-bio-panel {
    width: min(1040px, calc(100vw - clamp(32px, 7vw, 120px)));
    max-height: min(760px, calc(100svh - clamp(72px, 10vw, 140px)));
    min-height: auto;
    overflow: auto;
    border-radius: 0;
    background: var(--sl-bg);
    border: 1px solid rgba(54, 69, 79, 0.12);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.16);
}
.team-bio-close.sla-overlay-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    display: flex;
}
.team-bio-close.sla-overlay-close svg {
    width: 16px;
    height: 16px;
}
@media (max-width: 900px) {
    .team-bio-panel {
        width: min(720px, calc(100vw - 36px));
        max-height: calc(100svh - 76px);
        padding: 34px 28px 36px;
    }
}
@media (max-width: 600px) {
    .team-bio-overlay-inner {
        padding: 22px 14px;
        place-items: center;
    }
    .team-bio-panel {
        width: calc(100vw - 28px);
        min-height: auto;
        max-height: calc(100svh - 44px);
        border: 1px solid rgba(54, 69, 79, 0.12);
        box-shadow: 0 14px 54px rgba(0, 0, 0, 0.14);
        padding: 56px 18px 28px;
    }
    .team-bio-close.sla-overlay-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }
}

/* v1.3.30 — Team Bio: project selector cards + photo-only trigger */
.person-media-trigger {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: block;
}
.person-media-trigger:focus-visible {
    outline: 2px solid var(--sl-ink);
    outline-offset: 4px;
}
.person-more { display: none !important; }
.team-bio-projects {
    margin-top: clamp(28px, 3.5vw, 48px);
    padding-top: 24px;
    border-top: 1px solid var(--sl-light);
}
.team-bio-projects h3 {
    margin: 0 0 16px;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.team-bio-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.team-bio-project-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 92px;
    border: 1px solid var(--sl-light);
    background: rgba(255,255,255,.36);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.team-bio-project-card:hover,
.team-bio-project-card:focus-visible {
    border-color: var(--sl-ink);
    transform: translateY(-1px);
    outline: none;
}
.team-bio-project-card img {
    width: 100%;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
    display: block;
}
.team-bio-project-card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
}
.team-bio-project-card strong {
    font-size: 15px;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.team-bio-project-card small {
    color: var(--sl-slate);
    font-size: 11px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .08em;
}
@media (max-width: 900px) {
    .team-bio-project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .team-bio-project-card { grid-template-columns: 92px minmax(0, 1fr); }
    .team-bio-project-card img { min-height: 84px; }
}

/* v1.3.31 — Team Bio: narrow Powerhouse-like profile overlay */
.team-bio-panel-profile {
    width: min(900px, calc(100vw - clamp(36px, 8vw, 150px))) !important;
    max-height: min(860px, calc(100svh - clamp(68px, 10vw, 150px))) !important;
    display: block !important;
    padding: clamp(34px, 5vw, 72px) clamp(30px, 5vw, 70px) !important;
    overflow: auto !important;
    background: var(--sl-bg) !important;
}
.team-bio-panel-profile .team-bio-header {
    margin-bottom: clamp(28px, 4vw, 54px);
}
.team-bio-panel-profile .team-bio-position {
    font-size: clamp(16px, 1.45vw, 22px);
    line-height: 1.35;
    color: var(--sl-ink);
    margin-bottom: clamp(18px, 2.5vw, 30px);
    letter-spacing: -0.01em;
}
.team-bio-panel-profile h2 {
    margin: 0;
    font-family: var(--sl-font);
    font-size: clamp(54px, 8.6vw, 118px);
    line-height: .9;
    letter-spacing: -0.06em;
    font-weight: 400;
    color: var(--sl-ink);
}
.team-bio-panel-profile .team-bio-media {
    max-width: none !important;
    margin: 0 0 clamp(42px, 6vw, 76px);
}
.team-bio-panel-profile .team-bio-image {
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: transparent !important;
    display: block !important;
}
.team-bio-panel-profile .team-bio-quote {
    margin: 0 0 clamp(54px, 7vw, 96px);
    max-width: 12.5ch;
    font-family: var(--sl-font);
    font-size: clamp(42px, 6.4vw, 82px);
    line-height: 1.04;
    letter-spacing: -0.055em;
    font-weight: 400;
    color: var(--sl-ink);
}
.team-bio-panel-profile .team-bio-main {
    display: grid;
    grid-template-columns: minmax(150px, .72fr) minmax(0, 1.58fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: start;
    margin-bottom: clamp(48px, 7vw, 96px);
}
.team-bio-panel-profile .team-bio-facts {
    display: grid;
    gap: 22px;
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.35;
}
.team-bio-panel-profile .team-bio-fact strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--sl-ink);
}
.team-bio-panel-profile .team-bio-fact span {
    display: block;
    color: var(--sl-charcoal);
}
.team-bio-panel-profile .team-bio-life h3 {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--sl-slate);
}
.team-bio-panel-profile .team-bio-text {
    max-width: 46ch;
    font-size: clamp(22px, 2.65vw, 34px);
    line-height: 1.38;
    letter-spacing: -0.025em;
    color: var(--sl-ink);
}
.team-bio-panel-profile .team-bio-text p {
    margin: 0 0 1.2em;
}
.team-bio-panel-profile .team-bio-links {
    margin-top: clamp(30px, 4vw, 52px);
    display: flex;
    gap: 28px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.2;
}
.team-bio-panel-profile .team-bio-links a,
.team-bio-panel-profile .team-bio-fact a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.team-bio-panel-profile .team-bio-projects {
    margin-top: 0;
    padding-top: clamp(38px, 6vw, 70px);
    border-top: 1px solid var(--sl-light);
}
.team-bio-panel-profile .team-bio-projects h3 {
    font-family: var(--sl-font);
    font-size: clamp(42px, 6.2vw, 76px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 400;
    margin: 0 0 clamp(28px, 4vw, 50px);
}
.team-bio-panel-profile .team-bio-project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 34px);
}
.team-bio-panel-profile .team-bio-project-card {
    display: block;
    min-height: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    transform: none !important;
}
.team-bio-panel-profile .team-bio-project-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    min-height: 0;
    object-fit: cover;
    margin-bottom: 10px;
}
.team-bio-panel-profile .team-bio-project-card-body {
    display: block;
    padding: 0;
}
.team-bio-panel-profile .team-bio-project-card strong {
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.team-bio-panel-profile .team-bio-project-card small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
@media (max-width: 900px) {
    .team-bio-panel-profile {
        width: min(760px, calc(100vw - 34px)) !important;
        padding: 44px 32px !important;
    }
    .team-bio-panel-profile h2 {
        font-size: clamp(50px, 12vw, 86px);
    }
    .team-bio-panel-profile .team-bio-quote {
        font-size: clamp(38px, 8.8vw, 66px);
        max-width: 13.5ch;
    }
    .team-bio-panel-profile .team-bio-main {
        grid-template-columns: 1fr 1.75fr;
        gap: 34px;
    }
    .team-bio-panel-profile .team-bio-text {
        font-size: clamp(21px, 3.8vw, 30px);
    }
    .team-bio-panel-profile .team-bio-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .team-bio-panel-profile {
        width: calc(100vw - 28px) !important;
        max-height: calc(100svh - 44px) !important;
        min-height: auto !important;
        padding: 56px 20px 34px !important;
    }
    .team-bio-panel-profile .team-bio-position {
        font-size: 16px;
    }
    .team-bio-panel-profile h2 {
        font-size: clamp(44px, 15vw, 64px);
    }
    .team-bio-panel-profile .team-bio-quote {
        font-size: clamp(36px, 12vw, 54px);
        max-width: 12ch;
        margin-bottom: 48px;
    }
    .team-bio-panel-profile .team-bio-main {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 54px;
    }
    .team-bio-panel-profile .team-bio-text {
        max-width: none;
        font-size: clamp(20px, 6.2vw, 26px);
        line-height: 1.42;
    }
    .team-bio-panel-profile .team-bio-project-grid {
        grid-template-columns: 1fr;
    }
}


/* v1.3.32 — Team portrait/portfolio photos: square, left-focused, also in bio overlay */
.team-grid-extended .person-media,
.person-media-trigger {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
}
.team-grid-extended .person-media img,
.team-grid-extended .person-extended > img,
.person-media-trigger img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: left center !important;
    background: transparent !important;
    display: block !important;
}
.team-bio-panel-profile .team-bio-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: transparent !important;
}
.team-bio-panel-profile .team-bio-image,
.team-bio-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: left center !important;
    background: transparent !important;
    display: block !important;
}
.team-grid-extended .person-fallback,
.team-bio-fallback {
    aspect-ratio: 1 / 1 !important;
}


/* v1.3.33 — Team Bio overlay: 40% width, right side, blur background */
.team-bio-overlay {
    background: rgba(246, 245, 242, 0.46) !important;
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
.team-bio-overlay-inner {
    min-height: 100svh;
    padding: 0 !important;
    display: grid;
    align-items: stretch !important;
    justify-items: end !important;
}
.team-bio-slot {
    width: 100%;
    min-height: 100svh;
    display: flex;
    justify-content: flex-end;
}
.team-bio-panel,
.team-bio-panel-profile {
    width: 40vw !important;
    min-width: 520px;
    max-width: 760px;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 0 0 auto !important;
    border: 0 !important;
    border-left: 1px solid rgba(54, 69, 79, 0.10) !important;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.12) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    padding: 88px clamp(24px, 2.6vw, 42px) 42px !important;
    scrollbar-gutter: stable;
}
.team-bio-panel-profile .team-bio-media {
    margin: 0 0 clamp(26px, 3vw, 42px) !important;
}
.team-bio-panel-profile .team-bio-header {
    margin-bottom: clamp(18px, 2vw, 28px) !important;
}
.team-bio-panel-profile .team-bio-position {
    font-size: clamp(15px, 1vw, 18px);
    margin-bottom: 10px;
}
.team-bio-panel-profile h2 {
    font-size: clamp(42px, 4.5vw, 72px);
    line-height: .92;
}
.team-bio-panel-profile .team-bio-quote {
    margin: 0 0 clamp(28px, 3vw, 42px);
    max-width: 14ch;
    font-size: clamp(26px, 2.8vw, 44px);
    line-height: 1.02;
}
.team-bio-panel-profile .team-bio-main {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: clamp(34px, 4vw, 52px) !important;
}
.team-bio-panel-profile .team-bio-facts {
    gap: 16px;
    font-size: 15px;
}
.team-bio-panel-profile .team-bio-life h3 {
    margin-bottom: 12px;
}
.team-bio-panel-profile .team-bio-text {
    max-width: none;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.6;
    letter-spacing: -0.01em;
}
.team-bio-panel-profile .team-bio-links {
    margin-top: 22px;
    font-size: 16px;
    gap: 18px;
}
.team-bio-panel-profile .team-bio-projects {
    padding-top: 28px;
}
.team-bio-panel-profile .team-bio-projects h3 {
    font-size: clamp(28px, 2.8vw, 42px);
    margin-bottom: 22px;
}
.team-bio-panel-profile .team-bio-project-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
}
.team-bio-panel-profile .team-bio-project-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--sl-light);
    background: rgba(255,255,255,.42);
    overflow: hidden;
}
.team-bio-panel-profile .team-bio-project-card img {
    aspect-ratio: 1 / 1;
    height: 100%;
    margin-bottom: 0;
}
.team-bio-panel-profile .team-bio-project-card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}
.team-bio-close.sla-overlay-close {
    top: 18px;
    right: 18px;
}
@media (max-width: 1180px) {
    .team-bio-panel,
    .team-bio-panel-profile {
        width: 48vw !important;
        min-width: 420px;
        padding: 84px 28px 34px !important;
    }
    .team-bio-panel-profile h2 {
        font-size: clamp(38px, 5.2vw, 58px);
    }
}
@media (max-width: 900px) {
    .team-bio-panel,
    .team-bio-panel-profile {
        width: 56vw !important;
        min-width: 360px;
        max-width: none;
    }
    .team-bio-panel-profile .team-bio-quote {
        font-size: clamp(24px, 4vw, 36px);
    }
}
@media (max-width: 680px) {
    .team-bio-overlay-inner {
        justify-items: stretch !important;
    }
    .team-bio-slot {
        justify-content: stretch;
    }
    .team-bio-panel,
    .team-bio-panel-profile {
        width: min(100vw, 100%) !important;
        min-width: 0;
        border-left: 0 !important;
        box-shadow: none !important;
        padding: 78px 20px 28px !important;
    }
    .team-bio-close.sla-overlay-close {
        top: 14px;
        right: 14px;
    }
}


/* v1.3.34 — Circular everywhere + more whitespace in BIO overlay */
.sla-overlay,
.sla-overlay *,
.team-bio-overlay,
.team-bio-overlay *,
.team-bio-panel,
.team-bio-panel * {
    font-family: var(--sl-font) !important;
}
.team-bio-panel,
.team-bio-panel-profile {
    padding: clamp(108px, 8vw, 140px) clamp(34px, 3.8vw, 64px) clamp(64px, 6vw, 96px) !important;
}
.team-bio-panel-profile .team-bio-header {
    margin-bottom: clamp(34px, 4.8vw, 66px) !important;
}
.team-bio-panel-profile .team-bio-position {
    margin-bottom: clamp(16px, 2vw, 28px) !important;
}
.team-bio-panel-profile .team-bio-media {
    margin-bottom: clamp(44px, 5.5vw, 78px) !important;
}
.team-bio-panel-profile .team-bio-quote {
    margin-bottom: clamp(54px, 6.8vw, 92px) !important;
    max-width: 18ch;
}
.team-bio-panel-profile .team-bio-main {
    gap: clamp(44px, 5vw, 72px) !important;
    margin-bottom: clamp(64px, 7vw, 104px) !important;
}
.team-bio-panel-profile .team-bio-facts {
    gap: 24px !important;
}
.team-bio-panel-profile .team-bio-life h3 {
    margin-bottom: 20px !important;
}
.team-bio-panel-profile .team-bio-text p {
    margin-bottom: 1.45em !important;
}
.team-bio-panel-profile .team-bio-links {
    margin-top: clamp(34px, 4vw, 58px) !important;
}
.team-bio-panel-profile .team-bio-projects {
    padding-top: clamp(54px, 6vw, 86px) !important;
}
.team-bio-panel-profile .team-bio-projects h3 {
    margin-bottom: clamp(28px, 3.5vw, 46px) !important;
}
.team-bio-panel-profile .team-bio-project-grid {
    gap: 22px !important;
}
.team-bio-close.sla-overlay-close {
    top: 24px !important;
    right: 24px !important;
}
@media (max-width: 1180px) {
    .team-bio-panel,
    .team-bio-panel-profile {
        padding: 104px 38px 64px !important;
    }
}
@media (max-width: 900px) {
    .team-bio-panel,
    .team-bio-panel-profile {
        padding: 96px 32px 56px !important;
    }
}
@media (max-width: 680px) {
    .team-bio-panel,
    .team-bio-panel-profile {
        padding: 88px 22px 44px !important;
    }
    .team-bio-close.sla-overlay-close {
        top: 16px !important;
        right: 16px !important;
    }
}


/* v1.3.35 — Team page: only name and position; bio only in overlay */
.team-grid-extended .person-bio {
    display: none !important;
}


/* v1.3.38 — BIO drawer opaque, not transparent */
.team-bio-overlay {
    background: rgba(246, 245, 242, 0.38) !important;
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
.team-bio-panel,
.team-bio-panel-profile {
    background: var(--sl-bg, #F6F5F2) !important;
    opacity: 1 !important;
}
.team-bio-panel-profile .team-bio-project-card {
    background: #fff !important;
}
@media (max-width: 680px) {
    .team-bio-overlay {
        background: var(--sl-bg, #F6F5F2) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* v1.3.39 — Projekt-Thumbnails heller: keine starke Abdunkelung mehr */
.card img {
    filter: none !important;
}
.card .meta {
    text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 0 10px rgba(0,0,0,.22);
}
.card .meta h3,
.card .meta-line {
    text-shadow: inherit;
}


/* v1.3.40 — Brighter Cover / Hero Overlays
   Reduces dark gradients on homepage and project cover images while keeping text readable. */
body.has-cover .site-header:not(.is-scrolled)::before {
    background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,0) 100%) !important;
}
body.has-cover .site-header:not(.is-scrolled) .logo,
body.has-cover .site-header:not(.is-scrolled) nav.main a {
    text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 0 10px rgba(0,0,0,.20) !important;
}
body.has-cover .site-header:not(.is-scrolled) .burger span {
    box-shadow: 0 1px 2px rgba(0,0,0,.38) !important;
}
.hero::after,
.hero-scrim {
    background: linear-gradient(180deg, rgba(0,0,0,.015) 0%, rgba(0,0,0,.28) 100%) !important;
}
.project-hero::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.24) 100%) !important;
}
.project-hero h1,
.project-hero .meta-line,
.hero-title,
.hero-subtitle,
.hero-inner {
    text-shadow: 0 1px 3px rgba(0,0,0,.32) !important;
}


/* v1.3.41 — Team BIO overlay closes on outside/backdrop click */
.team-bio-overlay.is-open {
    cursor: default;
}
.team-bio-panel,
.team-bio-panel-profile {
    cursor: auto;
}


/* v1.3.45 — Journal overlay: 75% screen width, aligned right. Team/BIO layout intentionally kept as v1.3.41. */
.journal-post a[data-journal-overlay] { cursor: pointer; }
.journal-post .journal-overlay-button {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-top: 12px;
    border-bottom: 1px solid currentColor;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
}
.journal-post .journal-overlay-button::after {
    content: '→';
    transform: translateY(-.02em);
}
.sla-overlay.is-journal {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 75vw !important;
    max-width: 75vw !important;
    height: 100vh !important;
    transform: translateX(100%);
}
.sla-overlay.is-journal.is-open {
    transform: translateX(0) !important;
}
.sla-overlay.is-journal .sla-overlay-content {
    width: 100%;
    min-height: 100vh;
}
.sla-overlay.is-journal .sla-overlay-nav {
    display: none !important;
}
.sla-overlay.is-journal .sla-overlay-content > .page-hero,
.sla-overlay.is-journal .sla-overlay-content > .grid-wrap,
.sla-overlay.is-journal .sla-overlay-content > .longform {
    width: 100%;
    max-width: calc(100% - clamp(44px, 7vw, 120px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.sla-overlay.is-journal .sla-overlay-content > .page-hero {
    padding-top: clamp(88px, 9vw, 150px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sla-overlay.is-journal .sla-overlay-content > .page-hero h1 {
    max-width: 16ch !important;
    font-size: clamp(46px, 6.2vw, 108px) !important;
    line-height: .92 !important;
    letter-spacing: -.052em !important;
}
.sla-overlay.is-journal .sla-overlay-content > .grid-wrap,
.sla-overlay.is-journal .sla-overlay-content > .longform {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sla-overlay.is-journal .sla-overlay-content > .grid-wrap img {
    width: 100% !important;
    max-height: min(64vh, 760px) !important;
    object-fit: cover !important;
}
.sla-overlay.is-journal .sla-overlay-content > .longform {
    padding-bottom: clamp(72px, 9vw, 132px) !important;
}
.sla-overlay.is-journal .sla-overlay-content > .longform > * {
    max-width: min(82ch, 100%) !important;
}
.sla-overlay.is-journal .sla-overlay-content > .longform > figure,
.sla-overlay.is-journal .sla-overlay-content > .longform > .wp-block-image,
.sla-overlay.is-journal .sla-overlay-content > .longform > .wp-block-gallery,
.sla-overlay.is-journal .sla-overlay-content > .longform > .alignwide,
.sla-overlay.is-journal .sla-overlay-content > .longform > .alignfull {
    max-width: 100% !important;
}
.sla-overlay.is-journal .sla-overlay-content > .longform p,
.sla-overlay.is-journal .sla-overlay-content > .longform li {
    font-size: clamp(18px, 1.28vw, 23px);
    line-height: 1.55;
}
.sla-overlay.is-journal .journal-inline-article {
    width: calc(100% - clamp(44px, 7vw, 120px));
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(88px, 9vw, 150px) 0 clamp(72px, 9vw, 132px) !important;
}
.sla-overlay.is-journal .journal-inline-article .eyebrow {
    margin-bottom: 18px;
}
.sla-overlay.is-journal .journal-inline-article h1 {
    max-width: 16ch !important;
    margin: 0 0 clamp(24px, 4vw, 48px);
    font-size: clamp(46px, 6.2vw, 108px) !important;
    line-height: .92 !important;
    letter-spacing: -.052em !important;
}
.sla-overlay.is-journal .journal-inline-article img {
    width: 100%;
    max-height: min(64vh, 760px);
    object-fit: cover;
    margin: 0 0 clamp(28px, 4vw, 56px);
}
.sla-overlay.is-journal .journal-inline-article p {
    max-width: min(82ch, 100%) !important;
    font-size: clamp(18px, 1.28vw, 23px);
    line-height: 1.55;
}
@media (max-width: 900px) {
    .sla-overlay.is-journal {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .sla-overlay.is-journal .sla-overlay-content > .page-hero,
    .sla-overlay.is-journal .sla-overlay-content > .grid-wrap,
    .sla-overlay.is-journal .sla-overlay-content > .longform,
    .sla-overlay.is-journal .journal-inline-article {
        max-width: calc(100vw - 36px) !important;
        width: calc(100vw - 36px) !important;
    }
    .sla-overlay.is-journal .sla-overlay-content > .page-hero h1,
    .sla-overlay.is-journal .journal-inline-article h1 {
        font-size: clamp(38px, 12vw, 58px) !important;
    }
}


/* v1.3.47 — Team/BIO overlay: same right-side swipe-in behavior as Journal. */
.team-bio-overlay {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.42s ease, background 0.42s ease;
}
.team-bio-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.team-bio-overlay-inner {
    min-height: 100svh;
    padding: 0 !important;
    display: grid !important;
    align-items: stretch !important;
    justify-items: end !important;
}
.team-bio-slot {
    min-height: 100svh;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    overflow: hidden;
}
.team-bio-panel,
.team-bio-panel-profile {
    transform: translateX(100%);
    transition: transform 0.65s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}
.team-bio-overlay.is-open .team-bio-panel,
.team-bio-overlay.is-open .team-bio-panel-profile {
    transform: translateX(0);
}
.team-bio-close.sla-overlay-close {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.team-bio-overlay.is-open .team-bio-close.sla-overlay-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
@media (max-width: 680px) {
    .team-bio-slot {
        justify-content: stretch !important;
    }
    .team-bio-panel,
    .team-bio-panel-profile {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .team-bio-overlay,
    .team-bio-panel,
    .team-bio-panel-profile,
    .team-bio-close.sla-overlay-close {
        transition-duration: 0.15s !important;
    }
}


/* v1.3.49 — Team/BIO drawer animation like Journal, without start-page blur.
   Keeps the existing Team page and BIO drawer layout; only fixes the motion layer. */
.team-bio-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background: rgba(26, 31, 35, 0) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.5s ease !important;
}
.team-bio-overlay.is-open {
    pointer-events: auto !important;
    background: rgba(26, 31, 35, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.team-bio-panel,
.team-bio-panel-profile {
    transform: translateX(100%) !important;
    transition: transform 0.65s cubic-bezier(0.77, 0, 0.175, 1) !important;
    will-change: transform;
}
.team-bio-overlay.is-open .team-bio-panel,
.team-bio-overlay.is-open .team-bio-panel-profile {
    transform: translateX(0) !important;
}
.team-bio-close.sla-overlay-close {
    transition: opacity 0.3s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    .team-bio-panel,
    .team-bio-panel-profile,
    .team-bio-close.sla-overlay-close {
        transition-duration: 0.15s !important;
    }
}


/* v1.3.52 — Büro video band, compact spacing */
.sla-office-video {
    width: min(80vw, 1400px);
    margin: clamp(24px, 4.5vw, 64px) 0 clamp(32px, 5.5vw, 78px) auto;
    padding-right: clamp(18px, 4vw, 72px);
}
.sla-office-video__frame {
    position: relative;
    overflow: hidden;
    border-radius: clamp(18px, 2vw, 28px);
    background: #111;
}
.sla-office-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111;
}
.sla-office-video__caption {
    max-width: 760px;
    margin: 14px 0 0 auto;
    color: var(--sl-charcoal);
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.55;
    text-align: right;
}
@media (max-width: 900px) {
    .sla-office-video {
        width: auto;
        margin: 24px 0 42px;
        padding: 0 20px;
    }
    .sla-office-video__caption {
        margin-left: 0;
        text-align: left;
    }
}
@media (max-width: 560px) {
    .sla-office-video {
        padding: 0 16px;
    }
    .sla-office-video__frame {
        border-radius: 18px;
    }
    .sla-office-video video {
        aspect-ratio: 4 / 3;
    }
}


/* v1.3.54 — BIO overlay mobile/tablet clipping fix
   The BIO drawer must own the scrolling on small viewports.
   Avoid nested clipping from the slot and use dynamic viewport units where supported. */
.team-bio-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}
.team-bio-overlay-inner,
.team-bio-slot {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
}
.team-bio-slot {
    overflow: visible !important;
}
.team-bio-panel,
.team-bio-panel-profile {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
}
@supports not (height: 100dvh) {
    .team-bio-overlay,
    .team-bio-overlay-inner,
    .team-bio-slot,
    .team-bio-panel,
    .team-bio-panel-profile {
        height: 100svh !important;
        max-height: 100svh !important;
    }
}
@media (max-width: 900px) {
    .team-bio-overlay-inner,
    .team-bio-slot {
        align-items: stretch !important;
        justify-items: stretch !important;
    }
    .team-bio-panel,
    .team-bio-panel-profile {
        width: min(100vw, 100%) !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding-top: max(82px, calc(env(safe-area-inset-top) + 72px)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
        padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px)) !important;
        padding-left: max(20px, env(safe-area-inset-left)) !important;
    }
}
@media (max-width: 680px) {
    .team-bio-panel,
    .team-bio-panel-profile {
        width: 100vw !important;
        max-width: 100vw !important;
        border-left: 0 !important;
        box-shadow: none !important;
    }
}


/* v1.3.55 — Project thumbnails: slightly darker scrim for better text contrast
   Only affects grid/project thumbnail cards, not homepage/project hero covers. */
.card .scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 34%, rgba(0,0,0,.18) 66%, rgba(0,0,0,.38) 100%) !important;
}
.card:hover .scrim,
.card:focus-visible .scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.04) 30%, rgba(0,0,0,.24) 64%, rgba(0,0,0,.48) 100%) !important;
}
.card .meta {
    text-shadow: 0 1px 3px rgba(0,0,0,.62), 0 0 14px rgba(0,0,0,.38) !important;
}
.card .meta h3,
.card .meta-line {
    text-shadow: inherit !important;
}


/* ====================================================================
   v1.3.56 — Team/Portrait grid columns
   Wunsch: Desktop normal 4 Spalten, bis 1280px 3 Spalten,
   bis 760px 2 Spalten, ab 1440px weiterhin 4 Spalten.
   Finaler Override am Dateiende, damit ältere Grid-Regeln nicht gewinnen.
   ==================================================================== */
body .team-grid,
body .team-grid-extended {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1280px) {
    body .team-grid,
    body .team-grid-extended {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body .team-grid,
    body .team-grid-extended {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 420px) {
    body .team-grid,
    body .team-grid-extended {
        gap: 14px !important;
    }
}


/* ====================================================================
   v1.3.59 — Projektliste Grid columns
   Über 1600px: 4 Spalten.
   Bis 1600px: 3 Spalten, bis 1024px: 2 Spalten, bis 760px: 1 Spalte.
   Gezielt auf #projectGrid, damit Journal/Team/andere .grid-Layouts unverändert bleiben.
   ==================================================================== */
body #projectGrid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1600px) {
    body #projectGrid.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    body #projectGrid.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body #projectGrid.grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1180px) {
    body #projectGrid.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1024px) {
    body #projectGrid.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body #projectGrid.grid {
        grid-template-columns: 1fr !important;
    }
}


/* Version 1.3.62 — Journal: only published posts + more vertical spacing */
.journal-grid {
    row-gap: clamp(44px, 5vw, 72px) !important;
    column-gap: clamp(28px, 3vw, 52px) !important;
}


/* ====================================================================
   v1.3.64 — Projektthumbs: Meta = Ort · Datum/Jahr · Status
   Verhindert, dass lange Ort/Kategorie/Status-Texte die Projektkarten überladen.
   Betrifft nur die sichtbare Thumbnail-Meta-Zeile, nicht SEO-Meta-Tags.
   ==================================================================== */
.grid .card .meta-line {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.grid .card .meta-line span {
    display: inline !important;
}

.grid .card .meta h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Kontaktformular v1.3.66: schlank, DSGVO-Checkbox, Honeypot */
.sla-contact-form {
    width: 100%;
    max-width: 760px;
}
.sla-contact-form p { margin: 0 0 18px; }
.sla-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.sla-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.sla-contact-form input[type="text"],
.sla-contact-form input[type="email"],
.sla-contact-form textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--sl-light);
    border-radius: 0;
    background: transparent;
    color: var(--sl-ink);
    font: inherit;
    padding: 12px 14px;
    outline: none;
}
.sla-contact-form textarea {
    min-height: 160px;
    resize: vertical;
}
.sla-contact-form input:focus,
.sla-contact-form textarea:focus {
    border-color: var(--sl-ink);
}
.sla-privacy-check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sl-slate);
}
.sla-privacy-check input { margin-top: 2px; }
.sla-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.sla-form-notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--sl-light);
    font-size: 15px;
    line-height: 1.45;
}
.sla-form-notice.is-success { border-color: rgba(0,0,0,.25); }
.sla-form-notice.is-error { border-color: var(--sl-ink); }
@media (max-width: 760px) {
    .sla-form-grid { grid-template-columns: 1fr; gap: 0; }
    .sla-contact-form { max-width: none; }
}

/* SEO landing page additions — v1.3.67 =========================== */
.seo-footer-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    padding-top: 24px;
    margin-top: 8px;
    border-top: 1px solid var(--sl-light);
}
.seo-footer-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
.seo-footer-group h2 {
    width: 100%;
    margin: 0 0 2px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sl-slate);
    font-weight: 600;
}
.seo-footer-group a { font-size: 13px; color: var(--sl-slate); }
.seo-footer-group a:hover { color: var(--sl-ink); }

.landing-faq { padding: 72px 0; background: var(--sl-paper); }
.landing-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.landing-faq-item {
    border-top: 1px solid var(--sl-light);
    padding-top: 18px;
}
.landing-faq-item h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.35; }
.landing-faq-item p { margin: 0; color: var(--sl-slate); font-size: 15px; line-height: 1.65; }
.project-topic-links {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--sl-light);
}
/* v1.4.9: !important + doppelte Klassen-Spezifität, damit das Label auch im
   Overlay auf der Startseite gewinnt — dort matcht sonst die globale
   Typo-Regel ".home section h2" (font-size !important, Zeilen ~3308/3361/3414)
   auf <section class="project-topic-links"><h2> und bläst das Label auf H2-Größe auf. */
.project-topic-links h2,
.home section.project-topic-links h2 {
    margin: 0 0 12px;
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.project-topic-links nav { display: flex; flex-wrap: wrap; gap: 10px; }
.project-topic-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--sl-light);
    border-radius: 999px;
    color: var(--sl-slate);
    font-size: 13px;
    line-height: 1.2;
    background: rgba(255,255,255,.52);
}
.project-topic-links a:hover { color: var(--sl-ink); border-color: var(--sl-slate); }

@media (max-width: 760px) {
    .seo-footer-links,
    .landing-faq-grid { grid-template-columns: 1fr; }
    .seo-footer-group { gap: 8px 14px; }
}


/* SEO landing pages UI cleanup — v1.3.68 =========================
   Landingpages benutzen bewusst die bestehenden Page-/Grid-/Card-
   Komponenten des Themes. Keine eigene Fremdoptik, keine andere
   Hintergrundfarbe, keine übergroßen Landingpage-Typografien. */
.seo-landing-page {
    background: transparent !important;
}
.seo-landing-page .page-hero,
.seo-landing-page .landing-hero {
    padding: 140px 32px 40px !important;
    max-width: var(--sl-maxw) !important;
    margin: 0 auto !important;
}
.seo-landing-page .page-hero h1,
.seo-landing-page .landing-hero h1 {
    font-size: clamp(36px, 4.5vw, 64px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    max-width: 18ch !important;
    margin: 0 0 18px !important;
}
.seo-landing-page .page-hero p.lede,
.seo-landing-page .landing-hero p.lede {
    font-size: clamp(18px, 1.5vw, 22px) !important;
    line-height: 1.6 !important;
    max-width: 62ch !important;
    color: var(--sl-charcoal) !important;
}
.seo-landing-page .page-hero .eyebrow,
.seo-landing-page .landing-hero .eyebrow {
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    color: var(--sl-slate) !important;
    font-weight: 500 !important;
    margin-bottom: 14px !important;
}
.landing-content {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 40px 32px 88px;
}
.landing-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.landing-text-block {
    max-width: 760px;
    padding: 0 0 32px;
    margin: 0 0 32px;
    border-bottom: 1px solid var(--sl-light);
}
.landing-text-block:last-child { margin-bottom: 0; }
.landing-text-block h2,
.landing-aside h2,
.landing-faq h2,
.landing-cta h2 {
    font-size: clamp(24px, 2.4vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 14px !important;
    color: var(--sl-ink) !important;
}
.landing-text-block p,
.landing-faq-item p,
.landing-cta p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: var(--sl-charcoal) !important;
}
.landing-aside {
    position: sticky;
    top: 96px;
    padding: 24px;
    border: 1px solid var(--sl-light);
    border-radius: 18px;
    background: var(--sl-off);
}
.landing-aside ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 16px 0 0;
}
.landing-aside li {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid var(--sl-light);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--sl-charcoal);
    background: transparent;
}
.landing-projects {
    padding: 0 0 56px;
}
.landing-project-wrap {
    padding-bottom: 40px;
}
.landing-project-grid.grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sl-gap);
    margin-top: 0;
}
.landing-faq {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 32px 32px 80px;
    background: transparent;
}
.landing-faq .section-head {
    padding-inline: 0;
}
.landing-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.landing-faq-item {
    padding: 20px 0 0;
    border-top: 1px solid var(--sl-light);
}
.landing-faq-item h3 {
    font-size: clamp(18px, 1.6vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 0 0 10px !important;
}
.landing-cta {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 0 32px 96px;
}
.landing-cta-inner {
    border-top: 1px solid var(--sl-light);
    padding-top: 32px;
    max-width: 760px;
}
.landing-cta a {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--sl-charcoal);
    border-bottom: 1px solid var(--sl-charcoal);
    letter-spacing: 0;
    text-transform: none;
}
.seo-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
    .landing-content-grid { grid-template-columns: 1fr; }
    .landing-aside { position: static; }
    .landing-project-grid.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .seo-landing-page .page-hero,
    .seo-landing-page .landing-hero { padding: 96px 18px 24px !important; }
    .seo-landing-page .page-hero h1,
    .seo-landing-page .landing-hero h1 { font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 12px !important; }
    .seo-landing-page .page-hero p.lede,
    .seo-landing-page .landing-hero p.lede { font-size: 16px !important; line-height: 1.5 !important; }
    .landing-content, .landing-faq, .landing-cta { padding-left: 18px; padding-right: 18px; }
    .landing-project-grid.grid, .landing-faq-grid { grid-template-columns: 1fr; }
    .seo-footer-links { grid-template-columns: 1fr; }
}


/* ====================================================================
   v1.3.70 — SEO-/Leistungs-/Standortseiten nutzen exakt das
   bestehende Page-Template-Typografiesystem
   - keine eigene Landingpage-Hero-Typografie mehr
   - Hero, Kicker und Lede erben die Werte von Büro/Team
   - Zusatzklassen steuern nur Layout/Cards, nicht die Haupttypografie
   ==================================================================== */

.seo-landing-page {
    background: var(--sl-bg) !important;
}

.seo-landing-page > .page-hero {
    max-width: var(--sl-maxw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(150px, 12vw, 210px) !important;
    padding-right: 32px !important;
    padding-bottom: clamp(56px, 6vw, 96px) !important;
    padding-left: 32px !important;
}

.seo-landing-page > .page-hero .eyebrow {
    font-size: var(--ph-meta) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    color: var(--sl-slate) !important;
    margin: 0 0 18px !important;
}

.seo-landing-page > .page-hero h1 {
    font-size: var(--ph-h1) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    font-weight: 500 !important;
    max-width: 18ch !important;
    margin: 0 !important;
}

.seo-landing-page > .page-hero p.lede {
    font-size: var(--ph-lede) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    max-width: 54ch !important;
    margin-top: 18px !important;
}

.seo-landing-page .landing-text-block h2 {
    font-size: var(--ph-h3) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
    font-weight: 500 !important;
    margin: 0 0 12px !important;
}

.seo-landing-page .landing-text-block p,
.seo-landing-page .landing-faq-item p,
.seo-landing-page .landing-cta p {
    font-size: var(--ph-body) !important;
    line-height: var(--ph-body-line) !important;
    letter-spacing: -0.006em !important;
}

.seo-landing-page .landing-aside h2,
.seo-landing-page .landing-faq-item h3 {
    font-size: var(--ph-h3) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
    font-weight: 500 !important;
}

.seo-landing-page .landing-aside li {
    font-size: var(--ph-body) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.006em !important;
}

.seo-landing-page .section-head h2,
.seo-landing-page .landing-faq h2,
.seo-landing-page .landing-cta h2 {
    font-size: var(--ph-h2) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    font-weight: 500 !important;
}

.seo-landing-page .landing-project-grid.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sl-gap);
}

.seo-landing-page .landing-project-grid .card .meta h3 {
    font-size: var(--ph-card-title) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
}

.seo-landing-page .landing-project-grid .card .meta-line,
.seo-landing-page .landing-project-grid .card .meta-line span {
    font-size: var(--ph-meta) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
}

@media (min-width: 1440px) {
    .seo-landing-page > .page-hero,
    .seo-landing-page .landing-content,
    .seo-landing-page .landing-projects,
    .seo-landing-page .landing-faq,
    .seo-landing-page .landing-cta {
        max-width: var(--sl-maxw) !important;
        width: 100% !important;
    }
}

@media (max-width: 1024px) {
    .seo-landing-page > .page-hero {
        padding-top: 128px !important;
        padding-right: 24px !important;
        padding-bottom: 48px !important;
        padding-left: 24px !important;
    }
    .seo-landing-page > .page-hero h1 {
        max-width: 18ch !important;
    }
    .seo-landing-page .landing-content-grid {
        grid-template-columns: 1fr !important;
    }
    .seo-landing-page .landing-aside {
        position: static !important;
    }
    .seo-landing-page .landing-project-grid.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .seo-landing-page > .page-hero {
        padding-top: 110px !important;
        padding-right: 18px !important;
        padding-bottom: 34px !important;
        padding-left: 18px !important;
    }
    .seo-landing-page > .page-hero .eyebrow {
        margin-bottom: 14px !important;
    }
    .seo-landing-page > .page-hero h1 {
        max-width: 11ch !important;
    }
    .seo-landing-page > .page-hero p.lede {
        max-width: 31ch !important;
    }
    .seo-landing-page .landing-content,
    .seo-landing-page .landing-faq,
    .seo-landing-page .landing-cta {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .seo-landing-page .landing-project-grid.grid,
    .seo-landing-page .landing-faq-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================================================
   v1.3.71 — SEO-Seiten: vertikale Hero-Position exakt wie Büro/Team
   Ursache der Abweichung war das zusätzliche padding-top auf main.site-main
   sowie eigene Margin-Werte im Landingpage-Hero. Diese Ebene gleicht die
   neuen Leistungs-/Standortseiten an das bestehende Page-Hero-System an.
   ==================================================================== */

body:not(.has-cover) main.site-main.seo-landing-page {
    padding-top: 0 !important;
}

.seo-landing-page > .page-hero {
    padding-top: clamp(150px, 12vw, 210px) !important;
    padding-right: 32px !important;
    padding-bottom: clamp(56px, 6vw, 96px) !important;
    padding-left: 32px !important;
    max-width: var(--sl-maxw) !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.seo-landing-page > .page-hero .eyebrow {
    font-size: var(--ph-meta) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
    color: var(--sl-slate) !important;
    font-weight: 500 !important;
    margin: 0 0 14px !important;
}

.seo-landing-page > .page-hero h1 {
    font-size: var(--ph-h1) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    font-weight: 500 !important;
    max-width: 18ch !important;
    margin: 0 0 18px !important;
}

.seo-landing-page > .page-hero p.lede {
    font-size: var(--ph-lede) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
    color: var(--sl-charcoal) !important;
    max-width: 54ch !important;
    margin: 10px 0 0 !important;
}

@media (min-width: 721px) and (max-width: 1024px) {
    .seo-landing-page > .page-hero {
        padding-top: 118px !important;
        padding-right: 24px !important;
        padding-bottom: 48px !important;
        padding-left: 24px !important;
    }
    .seo-landing-page > .page-hero h1 {
        max-width: 12ch !important;
    }
    .seo-landing-page > .page-hero p.lede {
        max-width: 32ch !important;
    }
}

@media (max-width: 720px) {
    .seo-landing-page > .page-hero {
        padding: 110px 18px 34px !important;
    }
    .seo-landing-page > .page-hero .eyebrow {
        margin-bottom: 14px !important;
    }
    .seo-landing-page > .page-hero h1 {
        max-width: 11ch !important;
        margin-bottom: 18px !important;
    }
    .seo-landing-page > .page-hero p.lede {
        max-width: 31ch !important;
        margin-top: 10px !important;
    }
}


/* ====================================================================
   v1.3.72 — Footer kompakter und sauberer ausgerichtet
   - kompaktere vertikale Abstände
   - Standorte rechtsbündig auf Desktop
   - Leistungen linksbündig
   - mobile weiterhin sauber gestapelt
   ==================================================================== */
.site-footer {
    padding-top: clamp(32px, 3.4vw, 52px) !important;
    padding-bottom: clamp(30px, 3vw, 44px) !important;
}
.site-footer .foot-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 22px 40px !important;
}
.site-footer .foot-copyright {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
}
.site-footer .foot-links {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
}
.site-footer .seo-footer-links {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr);
    gap: 16px 48px;
    padding-top: 20px;
    margin-top: 6px;
    border-top: 1px solid var(--sl-light);
}
.site-footer .seo-footer-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px 18px;
}
.site-footer .seo-footer-group h2 {
    width: 100%;
    margin: 0 0 2px;
}
.site-footer .seo-footer-group--leistungen {
    justify-content: flex-start;
    text-align: left;
}
.site-footer .seo-footer-group--standorte {
    justify-content: flex-end;
    text-align: right;
}
.site-footer .seo-footer-group--standorte h2 {
    text-align: right;
}
.site-footer .seo-footer-group a {
    line-height: 1.35;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .site-footer .foot-inner {
        grid-template-columns: 1fr;
        gap: 18px !important;
    }
    .site-footer .foot-copyright,
    .site-footer .foot-links,
    .site-footer .seo-footer-links {
        grid-column: 1;
        grid-row: auto;
    }
    .site-footer .foot-links {
        justify-content: flex-start;
    }
    .site-footer .seo-footer-links {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .site-footer .seo-footer-group--standorte,
    .site-footer .seo-footer-group--standorte h2 {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .site-footer {
        padding: 28px 18px 30px !important;
    }
    .site-footer .foot-inner {
        gap: 16px !important;
    }
    .site-footer .seo-footer-links {
        padding-top: 16px;
        margin-top: 2px;
    }
    .site-footer .seo-footer-group {
        gap: 7px 14px;
    }
    .site-footer .seo-footer-group a {
        white-space: normal;
    }
}


/* ====================================================================
   v1.3.73 — Footer unten/ohne Trennlinien + Projektbereich bündig
   - rechtliche Fußzeile als eine kompakte Zeile ganz unten
   - keine Trennlinien innerhalb der Fußzeile
   - Landingpage-Projektkopf und Projekt-Thumbs mit restlichem Seitenrand bündig
   ==================================================================== */
.site-footer {
    border-top: 0 !important;
    padding-top: clamp(22px, 2.4vw, 36px) !important;
    padding-bottom: clamp(18px, 2.2vw, 30px) !important;
}
.site-footer .foot-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(18px, 2.2vw, 30px) !important;
    align-items: stretch !important;
}
.site-footer .foot-copyright,
.site-footer .foot-links {
    display: none !important;
}
.site-footer .seo-footer-links {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr) !important;
    gap: 18px 48px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}
.site-footer .seo-footer-group--leistungen {
    justify-content: flex-start !important;
    text-align: left !important;
}
.site-footer .seo-footer-group--standorte {
    justify-content: flex-end !important;
    text-align: right !important;
}
.site-footer .seo-footer-group--standorte h2 {
    text-align: right !important;
}
.site-footer .foot-bottom {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px 24px !important;
    width: 100% !important;
    margin-top: clamp(14px, 1.6vw, 22px) !important;
    padding: 0 !important;
    border-top: 1px solid rgba(16, 24, 32, 0.14) !important;
    padding-top: clamp(10px, 1.15vw, 16px) !important;
    color: var(--sl-slate) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.site-footer .foot-bottom a {
    color: var(--sl-slate) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    border-bottom: 0 !important;
}
.site-footer .foot-bottom a:hover {
    color: var(--sl-ink) !important;
}

.seo-landing-page .landing-projects .section-head,
.seo-landing-page .landing-projects .grid-wrap,
.seo-landing-page .landing-projects .landing-project-wrap {
    max-width: var(--sl-maxw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}
.seo-landing-page .landing-projects .section-head {
    padding-top: 0 !important;
}
.seo-landing-page .landing-projects .landing-project-wrap {
    padding-top: 0 !important;
    padding-bottom: clamp(64px, 7vw, 112px) !important;
}

@media (max-width: 1024px) {
    .site-footer .seo-footer-links {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .site-footer .seo-footer-group--standorte,
    .site-footer .seo-footer-group--standorte h2 {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .site-footer .foot-bottom {
        justify-content: flex-start !important;
    }
}
@media (max-width: 760px) {
    .seo-landing-page .landing-projects .section-head,
    .seo-landing-page .landing-projects .grid-wrap,
    .seo-landing-page .landing-projects .landing-project-wrap {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .site-footer .foot-bottom {
        display: block !important;
    }
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a {
        display: inline !important;
        margin-right: 12px !important;
    }
}


/* ====================================================================
   v1.3.74 — Standortseiten: Projektzuordnung nach Ort + Projektbereich bündig
   - Standortseiten wählen 6 zufällige Projekte ausschließlich über das Feld Ort
   - Projektbereich erhält denselben Seitenrand wie Page-Hero/Büro/Team, auch auf sehr großen Screens
   ==================================================================== */
.seo-landing-page .landing-projects {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.seo-landing-page .landing-projects > .section-head,
.seo-landing-page .landing-projects > .landing-project-wrap {
    max-width: var(--sl-maxw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}
.seo-landing-page .landing-projects > .section-head {
    padding-top: 0 !important;
    padding-bottom: clamp(42px, 4vw, 72px) !important;
    margin-bottom: 48px !important;
}
.seo-landing-page .landing-projects > .landing-project-wrap {
    padding-top: 0 !important;
    padding-bottom: var(--sl-section-space) !important;
}
@media (max-width: 760px) {
    .seo-landing-page .landing-projects > .section-head,
    .seo-landing-page .landing-projects > .landing-project-wrap {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* Version 1.3.75 — FAQ: remove duplicate separator line below section header */
.seo-landing-page .landing-faq-grid .landing-faq-item:nth-child(-n+2) {
    border-top: none;
    padding-top: 0;
}
@media (max-width: 760px) {
    .seo-landing-page .landing-faq-grid .landing-faq-item:nth-child(2) {
        border-top: 1px solid var(--sl-light);
        padding-top: 20px;
    }
}

/* ====================================================================
   v1.3.77 — Footer: Seitenrand wie Content + vertikal kompakter
   - Footer-Inhalt nutzt dieselbe Max-Width/Padding-Logik wie Page-Hero
   - dadurch bündig auch auf sehr großen Browserfenstern
   - reduzierte vertikale Abstände innerhalb der Fußzeile
   ==================================================================== */
.site-footer {
    padding-top: clamp(16px, 1.8vw, 28px) !important;
    padding-right: 0 !important;
    padding-bottom: clamp(14px, 1.6vw, 24px) !important;
    padding-left: 0 !important;
}
.site-footer .foot-inner {
    max-width: var(--sl-maxw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
}
.site-footer .seo-footer-links {
    gap: 10px 40px !important;
}
.site-footer .seo-footer-group {
    gap: 5px 16px !important;
}
.site-footer .seo-footer-group h2 {
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
}
.site-footer .seo-footer-group a {
    line-height: 1.25 !important;
}
.site-footer .foot-bottom {
    margin-top: clamp(8px, 1vw, 14px) !important;
    gap: 5px 18px !important;
    line-height: 1.25 !important;
}

@media (max-width: 760px) {
    .site-footer {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
    .site-footer .foot-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: 12px !important;
    }
    .site-footer .seo-footer-links {
        gap: 12px !important;
    }
    .site-footer .seo-footer-group {
        gap: 5px 12px !important;
    }
    .site-footer .foot-bottom {
        margin-top: 8px !important;
    }
}


/* ====================================================================
   v1.3.79 — Footer: Smartphone/Tablet deutlich kompakter + Instagram
   ==================================================================== */
@media (max-width: 1024px) {
    .site-footer {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .site-footer .foot-inner {
        gap: 8px !important;
    }
    .site-footer .seo-footer-links {
        gap: 7px !important;
    }
    .site-footer .seo-footer-group {
        gap: 3px 12px !important;
        align-items: baseline !important;
    }
    .site-footer .seo-footer-group h2 {
        font-size: 12px !important;
        line-height: 16px !important;
        margin: 0 !important;
    }
    .site-footer .seo-footer-group a {
        font-size: 13px !important;
        line-height: 17px !important;
    }
    .site-footer .foot-bottom {
        margin-top: 6px !important;
        padding-top: 7px !important;
        gap: 2px 12px !important;
        font-size: 12px !important;
        line-height: 17px !important;
    }
}
@media (max-width: 760px) {
    .site-footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .site-footer .foot-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: 7px !important;
    }
    .site-footer .seo-footer-links {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .site-footer .seo-footer-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px 10px !important;
    }
    .site-footer .seo-footer-group h2 {
        width: auto !important;
        margin-right: 2px !important;
    }
    .site-footer .seo-footer-group a {
        font-size: 12.5px !important;
        line-height: 16px !important;
    }
    .site-footer .foot-bottom {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 10px !important;
        margin-top: 5px !important;
        padding-top: 6px !important;
        font-size: 11.5px !important;
        line-height: 16px !important;
    }
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a {
        display: inline !important;
        margin-right: 0 !important;
    }
}


/* ====================================================================
   v1.3.80 — Footer Mobile wirklich kompakt
   - hebt die globale 44px Touch-Target-Regel im Footer auf
   - reduziert Zeilenhoehen/Abstaende auf Smartphone und Tablet deutlich
   ==================================================================== */
@media (max-width: 1024px) {
    .site-footer {
        padding-top: 6px !important;
        padding-bottom: 8px !important;
    }
    .site-footer .foot-inner {
        gap: 4px !important;
    }
    .site-footer a,
    .site-footer .seo-footer-group a,
    .site-footer .foot-bottom a {
        min-height: 0 !important;
        height: auto !important;
        display: inline !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .site-footer .seo-footer-links {
        gap: 4px !important;
        line-height: 1.15 !important;
    }
    .site-footer .seo-footer-group {
        gap: 0 10px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }
    .site-footer .seo-footer-group h2 {
        width: auto !important;
        font-size: 11px !important;
        line-height: 14px !important;
        margin: 0 2px 0 0 !important;
    }
    .site-footer .seo-footer-group a {
        font-size: 12px !important;
        line-height: 14px !important;
    }
    .site-footer .foot-bottom {
        margin-top: 4px !important;
        padding-top: 5px !important;
        gap: 0 9px !important;
        font-size: 11px !important;
        line-height: 14px !important;
    }
}
@media (max-width: 760px) {
    .site-footer {
        padding-top: 4px !important;
        padding-bottom: 8px !important;
    }
    .site-footer .foot-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: 3px !important;
    }
    .site-footer .seo-footer-links {
        display: block !important;
    }
    .site-footer .seo-footer-group {
        display: block !important;
        margin: 0 0 5px !important;
    }
    .site-footer .seo-footer-group h2,
    .site-footer .seo-footer-group a {
        display: inline !important;
        vertical-align: baseline !important;
    }
    .site-footer .seo-footer-group h2 {
        margin-right: 8px !important;
    }
    .site-footer .seo-footer-group a {
        margin-right: 10px !important;
        white-space: normal !important;
    }
    .site-footer .foot-bottom {
        display: block !important;
        margin-top: 2px !important;
        padding-top: 5px !important;
        font-size: 10.8px !important;
        line-height: 13.5px !important;
    }
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a {
        display: inline !important;
        margin-right: 9px !important;
    }
}


/* ====================================================================
   Version 1.3.81 — Journal nutzt große Bildschirmbreiten besser
   - Journal-Übersicht bleibt auf sehr breiten Screens voll nutzbar.
   - Einzelne Journal-Beiträge bekommen breite Medien/Blöcke, Text bleibt lesbar.
   - Journal-Overlay wird auf großen Screens breiter, bleibt rechts ausfahrend.
   ==================================================================== */
@media (min-width: 1440px) {
    body.blog .journal-grid,
    body.page-template-page-news .journal-grid,
    body.page-template-page-journal .journal-grid,
    body .journal-grid {
        max-width: calc(100vw - 96px) !important;
        width: 100% !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.single-post .page-hero,
    body.single-post .grid-wrap,
    body.single-post .longform {
        max-width: calc(100vw - 96px) !important;
        width: 100% !important;
    }

    body.single-post .longform {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    body.single-post .longform > p,
    body.single-post .longform > ul,
    body.single-post .longform > ol,
    body.single-post .longform > blockquote,
    body.single-post .longform > h2,
    body.single-post .longform > h3,
    body.single-post .longform > h4 {
        max-width: min(82ch, 100%) !important;
    }

    body.single-post .longform > figure,
    body.single-post .longform > .wp-block-image,
    body.single-post .longform > .wp-block-gallery,
    body.single-post .longform > .alignwide,
    body.single-post .longform > .alignfull {
        max-width: 100% !important;
        width: 100% !important;
    }

    .sla-overlay.is-journal {
        width: 86vw !important;
        max-width: 86vw !important;
    }

    .sla-overlay.is-journal .sla-overlay-content > .page-hero,
    .sla-overlay.is-journal .sla-overlay-content > .grid-wrap,
    .sla-overlay.is-journal .sla-overlay-content > .longform,
    .sla-overlay.is-journal .journal-inline-article {
        max-width: calc(100% - clamp(56px, 6vw, 132px)) !important;
        width: calc(100% - clamp(56px, 6vw, 132px)) !important;
    }
}

@media (min-width: 1800px) {
    .sla-overlay.is-journal {
        width: 90vw !important;
        max-width: 90vw !important;
    }

    body.single-post .page-hero,
    body.single-post .grid-wrap,
    body.single-post .longform,
    body .journal-grid {
        max-width: calc(100vw - 128px) !important;
    }
}


/* ====================================================================
   Version 1.3.82 — Journal-Fließtext nutzt auf großen Screens die Breite
   - Entfernt die zusätzliche 82ch-Begrenzung für Journal-Textblöcke.
   - Gilt für Einzelbeiträge und Journal-Overlay ab großen Desktopbreiten.
   ==================================================================== */
@media (min-width: 1440px) {
    body.single-post .longform > p,
    body.single-post .longform > ul,
    body.single-post .longform > ol,
    body.single-post .longform > blockquote,
    body.single-post .longform > h2,
    body.single-post .longform > h3,
    body.single-post .longform > h4,
    .sla-overlay.is-journal .sla-overlay-content > .longform > *,
    .sla-overlay.is-journal .sla-overlay-content > .longform p,
    .sla-overlay.is-journal .sla-overlay-content > .longform li,
    .sla-overlay.is-journal .journal-inline-article p,
    .sla-overlay.is-journal .journal-inline-article ul,
    .sla-overlay.is-journal .journal-inline-article ol,
    .sla-overlay.is-journal .journal-inline-article blockquote,
    .sla-overlay.is-journal .journal-inline-article h2,
    .sla-overlay.is-journal .journal-inline-article h3,
    .sla-overlay.is-journal .journal-inline-article h4 {
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* ====================================================================
   Version 1.3.83 — Journal-Text wirklich breit
   - Eigene Klasse journal-longform im Single-Template.
   - Überschreibt die alte .longform max-width:780px-Regel robust.
   - Breiter Text bereits ab Desktopgrößen, nicht erst ab 1440px.
   ==================================================================== */
@media (min-width: 1024px) {
    body.single-post .journal-longform,
    body.single .journal-longform,
    body.post-template-default .journal-longform,
    .sla-overlay.is-journal .journal-longform,
    .sla-overlay.is-journal .sla-overlay-content > .longform,
    .sla-overlay.is-journal .journal-inline-article {
        max-width: calc(100vw - clamp(64px, 8vw, 160px)) !important;
        width: calc(100vw - clamp(64px, 8vw, 160px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.single-post .journal-longform > *,
    body.single .journal-longform > *,
    body.post-template-default .journal-longform > *,
    .sla-overlay.is-journal .journal-longform > *,
    .sla-overlay.is-journal .sla-overlay-content > .longform > *,
    .sla-overlay.is-journal .journal-inline-article > * {
        max-width: 100% !important;
        width: 100% !important;
    }

    body.single-post .journal-longform p,
    body.single-post .journal-longform li,
    body.single .journal-longform p,
    body.single .journal-longform li,
    body.post-template-default .journal-longform p,
    body.post-template-default .journal-longform li,
    .sla-overlay.is-journal .journal-longform p,
    .sla-overlay.is-journal .journal-longform li,
    .sla-overlay.is-journal .sla-overlay-content > .longform p,
    .sla-overlay.is-journal .sla-overlay-content > .longform li,
    .sla-overlay.is-journal .journal-inline-article p,
    .sla-overlay.is-journal .journal-inline-article li {
        max-width: none !important;
        width: 100% !important;
    }
}

@media (min-width: 1600px) {
    body.single-post .journal-longform,
    body.single .journal-longform,
    body.post-template-default .journal-longform,
    .sla-overlay.is-journal .journal-longform,
    .sla-overlay.is-journal .sla-overlay-content > .longform,
    .sla-overlay.is-journal .journal-inline-article {
        max-width: calc(100vw - 128px) !important;
        width: calc(100vw - 128px) !important;
    }
}


/* ====================================================================
   SLA84 / v1.3.84 — Footer am Smartphone/iPhone deutlich kompakter
   - Mobile Footer bewusst als 2 schmale Spalten: Leistungen links,
     Standorte rechtsbuendig.
   - Hebt grosse Touch-Target- und Block-Link-Regeln im Footer hart auf.
   - Bottom-Zeile extrem reduziert; Instagram wird mobil ausgeblendet.
   ==================================================================== */
@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
    body .site-footer,
    html body footer.site-footer {
        padding: 6px 0 8px !important;
        margin: 0 !important;
        background: var(--sl-paper) !important;
    }
    body .site-footer .foot-inner,
    html body footer.site-footer .foot-inner {
        max-width: none !important;
        width: 100% !important;
        padding: 0 18px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }
    body .site-footer .seo-footer-links,
    html body footer.site-footer .seo-footer-links {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        align-items: start !important;
    }
    body .site-footer .seo-footer-group,
    html body footer.site-footer .seo-footer-group {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.12 !important;
        min-height: 0 !important;
    }
    body .site-footer .seo-footer-group--leistungen,
    html body footer.site-footer .seo-footer-group--leistungen {
        align-items: flex-start !important;
        text-align: left !important;
    }
    body .site-footer .seo-footer-group--standorte,
    body .site-footer .seo-footer-group--standorte h2,
    html body footer.site-footer .seo-footer-group--standorte,
    html body footer.site-footer .seo-footer-group--standorte h2 {
        align-items: flex-end !important;
        justify-content: flex-start !important;
        text-align: right !important;
    }
    body .site-footer .seo-footer-group h2,
    html body footer.site-footer .seo-footer-group h2 {
        display: block !important;
        width: 100% !important;
        margin: 0 0 3px !important;
        padding: 0 !important;
        font-size: 9.5px !important;
        line-height: 11px !important;
        letter-spacing: .14em !important;
        font-weight: 500 !important;
    }
    body .site-footer a,
    body .site-footer .seo-footer-group a,
    body .site-footer .foot-bottom a,
    html body footer.site-footer a,
    html body footer.site-footer .seo-footer-group a,
    html body footer.site-footer .foot-bottom a {
        display: inline !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 0 !important;
        font-size: 11px !important;
        line-height: 12.5px !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
    }
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 1px 9px !important;
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 5px 0 0 !important;
        border-top: 1px solid rgba(16, 24, 32, 0.14) !important;
        font-size: 10.5px !important;
        line-height: 12px !important;
    }
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        display: inline !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }
    body .site-footer .foot-bottom a[href*="instagram.com"],
    html body footer.site-footer .foot-bottom a[href*="instagram.com"] {
        display: none !important;
    }
}
@media (max-width: 390px) {
    body .site-footer .foot-inner,
    html body footer.site-footer .foot-inner {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    body .site-footer .seo-footer-links,
    html body footer.site-footer .seo-footer-links {
        gap: 6px 12px !important;
    }
    body .site-footer a,
    body .site-footer .seo-footer-group a,
    html body footer.site-footer a,
    html body footer.site-footer .seo-footer-group a {
        font-size: 10.5px !important;
        line-height: 12px !important;
    }
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom {
        font-size: 10px !important;
        line-height: 11.5px !important;
        gap: 0 8px !important;
    }
}


/* ====================================================================
   SLA85 / v1.3.85 — Footer Schrift + Zeilenhoehe jeweils +1px
   - Gilt fuer Desktop, Tablet und Smartphone.
   - Mobile Kompaktheit und 2-Spalten-Layout aus SLA84 bleiben erhalten.
   ==================================================================== */
.site-footer .seo-footer-group h2 {
    font-size: 12px !important;
    line-height: 15px !important;
}
.site-footer .seo-footer-group a {
    font-size: 14px !important;
    line-height: 19px !important;
}
.site-footer .foot-bottom,
.site-footer .foot-bottom span,
.site-footer .foot-bottom a {
    font-size: 14px !important;
    line-height: 19px !important;
}

@media (max-width: 1024px) {
    .site-footer .seo-footer-group h2 {
        font-size: 12px !important;
        line-height: 15px !important;
    }
    .site-footer .seo-footer-group a {
        font-size: 13px !important;
        line-height: 15px !important;
    }
    .site-footer .foot-bottom,
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a {
        font-size: 12px !important;
        line-height: 15px !important;
    }
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
    body .site-footer .seo-footer-group h2,
    html body footer.site-footer .seo-footer-group h2 {
        font-size: 10.5px !important;
        line-height: 12px !important;
    }
    body .site-footer a,
    body .site-footer .seo-footer-group a,
    body .site-footer .foot-bottom a,
    html body footer.site-footer a,
    html body footer.site-footer .seo-footer-group a,
    html body footer.site-footer .foot-bottom a {
        font-size: 12px !important;
        line-height: 13.5px !important;
    }
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        font-size: 11.5px !important;
        line-height: 13px !important;
    }
}

@media (max-width: 390px) {
    body .site-footer a,
    body .site-footer .seo-footer-group a,
    html body footer.site-footer a,
    html body footer.site-footer .seo-footer-group a {
        font-size: 11.5px !important;
        line-height: 13px !important;
    }
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        font-size: 11px !important;
        line-height: 12.5px !important;
    }
}


/* ====================================================================
   SLA86 / v1.3.86 — Footer-Spalten in allen Browsergroessen
   - Leistungen immer links, Standorte immer rechts.
   - Abstand unter den Ueberschriften etwas groesser als zwischen Links.
   ==================================================================== */
.site-footer .seo-footer-links,
body .site-footer .seo-footer-links,
html body footer.site-footer .seo-footer-links {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(16px, 4vw, 56px) !important;
    align-items: start !important;
    width: 100% !important;
}
.site-footer .seo-footer-group,
body .site-footer .seo-footer-group,
html body footer.site-footer .seo-footer-group {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.site-footer .seo-footer-group--leistungen,
body .site-footer .seo-footer-group--leistungen,
html body footer.site-footer .seo-footer-group--leistungen {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
.site-footer .seo-footer-group--standorte,
.site-footer .seo-footer-group--standorte h2,
body .site-footer .seo-footer-group--standorte,
body .site-footer .seo-footer-group--standorte h2,
html body footer.site-footer .seo-footer-group--standorte,
html body footer.site-footer .seo-footer-group--standorte h2 {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    text-align: right !important;
}
.site-footer .seo-footer-group h2,
body .site-footer .seo-footer-group h2,
html body footer.site-footer .seo-footer-group h2 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}
.site-footer .seo-footer-group a,
body .site-footer .seo-footer-group a,
html body footer.site-footer .seo-footer-group a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

@media (max-width: 1024px) {
    .site-footer .seo-footer-links,
    body .site-footer .seo-footer-links,
    html body footer.site-footer .seo-footer-links {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 14px !important;
    }
    .site-footer .seo-footer-group,
    body .site-footer .seo-footer-group,
    html body footer.site-footer .seo-footer-group {
        gap: 2px !important;
    }
    .site-footer .seo-footer-group h2,
    body .site-footer .seo-footer-group h2,
    html body footer.site-footer .seo-footer-group h2 {
        margin-bottom: 6px !important;
    }
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 900px) {
    body .site-footer .seo-footer-links,
    html body footer.site-footer .seo-footer-links {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    body .site-footer .seo-footer-group,
    html body footer.site-footer .seo-footer-group {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }
    body .site-footer .seo-footer-group h2,
    html body footer.site-footer .seo-footer-group h2 {
        margin: 0 0 5px !important;
    }
    body .site-footer .seo-footer-group a,
    html body footer.site-footer .seo-footer-group a {
        display: inline-block !important;
        margin: 0 !important;
    }
}

@media (max-width: 390px) {
    body .site-footer .seo-footer-links,
    html body footer.site-footer .seo-footer-links {
        gap: 8px !important;
    }
    body .site-footer .seo-footer-group h2,
    html body footer.site-footer .seo-footer-group h2 {
        margin-bottom: 4px !important;
    }
}


/* ====================================================================
   SLA87 / v1.3.87 — Journal-Fließtext mit Seitenrand auf allen Größen
   - Journal-Artikel behalten auf Smartphone, Tablet und Desktop immer
     einen sichtbaren linken und rechten Seitenrand.
   - Gilt für normale Einzelbeiträge und für das Journal-Overlay.
   ==================================================================== */
:root {
    --journal-text-side-gap: clamp(18px, 4vw, 64px);
    --journal-text-side-gap-total: clamp(36px, 8vw, 128px);
}

body.single-post .journal-longform,
body.single .journal-longform,
body.post-template-default .journal-longform {
    box-sizing: border-box !important;
    width: calc(100vw - var(--journal-text-side-gap-total)) !important;
    max-width: calc(100vw - var(--journal-text-side-gap-total)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.single-post .journal-longform > *,
body.single .journal-longform > *,
body.post-template-default .journal-longform > * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.sla-overlay.is-journal .journal-longform,
.sla-overlay.is-journal .sla-overlay-content > .longform,
.sla-overlay.is-journal .journal-inline-article {
    box-sizing: border-box !important;
    width: calc(100% - var(--journal-text-side-gap-total)) !important;
    max-width: calc(100% - var(--journal-text-side-gap-total)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sla-overlay.is-journal .journal-longform > *,
.sla-overlay.is-journal .sla-overlay-content > .longform > *,
.sla-overlay.is-journal .journal-inline-article > * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

@media (max-width: 760px) {
    body.single-post .journal-longform,
    body.single .journal-longform,
    body.post-template-default .journal-longform,
    .sla-overlay.is-journal .journal-longform,
    .sla-overlay.is-journal .sla-overlay-content > .longform,
    .sla-overlay.is-journal .journal-inline-article {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
    }
}


/* ====================================================================
   SLA88 / v1.3.88 — Footer Bottom-Zeile am iPad in einer Zeile
   - Ab Tablet bleibt die unterste Footer-Zeile einzeilig.
   - Auf iPad-/schmalen Tablet-Breiten werden Schrift und Abstaende reduziert.
   - Instagram wird dort ausgeblendet, damit Adresse, Impressum, Datenschutz
     und E-Mail gemeinsam in einer Zeile bleiben.
   ==================================================================== */
@media (min-width: 761px) {
    .site-footer .foot-bottom,
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) repeat(4, max-content) !important;
        align-items: center !important;
        justify-content: stretch !important;
        column-gap: clamp(18px, 2.2vw, 40px) !important;
        row-gap: 0 !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        display: block !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .site-footer .foot-bottom,
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom {
        grid-template-columns: minmax(0, 1fr) repeat(3, max-content) !important;
        column-gap: 14px !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
    }
    .site-footer .foot-bottom a[href*="instagram.com"],
    body .site-footer .foot-bottom a[href*="instagram.com"],
    html body footer.site-footer .foot-bottom a[href*="instagram.com"] {
        display: none !important;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .site-footer .foot-bottom,
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom {
        column-gap: 10px !important;
        font-size: 11px !important;
        line-height: 15px !important;
    }
}


/* ====================================================================
   SLA89 / v1.3.89 — Footer Bottom-Zeile am iPad exakt vertikal ausrichten
   - Alle Elemente der untersten Footer-Zeile bekommen dieselbe Flex-Ausrichtung.
   - Behebt minimale Baseline-/Anchor-Verschiebungen zwischen Text und Links.
   ==================================================================== */
@media (min-width: 761px) {
    .site-footer .foot-bottom,
    body .site-footer .foot-bottom,
    html body footer.site-footer .foot-bottom {
        align-items: center !important;
    }
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        vertical-align: middle !important;
        transform: none !important;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        line-height: 16px !important;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .site-footer .foot-bottom span,
    .site-footer .foot-bottom a,
    body .site-footer .foot-bottom span,
    body .site-footer .foot-bottom a,
    html body footer.site-footer .foot-bottom span,
    html body footer.site-footer .foot-bottom a {
        line-height: 15px !important;
    }
}


/* ---------------------------------------------------------------------
   FAQ-Blöcke Büro / Team / Kontakt
   Ruhige Erweiterung der bestehenden Text-/Kontakt-Logik
   ------------------------------------------------------------------ */
.sla-faq-block {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 80px 32px;
    border-top: 1px solid var(--sl-light);
    border-bottom: 1px solid var(--sl-light);
}

.sla-faq-block + .contact,
.sla-faq-block + .careers-block {
    border-top: 0;
}

.sla-faq-block__head {
    display: block;
    margin-bottom: 26px;
    text-align: left;
}

.sla-faq-block__head .eyebrow {
    text-align: left;
}

.sla-faq-block__head h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--sl-ink);
    margin: 0;
    text-align: left;
}

.sla-faq-list {
    border-top: 1px solid var(--sl-light);
}

.sla-faq-item {
    border-bottom: 1px solid var(--sl-light);
}

.sla-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 72px 1fr 24px;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    color: var(--sl-ink);
}

.sla-faq-item summary::-webkit-details-marker {
    display: none;
}

.sla-faq-item__num {
    font-size: 13px;
    color: var(--sl-slate);
    letter-spacing: 0.08em;
    line-height: 1.5;
}

.sla-faq-item__question {
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.sla-faq-item__icon {
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    color: var(--sl-slate);
    transition: transform .18s ease;
}

.sla-faq-item[open] .sla-faq-item__icon {
    transform: rotate(45deg);
}

.sla-faq-item__answer p {
    font-size: 16px;
    line-height: 1.65;
    max-width: 760px;
    margin: 0 0 24px;
    padding-left: 96px;
    color: var(--sl-charcoal);
}

@media (max-width: 900px) {
    .sla-faq-block__head {
        margin-bottom: 24px;
    }
}

@media (max-width: 760px) {
    .sla-faq-block {
        padding: 48px 18px;
    }

    .sla-faq-block__head h2 {
        font-size: 28px;
        line-height: 1.12;
    }

    .sla-faq-item summary {
        grid-template-columns: 44px 1fr 20px;
        gap: 14px;
        padding: 19px 0;
    }

    .sla-faq-item__question {
        font-size: 18px;
        line-height: 1.3;
    }

    .sla-faq-item__answer p {
        padding-left: 58px;
        font-size: 16px;
        line-height: 1.6;
    }
}


/* SLA 1.3.91 — FAQ title left aligned + active main nav underline */
.sla-faq-block__head,
.sla-faq-block__head .eyebrow,
.sla-faq-block__head h2 {
    text-align: left !important;
}
.site-header nav.main a.active,
.site-header nav.main .current-menu-item > a,
.site-header nav.main .current_page_item > a,
.site-header nav.main .current-menu-ancestor > a,
.site-header nav.main a[aria-current="page"] {
    border-bottom-color: currentColor !important;
}


/* ====================================================================
   v1.3.92 — Kontakt-/CTA-Titel vereinheitlicht
   - Startseite: Kontaktblock-H2 nicht als Hero skalieren, sondern wie Büro/Kontakt
   - gleiche Schriftgröße und Line-Height über alle Browsergrößen
   ==================================================================== */
.home .contact h2,
.front-page .contact h2,
body.home .contact h2,
body.front-page .contact h2,
body.is-editorial-home .contact h2 {
    font-size: var(--ph-h2) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    font-weight: 500 !important;
    max-width: none !important;
}

@media (min-width: 721px) and (max-width: 1024px) {
    .home .contact h2,
    .front-page .contact h2,
    body.home .contact h2,
    body.front-page .contact h2,
    body.is-editorial-home .contact h2 {
        font-size: var(--ph-h2) !important;
        line-height: 1.08 !important;
    }
}

@media (max-width: 720px) {
    .home .contact h2,
    .front-page .contact h2,
    body.home .contact h2,
    body.front-page .contact h2,
    body.is-editorial-home .contact h2 {
        font-size: var(--ph-h2) !important;
        line-height: 1.08 !important;
    }
}

/* ============================================================
   v1.3.93 — Drei Ansichten: Thumbs / Liste / Karte
   ============================================================ */

/* View-Switch (links) und rechte Toggles in der Demand-Bar */
.project-demand-actions {
    flex-wrap: wrap;
}
.project-view-switch {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(14px, 2vw, 26px);
    margin-right: auto;
}
.project-demand-actions-right {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(18px, 2.4vw, 34px);
}
.project-demand-toggle.is-on { border-bottom-color: currentColor; }

/* Ansichten-Container */
.project-view { display: none; }
.project-view.is-on { display: block; }

/* ---------- LISTE ---------- */
.project-list {
    max-width: var(--sl-maxw);
    margin: 0;
    padding: 0;
    display: block;
}
.project-list-row {
    display: grid;
    grid-template-columns: 64px 160px 1fr 220px 220px;
    gap: clamp(18px, 2vw, 32px);
    align-items: center;
    padding: 22px 0;
    border-top: 1px solid var(--sl-light);
    color: var(--sl-charcoal);
    border-bottom: 1px solid transparent;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
.project-list-row:last-child { border-bottom: 1px solid var(--sl-light); }
.project-list-row:hover,
.project-list-row:focus-visible {
    background: var(--sl-paper);
    color: var(--sl-ink);
}
.project-list-row .lnum {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sl-slate);
    font-variant-numeric: tabular-nums;
}
.project-list-row .lthumb {
    aspect-ratio: 4/3;
    background: var(--sl-light);
    overflow: hidden;
}
.project-list-row .lthumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.project-list-row:hover .lthumb img { transform: scale(1.04); }
.project-list-row .lbody { min-width: 0; }
.project-list-row .ltype {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sl-slate);
    margin-bottom: 6px;
}
.project-list-row h3 {
    font-size: clamp(20px, 1.7vw, 26px);
    color: var(--sl-ink);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 0;
}
.project-list-row .lmeta,
.project-list-row .lstatus {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.project-list-row .lstatus { text-align: right; color: var(--sl-ink); letter-spacing: .14em; }

/* ---------- KARTE ---------- */
.project-map-split {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: stretch;
}
.project-map {
    position: relative;
    height: 640px;
    background: #E9EEE4;
    overflow: hidden;
    border: 1px solid var(--sl-light);
}
.project-map .leaflet-container,
.project-map.leaflet-container {
    /* v1.4.8: Karte trägt beide Klassen am selben Element — Nachfahren-Selektor
       allein griff nie; Attribution stand in Helvetica. */
    background: #E9EEE4;
    font-family: var(--sl-font);
}
.project-map .leaflet-control-attribution {
    background: rgba(250,250,250,.85);
    color: var(--sl-slate);
    font-size: 10px;
    letter-spacing: .04em;
}
.project-map .leaflet-control-zoom a {
    background: var(--sl-paper);
    color: var(--sl-ink);
    border: 1px solid var(--sl-light);
    border-radius: 0;
    font-weight: 500;
}
.project-map .leaflet-control-zoom a:hover {
    background: var(--sl-off);
    color: var(--sl-ink);
}

/* Custom Pins via Leaflet DivIcon */
.sla-pin {
    background: transparent !important;
    border: 0 !important;
}
.sla-pin .sla-pin-dot {
    display: block;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sl-charcoal);
    border: 2px solid var(--sl-off);
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: transform .15s ease;
}
.sla-pin.s-done .sla-pin-dot { background: var(--sl-charcoal); }
.sla-pin.s-wip  .sla-pin-dot { background: var(--sl-ink); outline: 3px solid rgba(26,31,35,.18); outline-offset: 0; }
.sla-pin:hover .sla-pin-dot { transform: scale(1.12); }

/* Popover (Leaflet-Popup) */
.project-map .leaflet-popup-content-wrapper {
    background: var(--sl-off);
    color: var(--sl-charcoal);
    border: 1px solid var(--sl-ink);
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    padding: 0;
}
.project-map .leaflet-popup-content { margin: 12px; line-height: 1.4; }
/* Alle Popup-Texte zwingend in CIRCULAR_SLA (Leaflet-Default-Font überschreiben) */
.project-map .leaflet-popup,
.project-map .leaflet-popup-content-wrapper,
.project-map .leaflet-popup-content,
.project-map .leaflet-popup-content * {
    font-family: var(--sl-font) !important;
}
.project-map .leaflet-popup-tip { background: var(--sl-off); border: 1px solid var(--sl-ink); }
.project-map .leaflet-popup-close-button {
    color: var(--sl-ink);
    padding: 6px 8px 0 0;
}
.sla-popover-card { width: 240px; }
.sla-popover-img {
    width: 100%;
    aspect-ratio: 3/2;
    background: var(--sl-light) center/cover no-repeat;
    margin-bottom: 10px;
}
.sla-popover-num {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.sla-popover-card h4 {
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--sl-ink);
    font-weight: 600;
    margin: 4px 0 6px;
}
.sla-popover-meta {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sl-slate);
    margin-bottom: 10px;
}
.sla-popover-meta span + span::before { content: ' · '; }
.sla-popover-link {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sl-ink);
    border-bottom: 1px solid var(--sl-ink);
    padding-bottom: 2px;
}

/* Karten-Seitenliste */
.project-map-list {
    max-height: 640px;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.project-map-list::-webkit-scrollbar { width: 6px; }
.project-map-list::-webkit-scrollbar-thumb { background: var(--sl-light); }
.project-map-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--sl-light);
    color: var(--sl-charcoal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: background-color .15s ease;
}
.project-map-row:first-child { border-top: 0; padding-top: 0; }
.project-map-row:hover,
.project-map-row.is-active {
    background: var(--sl-paper);
}
.project-map-row .mthumb {
    aspect-ratio: 4/3;
    background: var(--sl-light) center/cover no-repeat;
}
.project-map-row .num {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.project-map-row h3 {
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sl-ink);
    font-weight: 600;
    margin: 4px 0 5px;
}
.project-map-row .meta-line {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.project-map-row .meta-line span + span::before { content: ' · '; }

/* Responsive */
@media (max-width: 1024px) {
    .project-list-row { grid-template-columns: 48px 120px 1fr 180px 180px; gap: 18px; }
    .project-list-row h3 { font-size: 20px; }
    .project-map-split { grid-template-columns: 1fr; }
    .project-map { height: 480px; }
    .project-map-list { max-height: none; }
}
@media (max-width: 760px) {
    .project-view-switch { gap: 14px; width: 100%; }
    .project-demand-actions-right { width: 100%; justify-content: flex-end; }
    .project-list-row {
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "thumb body"
            "thumb meta"
            "thumb status";
        gap: 6px 14px;
        padding: 18px 0;
    }
    .project-list-row .lnum { display: none; }
    .project-list-row .lthumb { grid-area: thumb; }
    .project-list-row .lbody  { grid-area: body; }
    .project-list-row .lmeta  { grid-area: meta; text-align: left; }
    .project-list-row .lstatus{ grid-area: status; text-align: left; color: var(--sl-slate); }
    .project-list-row h3 { font-size: 18px; }
    .project-map { height: 360px; }
    .project-map-row { grid-template-columns: 80px 1fr; }
    .project-map-row h3 { font-size: 16px; }
}

/* v1.3.95 — Sortierbare Header in der Listen-Ansicht */
.project-list-head {
    display: grid;
    grid-template-columns: 64px 160px 1fr 220px 220px;
    gap: clamp(18px, 2vw, 32px);
    align-items: center;
    padding: 14px 0 12px;
    border-top: 1px solid var(--sl-light);
    border-bottom: 1px solid var(--sl-light);
}
.project-list-head .lhead {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sl-slate);
    font: inherit;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.project-list-head .lhead:hover { color: var(--sl-ink); border-bottom-color: var(--sl-ink); }
.project-list-head .lhead.is-asc,
.project-list-head .lhead.is-desc { color: var(--sl-ink); border-bottom-color: var(--sl-ink); }
.project-list-head .lhead-right { justify-content: flex-end; text-align: right; }
.project-list-head .lnum,
.project-list-head .lthumb { display: block; }
.project-list-head .sort-ind {
    display: inline-block;
    width: 10px; height: 10px;
    background: transparent;
    position: relative;
}
.project-list-head .sort-ind::before {
    content: '';
    position: absolute;
    left: 1px; top: 2px;
    width: 6px; height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    opacity: .35;
}
.project-list-head .lhead.is-asc .sort-ind::before {
    transform: rotate(-135deg);
    top: 4px;
    opacity: 1;
}
.project-list-head .lhead.is-desc .sort-ind::before {
    transform: rotate(45deg);
    top: 1px;
    opacity: 1;
}

/* Direkt nach dem Header keinen doppelten Border-Top auf der ersten Zeile */
.project-list-head + .project-list .project-list-row:first-child { border-top: 0; }

@media (max-width: 1024px) {
    .project-list-head { grid-template-columns: 48px 120px 1fr 180px 180px; }
}
@media (max-width: 760px) {
    /* In Mobile-Spaltenlayout: nur ein Sort-Knopf (Projekt) sinnvoll – Header kompakt */
    .project-list-head {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 14px;
    }
    .project-list-head .lnum,
    .project-list-head .lthumb { display: none; }
    .project-list-head .lhead-right { justify-content: flex-end; }
}


/* v1.3.97 — Karte ohne Seitenliste, volle Breite */
.project-map-wrap {
    width: 100%;
}
.project-map-wrap .project-map {
    height: 720px;
}
@media (max-width: 1024px) {
    .project-map-wrap .project-map { height: 520px; }
}
@media (max-width: 760px) {
    .project-map-wrap .project-map { height: 420px; }
}

/* ====================================================================
   v1.4.0 — Alchemy-Release
   Testimonials, Erstgespräch, Auszeichnungen, Publikums-Chips,
   Visualisierungs-Label
   ==================================================================== */

/* Auftraggeber-Zitat auf der Projektseite */
.project-testimonial {
    margin: 44px 0 8px;
    padding: 28px 0;
    border-top: 1px solid var(--sl-light);
    border-bottom: 1px solid var(--sl-light);
    background: transparent;
}
.project-testimonial p {
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
.project-testimonial footer {
    color: var(--sl-slate);
    font-size: 14px;
}

/* Testimonial-Band auf der Startseite */
.testimonial-band {
    padding: 72px 40px;
    border-top: 1px solid var(--sl-light);
    background: var(--sl-paper);
}
.testimonial-band .testimonial-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.testimonial-band blockquote {
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin: 18px 0 20px;
}
.testimonial-band .testimonial-attr {
    color: var(--sl-slate);
    font-size: 15px;
}
.testimonial-band .testimonial-attr a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* v1.5.2 — Testimonial mit Projektbild: hell, Titel links / Text rechts,
   Bild rechts bis an den Bildschirmrand. Fallback ohne Bild bleibt das
   zentrierte .testimonial-inner-Layout (unverändert). */
.testimonial-band.has-media {
    background: var(--sl-paper);
    padding: 0;
    border-bottom: 1px solid var(--sl-light);
}
.testimonial-band.has-media .testimonial-split {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 42%);
    gap: 0;
    align-items: center;
}
.testimonial-band.has-media .testimonial-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
    text-align: left;
    padding: clamp(64px, 8vw, 120px) clamp(32px, 4vw, 56px)
             clamp(64px, 8vw, 120px)
             max(32px, calc((100vw - var(--sl-maxw)) / 2 + 32px));
}
.testimonial-band.has-media .testimonial-content .eyebrow { padding-top: 8px; }
.testimonial-band.has-media .testimonial-split blockquote {
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--sl-ink);
    margin: 0;
}
.testimonial-band.has-media .testimonial-attr {
    margin-top: 22px;
    color: var(--sl-slate);
    font-size: 15px;
}
.testimonial-band.has-media .testimonial-media {
    display: block;
    align-self: stretch;
    border-bottom: none;
}
.testimonial-band.has-media .testimonial-media:hover { border-bottom: none; }
.testimonial-band.has-media .testimonial-media img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    aspect-ratio: auto;
    background: var(--sl-light);
}
.testimonial-band.has-media .testimonial-media .media-caption {
    display: block;
    margin-top: 0;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--sl-slate);
    letter-spacing: 0.02em;
}
@media (max-width: 900px) {
    .testimonial-band.has-media .testimonial-split { grid-template-columns: 1fr; }
    .testimonial-band.has-media .testimonial-media { order: -1; }
    .testimonial-band.has-media .testimonial-media img {
        min-height: 300px; height: auto; aspect-ratio: 4/3;
    }
    .testimonial-band.has-media .testimonial-content {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: clamp(44px, 9vw, 64px) 20px;
    }
    .testimonial-band.has-media .testimonial-content .eyebrow { padding-top: 0; }
}

/* v1.5.1 — Journal-Teaser auf der Startseite (Karten wie /news/) */
.home-journal { padding-top: var(--sl-section-space, 96px); }
.home-journal .journal-grid.home-journal-grid { padding-bottom: 0 !important; }
.home-journal-more {
    max-width: var(--sl-maxw);
    margin: 0 auto;
    padding: 40px 32px var(--sl-section-space, 96px);
    text-align: center;
}
@media (max-width: 900px) {
    .home-journal-more { padding-left: 20px; padding-right: 20px; }
}

/* Erstgespräch auf der Kontakt-Seite — sitzt im Seitenraster wie .contact
   (v1.4.2: vorher zentrierte Box, wirkte "schwebend" im linksbündigen Layout) */
.erstgespraech-eyebrow {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--sl-slate);
    font-weight: 500;
    margin-bottom: 14px;
}
.erstgespraech-lead {
    max-width: 46ch;
    margin: 0 0 6px;
    line-height: 1.65;
}

/* Auszeichnungen auf der Büro-Seite */
.awards-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}
.awards-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--sl-light);
    line-height: 1.5;
}
.awards-list li:first-child {
    border-top: 1px solid var(--sl-light);
}

/* Publikums-Chips auf der Projektübersicht
   v1.4.5: Gruppen mit Feld-Label oben — gleicher Duktus wie Typ/Status/Sortieren
   im Filter-Panel, statt langer Inline-Labels in der Zeile. */
.audience-paths {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 32px;
    max-width: var(--sl-maxw);
    margin: 0 auto 26px;
    padding: 6px 32px 0;
}
.audience-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.audience-group-label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sl-slate);
}
.audience-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.audience-chip {
    appearance: none;
    background: var(--sl-paper);
    border: 1px solid var(--sl-light);
    border-radius: 999px;
    padding: 9px 18px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.audience-chip:hover {
    border-color: var(--sl-charcoal);
}
.audience-chip.is-on {
    background: var(--sl-charcoal);
    border-color: var(--sl-charcoal);
    color: #fff;
}

/* Visualisierungs-Label im Projekt-Hero */
.project-hero {
    position: relative;
}
.render-badge {
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(26, 31, 35, 0.62);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
}

@media (max-width: 760px) {
    .testimonial-band { padding: 52px 20px; }
    .audience-paths { padding: 6px 18px 0; }
}

/* v1.4.1 — Studien-Chip dezent abgesetzt
   v1.4.3 — als eigene Gruppe rechts positioniert: die drei linken Chips sind
   Zielgruppen ("für wen"), der Labor-Chip ist eine Werkkategorie ("aus dem Labor").
   Zwei verschiedene Fragen, zwei Positionen. */
.audience-chip--lab {
    border-style: dashed;
}
@media (max-width: 900px) {
    .audience-paths { justify-content: flex-start; }
}



/* ================================================================
   v1.5.0 — STORY-LAYOUT PROJEKTSEITEN
   Text und Galeriebilder werden zu einem erzählerischen Ablauf
   verwoben. Alle Effekte sind unter html.sla-js gescopet (per
   :where() ohne Spezifitätsgewicht) — ohne JavaScript ist alles
   sofort sichtbar. Einheiten mit svh haben immer einen vh-Fallback.
   ================================================================ */

/* Scroll-Hinweis im Hero */
.sla-scroll-cue {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 18px; z-index: 2; width: 1px; height: 44px; overflow: hidden;
}
.sla-scroll-cue::after {
    content: ''; position: absolute; left: 0; top: -100%;
    width: 1px; height: 100%; background: rgba(255,255,255,.9);
    animation: sla-cue 2.2s ease-in-out infinite;
}
@keyframes sla-cue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* Hero-Titel: sanfter Einstieg (nur mit JS, fill-mode both) */
:where(html.sla-js) .project-hero h1 {
    animation: sla-hero-in 1.1s cubic-bezier(.22,.61,.36,1) .2s both;
}
:where(html.sla-js) .project-hero .meta-line,
:where(html.sla-js) .project-hero .project-subtitle {
    animation: sla-hero-in 1.1s cubic-bezier(.22,.61,.36,1) .45s both;
}
@keyframes sla-hero-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

.project-body--story { padding-bottom: 30px; }

/* Story-Flow-Container: volle Breite, Blöcke regeln ihre Maße selbst */
.story-flow { width: 100%; }

/* Bild-Buttons (Lightbox-Trigger) — Reset der Button-Optik */
.story-flow .project-gallery-item {
    display: block; width: 100%; padding: 0; margin: 0;
    border: 0; background: none; cursor: zoom-in;
    font: inherit; color: inherit; text-align: inherit;
    -webkit-appearance: none; appearance: none;
}
.story-flow .project-gallery-item:focus-visible {
    outline: 2px solid var(--sl-slate); outline-offset: 4px;
}

/* Full-Bleed-Bild mit Parallax-Fläche */
.story-fullbleed {
    position: relative; margin: 60px 0;
    height: 88vh; height: min(88svh, 900px); min-height: 320px;
    overflow: hidden;
}
.story-fullbleed .story-plx {
    position: absolute; inset: -12% 0; display: block; will-change: transform;
    background-size: cover; background-position: center; background-color: var(--sl-light);
}

/* Kapitel: Nummer + Linie links, Text rechts (Grid wie project-body) */
.story-chapter {
    max-width: var(--sl-maxw); margin: 0 auto;
    padding: 90px 32px;
    display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start;
}
.story-kicker {
    font-size: 15px; letter-spacing: .12em;
    color: var(--sl-slate); font-weight: 600; padding-top: 4px;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 14px;
}
.story-kicker::before {
    content: ''; display: block; width: 34px; height: 1px; background: var(--sl-slate);
}
:where(html.sla-js) .story-kicker::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s cubic-bezier(.22,.61,.36,1) .2s;
}
.story-chapter.sla-in .story-kicker::before { transform: scaleX(1); }
/* !important + doppelte Spezifität: schützt Kapitel-Titel vor der globalen
   Typo-Regel ".home section h2" (siehe v1.4.9-Merkposten), wenn das Projekt
   als Overlay über der Startseite geöffnet wird. */
.story-chapter-body h2,
.home section.story-chapter .story-chapter-body h2 {
    font-size: clamp(24px, 2.6vw, 34px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    font-weight: 600 !important;
    margin-bottom: 22px; max-width: 24ch;
}
.story-chapter-body p, .story-chapter-body li { font-size: 17px; line-height: 1.7; }
.story-chapter-body p { max-width: 62ch; margin-bottom: 20px; }
.story-chapter-body ul, .story-chapter-body ol { max-width: 62ch; margin: 0 0 20px 20px; }

/* Bild-Duo: versetztes Paar */
.story-duo {
    max-width: var(--sl-maxw); margin: 0 auto; padding: 0 32px;
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--sl-gap); align-items: start;
}
.story-duo .story-imgwrap:last-child { margin-top: 90px; }
.story-duo img, .story-restgrid img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--sl-light);
}
.story-restgrid img { aspect-ratio: 3/2; }

/* Rest-Raster: übrige Bilder nach dem letzten Kapitel */
.story-restgrid {
    max-width: var(--sl-maxw); margin: 60px auto 0; padding: 0 32px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sl-gap);
}

/* Dunkle Schluss-Bühne (letzter Absatz oder Auftraggeber-Zitat) */
.story-stage {
    background: var(--sl-ink); color: #fff;
    padding: 130px 32px; margin: 100px 0 0;
}
.story-stage-inner { max-width: 940px; margin: 0 auto; }
.story-stage-inner p {
    font-size: clamp(20px, 2.4vw, 30px); line-height: 1.45; font-weight: 500;
    color: #fff; letter-spacing: -0.015em; margin-bottom: .8em;
}
.story-stage-inner p:last-child { margin-bottom: 0; }
.story-stage-quote footer {
    margin-top: 28px; font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.6);
}

/* Verwandte Themen: eigenständige Sektion nach dem Story-Flow */
.project-topic-links--standalone {
    max-width: var(--sl-maxw); margin: 0 auto; padding: 60px 32px 20px;
}

/* ---------------- Reveal-Effekte (nur mit JS aktiv) ------------- */
:where(html.sla-js) .sla-reveal {
    opacity: 0; transform: translateY(34px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
:where(html.sla-js) .sla-reveal.sla-d1 { transition-delay: .12s; }
:where(html.sla-js) .sla-reveal.sla-d2 { transition-delay: .24s; }
.sla-in.sla-reveal, .sla-in .sla-reveal { opacity: 1; transform: none; }

:where(html.sla-js) .story-imgwrap img,
:where(html.sla-js) .story-fullbleed .story-plx {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.10);
    transition: clip-path 1.2s cubic-bezier(.22,.61,.36,1), transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.story-imgwrap.sla-in img,
.story-fullbleed.sla-in .story-plx {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}
/* Nach dem Vorhang-Reveal übernimmt die Parallax-Verschiebung */
.story-fullbleed.sla-plx-on .story-plx {
    transition: none;
    transform: translateY(var(--sla-plx, 0)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .sla-reveal, .story-imgwrap img, .story-fullbleed .story-plx,
    .project-hero h1, .project-hero .meta-line, .project-hero .project-subtitle,
    .story-kicker::before {
        opacity: 1 !important; transform: none !important; clip-path: none !important;
        transition: none !important; animation: none !important; width: 34px;
    }
    .sla-scroll-cue::after { animation: none !important; }
}

/* ---------------- Responsive ----------------------------------- */
@media (max-width: 900px) {
    .story-chapter { grid-template-columns: 1fr; gap: 24px; padding: 60px 20px; }
    .story-duo { grid-template-columns: 1fr; padding: 0 20px; }
    .story-duo .story-imgwrap:last-child { margin-top: 0; }
    .story-restgrid { grid-template-columns: 1fr; padding: 0 20px; }
    .story-fullbleed { height: 62vh; height: 62svh; margin: 40px 0; }
    .story-stage { padding: 80px 24px; margin-top: 60px; }
    .project-topic-links--standalone { padding: 40px 20px 10px; }
}
@media (max-width: 520px) {
    .story-chapter { padding: 48px 18px; }
    .story-duo, .story-restgrid { padding: 0 18px; gap: 14px; }
    .story-fullbleed { height: 52vh; height: 52svh; }
    .story-stage-inner p { font-size: 19px; }
}


/* ================================================================
   v1.5.5 — Impeccable UX-/Accessibility-Polish
   Anfrageweg, Formularfehler, Archivhierarchie, Navigation und
   robuste Semantik. Die bestehende visuelle Welt bleibt erhalten.
   ================================================================ */

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#content:focus { outline: none; }

/* Projektarchiv: kuratierte Einstiege zuerst, Werkzeuge klar sekundär. */
.audience-paths {
    margin-top: -34px;
    margin-bottom: 20px;
    padding-top: 0;
}
.project-demand-tools { margin-top: 0; }
.project-demand-actions { padding-top: 14px; }
.project-demand-toggle,
.project-reset,
.project-tab-buttons button,
.audience-chip {
    min-height: 44px;
}
.project-demand-toggle {
    align-items: center;
    min-width: 44px;
    padding: 8px 0 7px;
}
.project-reset {
    display: inline-flex;
    align-items: center;
    padding: 6px 0;
}

/* Projektinformationen: echte Tabs und lesbare Feldüberschriften. */
.project-tab-buttons button[aria-selected="true"] {
    background: var(--sl-ink);
    border-color: var(--sl-ink);
    color: #fff;
}
.project-tab-panel:focus-visible {
    outline: 2px solid var(--sl-slate);
    outline-offset: 5px;
}
.project-side .meta-block h3 {
    margin: 0 0 3px;
    color: var(--sl-slate);
    font-family: var(--sl-font);
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 600;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}

/* Projektabschluss: ruhiger redaktioneller Übergang zum Erstgespräch. */
.project-conversation {
    max-width: var(--sl-maxw);
    margin: 88px auto 20px;
    padding: 64px 32px;
    border-top: 1px solid var(--sl-light);
    border-bottom: 1px solid var(--sl-light);
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.35fr);
    gap: clamp(36px, 7vw, 104px);
    align-items: start;
}
.project-conversation .eyebrow { margin-bottom: 14px; }
.project-conversation h2,
.home section.project-conversation h2 {
    margin: 0;
    max-width: 12ch;
    color: var(--sl-ink);
    font-size: clamp(32px, 4vw, 54px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
}
.project-conversation-body p {
    max-width: 46ch;
    margin: 0 0 24px;
    color: var(--sl-charcoal);
    font-size: clamp(18px, 1.6vw, 22px) !important;
    line-height: 1.5 !important;
}
.project-topic-links--standalone { padding-top: 42px; }
.card-sequence-label {
    margin-bottom: 8px;
    color: rgba(255,255,255,.78);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Kontaktformular: Fehler stehen am Feld und bleiben klar fokussierbar. */
.sla-form-error-summary { scroll-margin-top: 110px; }
.sla-form-error-summary .sla-form-notice-title {
    margin: 0 0 8px;
    color: var(--sl-ink);
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 600;
}
.sla-form-error-summary ul {
    margin: 0;
    padding-left: 20px;
}
.sla-form-error-summary a {
    border-bottom-color: currentColor;
}
.sla-contact-form [aria-invalid="true"] {
    border-color: var(--sl-ink) !important;
    background: rgba(255,255,255,.72);
}
.sla-field-error {
    display: block;
    margin-top: 7px;
    color: var(--sl-ink);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}
.sla-privacy-check.has-error {
    padding: 12px;
    border: 1px solid var(--sl-ink);
}
.sla-privacy-check .sla-field-error { margin: 8px 0 0 28px; }

/* Leaflet-Popup folgt derselben Überschriftenebene wie Projektkarten. */
.sla-popover-card h3 {
    margin: 4px 0 6px;
    color: var(--sl-ink);
    font-size: 20px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.035em;
}

@media (max-width: 900px) {
    .project-conversation {
        margin-top: 60px;
        padding: 52px 20px;
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

@media (max-width: 760px) {
    .audience-paths {
        margin-top: 0;
        margin-bottom: 18px;
    }
    .project-view-switch {
        gap: 18px;
        flex-wrap: wrap;
    }
    .project-demand-actions-right { justify-content: flex-start; }
    .project-tab-buttons button {
        padding: 9px 10px;
        font-size: 10px;
    }
    .grid .card .meta-line {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2px 0;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .grid .card .meta-line span { max-width: 100%; }
    .project-conversation {
        margin-top: 48px;
        padding: 44px 18px;
    }
    .project-conversation h2,
    .home section.project-conversation h2 { font-size: 34px !important; }
}

/* ================================================================
   v1.5.6 — STARTSEITE: BEWEGUNG
   Nutzt bewusst die vorhandene Reveal-Mechanik aus v1.5.0
   (data-sla-observe / .sla-reveal / .sla-in, IntersectionObserver
   inkl. Sweep-Sicherheitsnetz in main.js). Alles unter html.sla-js
   per :where() gescopet — ohne JavaScript ist die Startseite
   unveraendert sofort sichtbar. prefers-reduced-motion schaltet
   saemtliche Bewegung ab.
   ================================================================ */

/* ---- Hero: Slideshow-Ebene --------------------------------------
   Das .hero-slide-CSS existiert seit laengerem, wurde aber von
   keinem Template gerendert. Der Container haelt die Layer jetzt
   unter dem Scrim (.hero::after, z-index 1) und unter dem Text
   (.hero-inner, z-index 2). */
.hero-slides {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    background-color: #2a2f33;
}
/* Erstes Bild ist serverseitig aktiv: ohne JS bleibt der Hero ein
   statisches Einzelbild, exakt wie bis 1.5.5. */
.hero-slides .hero-slide { z-index: 0; }
.hero-slides .hero-slide.is-active { z-index: 1; }

/* ---- Hero: gestaffelter Texteinstieg -----------------------------
   Gleiche Kurve und gleiche Keyframes wie der Projekt-Hero
   (@keyframes sla-hero-in), damit Start- und Projektseite sich
   identisch anfuehlen. */
:where(html.sla-js) .hero .hero-eyebrow {
    animation: sla-hero-in 1s cubic-bezier(.22,.61,.36,1) .15s both;
}
:where(html.sla-js) .hero h1 {
    animation: sla-hero-in 1.1s cubic-bezier(.22,.61,.36,1) .3s both;
}
:where(html.sla-js) .hero .hero-cta {
    animation: sla-hero-in 1s cubic-bezier(.22,.61,.36,1) .52s both;
}
:where(html.sla-js) .hero .sla-scroll-cue {
    animation: sla-fade-in .8s ease 1.4s both;
}
@keyframes sla-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Der Scroll-Hinweis sitzt auf der Startseite etwas tiefer als auf
   Projektseiten, weil .hero-inner unten 80px Innenabstand hat. */
.hero .sla-scroll-cue { bottom: 26px; }

/* ---- Bild-Vorhang fuer Karten -----------------------------------
   v1.5.8: entfernt. Die Karten der Startseite erscheinen wieder sofort;
   der Hover-Zoom (.card:hover img) ist davon unberuehrt. Die uebrigen
   Reveals (.sla-reveal) und der Hero-Einstieg bleiben aktiv. */

/* ---- Abschluss: Bewegung komplett aus ---------------------------
   Deckt zusaetzlich zur globalen reduce-Regel die neuen Selektoren
   namentlich ab, damit nichts unsichtbar haengen bleibt. */
@media (prefers-reduced-motion: reduce) {
    .hero .hero-eyebrow, .hero h1, .hero .hero-cta,
    .hero .sla-scroll-cue {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
    .hero-slide {
        transition: opacity .01ms !important;
        transform: none !important;
    }
}

/* ================================================================
   v1.6.2 — STARTSEITE „OBJECTS OF DESIRE"
   Eine redaktionelle Bühne für wenige unverwechselbare Projekte.
   Sämtliche Regeln sind auf .sla-desire-home begrenzt; Archiv,
   Projektseiten, Journal und Landingpages bleiben unverändert.
   v1.6.1 vereinheitlicht zusätzlich Header, Hero, Inhaltsbereiche,
   Kontakt und Footer auf denselben browserstabilen Seitencontainer.
   v1.6.2 gleicht klassische und überlagerte Browser-Scrollbars aus
   und erweitert die Auswahl auf vierzehn Projektgeschichten.
   ================================================================ */

.sla-desire-home {
    --desire-ink: #1c211f;
    --desire-paper: #f3f1eb;
    --desire-warm: #d8d0c3;
    --desire-line: rgba(28, 33, 31, .2);
    --desire-max: 1320px;
    --desire-gutter: clamp(24px, 5vw, 80px);
    --desire-shell: calc(var(--desire-max) + var(--desire-gutter) + var(--desire-gutter));
    background: var(--desire-paper);
    color: var(--desire-ink);
}

.sla-desire-home .site-main { overflow: clip; }
.sla-desire-home .site-header .nav {
    width: 100%;
    max-width: var(--desire-shell);
    padding-right: var(--desire-gutter) !important;
    padding-left: var(--desire-gutter) !important;
}
.sla-desire-home .desire-hero::after {
    background: linear-gradient(180deg, rgba(8,12,11,.04) 0%, rgba(8,12,11,.12) 44%, rgba(8,12,11,.72) 100%) !important;
}
.sla-desire-home .desire-hero-inner {
    width: 100%;
    max-width: var(--desire-shell);
    padding: 0 var(--desire-gutter) clamp(74px, 9vh, 120px);
}
.sla-desire-home .desire-hero .hero-eyebrow {
    margin-bottom: clamp(16px, 2vw, 28px);
    color: rgba(255,255,255,.88);
}
.sla-desire-home .desire-hero h1 {
    max-width: 11.5ch;
    margin-bottom: clamp(22px, 2.6vw, 34px);
    font-size: clamp(50px, 8.2vw, 126px);
    font-weight: 450;
    line-height: .94;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.sla-desire-home .desire-hero-lede {
    max-width: 48ch;
    margin: 0 0 30px;
    color: rgba(255,255,255,.92);
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.45;
    text-shadow: 0 1px 3px rgba(0,0,0,.32);
}
.sla-desire-home .desire-hero .hero-cta {
    padding: 13px 0 9px;
    border-bottom: 1px solid rgba(255,255,255,.72);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}
.sla-desire-home .desire-hero .hero-cta:hover {
    border-bottom-color: #fff;
    background: transparent;
    color: #fff;
    transform: none;
}

.desire-kicker {
    color: rgba(28, 33, 31, .62);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .19em;
    text-transform: uppercase;
}
.desire-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
}
.desire-text-link span { transition: transform .25s ease; }
.desire-text-link:hover span { transform: translate(3px, -2px); }

.desire-manifesto {
    width: 100%;
    max-width: var(--desire-shell);
    margin: 0 auto;
    padding: clamp(90px, 11vw, 170px) var(--desire-gutter);
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(0, 2fr);
    gap: clamp(44px, 8vw, 130px);
    align-items: start;
}
.desire-manifesto-body { max-width: 1050px; }
.sla-desire-home .desire-manifesto h2 {
    max-width: 18ch;
    margin: 0 0 clamp(32px, 4vw, 58px);
    color: var(--desire-ink);
    font-size: clamp(42px, 5.6vw, 82px);
    font-weight: 450;
    line-height: 1.01;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.desire-manifesto-body > p {
    max-width: 56ch;
    margin-left: auto;
    color: rgba(28, 33, 31, .76);
    font-size: clamp(18px, 1.45vw, 22px);
    line-height: 1.55;
}
.desire-manifesto-body > .desire-text-link {
    margin-left: calc(100% - min(100%, 56ch));
}

.desire-projects {
    padding: clamp(90px, 10vw, 150px) var(--desire-gutter);
    background: #fff;
}
.desire-section-head,
.desire-project-grid,
.desire-all-projects {
    width: min(100%, var(--desire-max));
    margin-right: auto;
    margin-left: auto;
}
.desire-section-head {
    padding-bottom: clamp(44px, 6vw, 78px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: end;
    border-bottom: 1px solid var(--desire-line);
}
.sla-desire-home .desire-section-head h2 {
    margin-top: 18px;
    color: var(--desire-ink);
    font-size: clamp(42px, 5.3vw, 78px);
    font-weight: 450;
    line-height: .98;
    letter-spacing: -.05em;
}
.desire-section-head > p {
    max-width: 38ch;
    margin: 0 0 7px;
    color: rgba(28, 33, 31, .65);
    font-size: 17px;
    line-height: 1.5;
}
.desire-project-grid {
    padding-top: clamp(52px, 6vw, 88px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(54px, 7vw, 105px) clamp(24px, 4.5vw, 70px);
}
.desire-project-card.is-featured { grid-column: 1 / -1; }
.desire-project-card a {
    display: block;
    color: var(--desire-ink);
    border-bottom: 0;
}
.desire-project-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #d8d7d1;
}
.desire-project-card.is-featured .desire-project-media { aspect-ratio: 16 / 8.6; }
.desire-project-media img,
.desire-project-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.desire-project-card a:hover .desire-project-media img { transform: scale(1.025); }
.desire-project-number {
    position: absolute;
    top: 18px;
    left: 18px;
    min-width: 36px;
    padding: 7px 9px;
    background: rgba(245,243,237,.92);
    color: var(--desire-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    text-align: center;
}
.desire-project-copy { padding-top: 22px; }
.desire-project-card.is-featured .desire-project-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    column-gap: 60px;
}
.desire-project-meta {
    margin-bottom: 11px;
    color: rgba(28, 33, 31, .56);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.35;
    text-transform: uppercase;
}
.desire-project-card.is-featured .desire-project-meta { grid-column: 1; }
.sla-desire-home .desire-project-copy h3 {
    margin: 0;
    color: var(--desire-ink);
    font-size: clamp(30px, 3.2vw, 50px);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -.04em;
}
.desire-project-card:not(.is-featured) .desire-project-copy h3 {
    font-size: clamp(27px, 2.8vw, 42px);
}
.desire-project-copy p {
    max-width: 43ch;
    margin: 16px 0 0;
    color: rgba(28, 33, 31, .68);
    font-size: 16px;
    line-height: 1.5;
}
.desire-project-card.is-featured .desire-project-copy p {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin: 0;
    font-size: clamp(17px, 1.3vw, 20px);
}
.desire-project-open {
    display: inline-flex;
    gap: 9px;
    margin-top: 20px;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
}
.desire-project-card a:hover .desire-project-open { border-bottom-color: currentColor; }
.desire-project-card.is-featured .desire-project-open { grid-column: 1; }
.desire-all-projects {
    margin-top: clamp(70px, 8vw, 116px);
    text-align: center;
}

.desire-definition {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    background: #202725;
    color: #f5f2ea;
}
.desire-definition-media { min-height: 760px; background: #3d443f; }
.desire-definition-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.desire-definition-copy {
    padding: clamp(74px, 9vw, 140px) clamp(36px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.desire-definition .desire-kicker { color: rgba(245,242,234,.6); }
.sla-desire-home .desire-definition h2 {
    max-width: 12ch;
    margin: 28px 0 40px;
    color: #f5f2ea;
    font-size: clamp(44px, 5vw, 76px);
    font-weight: 450;
    line-height: .99;
    letter-spacing: -.05em;
}
.desire-definition-copy p {
    max-width: 40ch;
    color: rgba(245,242,234,.72);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
}

.desire-method {
    padding: clamp(90px, 10vw, 150px) var(--desire-gutter);
    background: var(--desire-warm);
}
.desire-method-head,
.desire-method-grid {
    width: min(100%, var(--desire-max));
    margin-right: auto;
    margin-left: auto;
}
.desire-method-head {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(0, 2fr);
    gap: clamp(44px, 8vw, 130px);
    align-items: start;
}
.sla-desire-home .desire-method-head h2 {
    max-width: 17ch;
    color: var(--desire-ink);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 450;
    line-height: 1;
    letter-spacing: -.05em;
}
.desire-method-grid {
    margin-top: clamp(64px, 8vw, 112px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(28,33,31,.32);
}
.desire-method-grid article {
    min-height: 270px;
    padding: 28px clamp(20px, 3vw, 46px) 20px 0;
    border-right: 1px solid rgba(28,33,31,.32);
}
.desire-method-grid article + article { padding-left: clamp(20px, 3vw, 46px); }
.desire-method-grid article:last-child { border-right: 0; }
.desire-method-grid article > span {
    color: rgba(28,33,31,.5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
}
.sla-desire-home .desire-method-grid h3 {
    margin: 55px 0 18px;
    color: var(--desire-ink);
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 500;
    letter-spacing: -.035em;
}
.desire-method-grid p {
    max-width: 30ch;
    color: rgba(28,33,31,.68);
    font-size: 16px;
    line-height: 1.5;
}

.desire-studio {
    width: 100%;
    max-width: var(--desire-shell);
    margin: 0 auto;
    padding: clamp(90px, 11vw, 170px) var(--desire-gutter);
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
    gap: clamp(54px, 8vw, 130px);
    align-items: center;
}
.sla-desire-home .desire-studio h2 {
    max-width: 13ch;
    margin: 24px 0 34px;
    color: var(--desire-ink);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 450;
    line-height: 1;
    letter-spacing: -.05em;
}
.desire-studio-copy > p {
    max-width: 43ch;
    color: rgba(28,33,31,.7);
    font-size: 17px;
    line-height: 1.55;
}
.desire-founders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 34px);
}
.desire-founders figure { margin: 0; }
.desire-founders img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: left center;
    background: #d6d3ca;
}
.desire-founders figcaption {
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    color: var(--desire-ink);
    font-size: 13px;
    line-height: 1.4;
}
.desire-founders figcaption strong { font-weight: 600; }
.desire-founders figcaption span { color: rgba(28,33,31,.56); }

.desire-contact {
    padding: clamp(90px, 10vw, 150px) 0;
    background: #171c1b;
    color: #f4f0e7;
}
.desire-contact-inner {
    width: 100%;
    max-width: var(--desire-shell);
    margin: 0 auto;
    padding: 0 var(--desire-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
    gap: clamp(54px, 9vw, 150px);
    align-items: end;
}
.desire-contact-main,
.desire-contact-address { max-width: calc(var(--desire-max) * .72); }
.desire-contact .desire-kicker { color: rgba(244,240,231,.56); }
.sla-desire-home .desire-contact h2 {
    max-width: 13ch;
    margin: 26px 0 34px;
    color: #f4f0e7;
    font-size: clamp(48px, 6vw, 92px);
    font-weight: 450;
    line-height: .96;
    letter-spacing: -.055em;
}
.desire-contact-main > p {
    max-width: 44ch;
    color: rgba(244,240,231,.7);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
}
.desire-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    margin-top: 30px;
    padding: 15px 18px;
    border: 1px solid rgba(244,240,231,.7);
    color: #f4f0e7;
    font-size: 14px;
    font-weight: 600;
}
.desire-contact-button:hover {
    border-color: #f4f0e7;
    background: #f4f0e7;
    color: #171c1b;
}
.desire-contact-address {
    color: rgba(244,240,231,.7);
    font-size: 15px;
    font-style: normal;
    line-height: 1.65;
}
.desire-contact-address strong { color: #f4f0e7; font-weight: 600; }
.desire-contact-address a { color: inherit; }
.sla-desire-home .site-footer { background: #171c1b !important; }
.sla-desire-home .site-footer,
.sla-desire-home .site-footer a,
.sla-desire-home .site-footer .seo-footer-group a,
.sla-desire-home .site-footer .seo-footer-group h2,
.sla-desire-home .site-footer .foot-bottom,
.sla-desire-home .site-footer .foot-bottom span,
.sla-desire-home .site-footer .foot-bottom a {
    color: rgba(244,240,231,.68) !important;
}
.sla-desire-home .site-footer .foot-bottom { border-top-color: rgba(244,240,231,.18) !important; }

:where(html.sla-js) .desire-hero .desire-hero-lede {
    animation: sla-hero-in 1s cubic-bezier(.22,.61,.36,1) .5s both;
}
:where(html.sla-js) .desire-hero .hero-cta {
    animation-delay: .68s;
}

@media (max-width: 1024px) {
    .desire-manifesto,
    .desire-method-head { grid-template-columns: 140px minmax(0, 1fr); gap: 44px; }
    .desire-definition { grid-template-columns: 1fr; }
    .desire-definition-media { min-height: 0; aspect-ratio: 16 / 10; }
    .desire-definition-copy { min-height: 620px; }
    .desire-studio { grid-template-columns: 1fr; }
    .desire-studio-copy { max-width: 720px; }
    .desire-contact-inner { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
    .sla-desire-home .desire-hero-inner { padding: 0 var(--desire-gutter) 62px; }
    .sla-desire-home .desire-hero h1 { font-size: clamp(44px, 14vw, 68px); line-height: .96; }
    .sla-desire-home .desire-hero-lede { max-width: 34ch; font-size: 17px; }
    .desire-manifesto,
    .desire-method-head,
    .desire-section-head { grid-template-columns: 1fr; gap: 25px; }
    .desire-manifesto-body > p,
    .desire-manifesto-body > .desire-text-link { margin-left: 0; }
    .sla-desire-home .desire-manifesto h2,
    .sla-desire-home .desire-section-head h2,
    .sla-desire-home .desire-method-head h2,
    .sla-desire-home .desire-studio h2,
    .sla-desire-home .desire-definition h2 { font-size: 40px; line-height: 1.02; }
    .desire-project-grid { grid-template-columns: 1fr; gap: 62px; }
    .desire-project-card.is-featured { grid-column: auto; }
    .desire-project-card.is-featured .desire-project-media,
    .desire-project-media { aspect-ratio: 4 / 3; }
    .desire-project-card.is-featured .desire-project-copy { display: block; }
    .desire-project-card.is-featured .desire-project-copy p { margin-top: 16px; }
    .desire-definition-copy { min-height: 560px; padding: 72px 24px; }
    .desire-method-grid { grid-template-columns: 1fr; }
    .desire-method-grid article,
    .desire-method-grid article + article {
        min-height: 0;
        padding: 28px 0 46px;
        border-right: 0;
        border-bottom: 1px solid rgba(28,33,31,.32);
    }
    .desire-method-grid article:last-child { border-bottom: 0; }
    .sla-desire-home .desire-method-grid h3 { margin-top: 32px; }
    .desire-founders { gap: 12px; }
    .sla-desire-home .desire-contact h2 { font-size: 46px; }
    .desire-contact-button { width: 100%; }
}

@media (max-width: 420px) {
    .desire-founders { grid-template-columns: 1fr; gap: 36px; }
    .desire-founders img { aspect-ratio: 4 / 4.7; }
}

@media (prefers-reduced-motion: reduce) {
    .desire-project-media img,
    .desire-text-link span,
    .desire-hero-lede {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ================================================================
   v1.6.4 — STARTSEITE IM GLOBALEN SEITENRASTER
   Die Startseite verwendet nicht mehr ihre eigene 1320-px-Breite,
   sondern exakt --sl-maxw und dieselben Innenabstaende wie alle
   uebrigen Seiten. Damit folgt sie auch den Fullscreen-Regeln ab
   1440 px und 1800 px automatisch.
   ================================================================ */

.sla-desire-home .desire-container {
    width: 100% !important;
    max-width: var(--sl-maxw) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
    box-sizing: border-box !important;
}
.sla-desire-home .site-header .nav {
    width: 100% !important;
    max-width: var(--sl-maxw) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
}
.sla-desire-home .desire-hero-inner {
    padding-bottom: clamp(74px, 9vh, 120px);
}

.desire-manifesto,
.desire-studio {
    width: 100%;
    max-width: none;
    margin: 0;
    display: block;
}
.desire-manifesto { padding: clamp(90px, 11vw, 170px) 0; }
.desire-manifesto-inner {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(0, 2fr);
    gap: clamp(44px, 8vw, 130px);
    align-items: start;
}

.desire-projects,
.desire-method {
    padding-right: 0;
    padding-left: 0;
}
.desire-section-head,
.desire-project-grid,
.desire-all-projects,
.desire-method-head,
.desire-method-grid {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}
.desire-all-projects { margin-top: clamp(70px, 8vw, 116px); }
.desire-method-grid { margin-top: clamp(64px, 8vw, 112px); }

.desire-definition { display: block; }
.desire-definition-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
}

.desire-studio { padding: clamp(90px, 11vw, 170px) 0; }
.desire-studio-inner {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
    gap: clamp(54px, 8vw, 130px);
    align-items: center;
}

@media (max-width: 1024px) {
    .sla-desire-home .desire-container,
    .sla-desire-home .site-header .nav {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    .desire-manifesto-inner,
    .desire-method-head {
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 44px;
    }
    .desire-definition-inner,
    .desire-studio-inner { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .sla-desire-home .desire-container,
    .sla-desire-home .site-header .nav {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
    .sla-desire-home .desire-hero-inner { padding-bottom: 62px; }
    .desire-manifesto-inner,
    .desire-method-head,
    .desire-section-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}