/* ==========================================================================
   ZIMMERHACKL — subpage.css
   Subpage-spezifische Styles: Hero, Back-Button, Project-Galerien
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. SUBPAGE HERO (kompakter als Index-Hero)
   ───────────────────────────────────────────────────────────────────────── */

/* BASIS — Text-only Hero (Kontakt, Impressum, Datenschutz) */
.subpage-hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(4rem, 9vw, 7rem));
    padding-bottom: clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    isolation: isolate;
    background: transparent;
}

.subpage-hero-inner {
    max-width: 64rem;
    margin-inline: 0;
    text-align: left;
}

.subpage-hero .label {
    margin-bottom: 1.4rem;
}

.subpage-hero h1 {
    font-size: var(--type-display-l);   /* Marcs 42-pt-Stufe — Kategorie-Headlines sind bei ihm genauso groß wie die Section-Headlines */
    font-variation-settings: 'opsz' 96, 'wght' 400;
    margin-bottom: 1.4rem;
    letter-spacing: -0.018em;
    color: var(--text);
    max-width: 24ch;
    margin-inline: 0;
}

.subpage-hero h1 em {
    color: var(--text);
    font-variation-settings: 'opsz' 96, 'wght' 420;
}

.subpage-hero-lead {
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    line-height: 1.55;
    color: var(--text-body);
    max-width: 60ch;
    margin: 0;
}

/* Zweiter Intro-Absatz (Copy-Start ohne Hero-Bild) — Abstand wie bei welcome-body */
.subpage-hero-lead + .subpage-hero-lead {
    margin-top: 1.15rem;
}

/* Kontakt-Opener bleibt ZENTRIERT — er sitzt über dem zentrierten Formular-Modul
   (kontakt-form-head + ob-form sind mittig); ein linker Intro über zentriertem
   Formular wirkt zerrissen. Portfolio-/Editorial-/Legal-Subpages bleiben linksbündig. */
.subpage-hero--center .subpage-hero-inner { margin-inline: auto; text-align: center; }
.subpage-hero--center h1 { margin-inline: auto; }
.subpage-hero--center .subpage-hero-lead { margin-inline: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   2. BACK-BUTTON (statisch, in-flow oben im Content)
   ───────────────────────────────────────────────────────────────────────── */

.back-area {
    padding-top: clamp(1rem, 2.5vw, 1.6rem);
    padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-body);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    transition: border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

.back-link::before {
    content: '←';
    font-weight: 400;
    transition: transform var(--dur-normal) var(--ease);
}

.back-link:hover {
    color: var(--accent-deep);
    border-color: var(--accent-40);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 14%, white),
        color-mix(in oklch, var(--accent) 8%, white));
    box-shadow: var(--depth-soft), var(--depth-glow);
}

.back-link:hover::before {
    transform: translateX(-3px);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. PROJECT-LIST (Editorial-Stack auf Subpages)
   ───────────────────────────────────────────────────────────────────────── */

.projects {
    padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem);
}

.project {
    /* Timo 07/2026: Abstand Projekt→Projekt = Abstand der Editionen auf
       editionen.html (dort 2× Section-Padding zwischen den Showcases). */
    margin-bottom: calc(2 * var(--section-pad));
}

.project:last-child {
    margin-bottom: 0;
}

/* Projekt-Kopf = Editionen-Kopf-Muster (Marcs PDF: uppercase Display-Headline,
   einfarbig, ohne Punkt, keine Meta-Trennlinie), eine Größenstufe leiser als
   die Editionen-Headline — Projekte stehen zu mehreren untereinander. */
.project-header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);   /* mehr Luft zur Galerie (Editionen-Rhythmus) */
}

.project-header .label {
    margin-bottom: 1.2rem;                     /* Standard Eyebrow→Headline */
}

.project-header h2 {
    /* Timo 07/2026: Fontgrößen site-weit vereinheitlicht = Editionen-Niveau
       (.edition-headline). Marcs PDF-Fonts sind uneinheitlich gesetzt und
       daher KEIN Maßstab für Größen. */
    text-transform: uppercase;
    font-variation-settings: 'opsz' 96, 'wght' 400;
    font-size: var(--type-display-l);
    line-height: 1.02;
    letter-spacing: -0.005em;
    margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
    text-wrap: balance;
}

.project-meta {
    /* PDF Juli 2026: Haarlinie über dem Meta-Block, GERÄTE-Spalte startet
       bei 28,3% der Content-Breite (x553 auf 1400). */
    display: grid;
    grid-template-columns: minmax(11rem, 28.3%) 1fr;
    gap: 0.9rem 1.5rem;
    margin-top: clamp(1.3rem, 2.4vw, 2.3rem);
    padding-top: clamp(0.9rem, 1.5vw, 1.3rem);
    border-top: 1px solid var(--border);
}

.project-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 9rem;
}

.project-meta-label {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

.project-meta-value {
    font-family: var(--font-sans);
    font-size: 1.06rem;
    color: var(--text-soft);                   /* leiser als die Headline (edition-meta) */
    font-weight: 300;
    letter-spacing: 0.01em;
}

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

.project-text p {
    /* = .edition-body (Timo 07/2026: einheitliche Größen auf allen Subpages) */
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-body);
    max-width: 52ch;
}

/* Project-Galerie — Marcs 2/4-Spalten-System als Masonry.
   Natürliche Bildproportionen (kein Crop): Hoch- (2:3) und Querformate (3:2)
   packen sich lückenlos ineinander. Responsiv 2 → 3 → 4 Spalten; Marc nannte
   2 und 4, die 3 ist die ruhige Brücke für mittlere Breiten.
   CSS-Columns statt Grid, weil nur so natürliche Höhen ohne Lücken laufen. */
.project-gallery {
    columns: 2;
    column-gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
@media (min-width: 768px) {
    .project-gallery { columns: 3; }
}
@media (min-width: 1200px) {
    .project-gallery { columns: 4; }
}

.gal-item {
    position: relative;
    /* keine aspect-ratio → natürliche Bildhöhe, kein Crop */
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    cursor: pointer;
    /* Masonry-Abstand: column-gap deckt horizontal, margin-bottom vertikal.
       break-inside verhindert, dass eine Kachel über die Spaltengrenze reißt. */
    margin-bottom: clamp(0.6rem, 1.4vw, 1.1rem);
    break-inside: avoid;
    /* Pompa: harte Kanten, kein Schatten. Sichtbarkeit + Scroll-Timeline-Reveal
       (pompa-reveal via view()) übernimmt der Foundation-Block weiter unten. */
}

/* Container selbst NICHT mehr block-faden — die einzelnen .gal-item übernehmen
   den Reveal. Sonst animiert die ganze (mehrere Screens hohe) Galerie als ein
   Block, sobald ihre Oberkante eintritt, und untere Reihen sind fertig bevor
   man hinscrollt. */
.project-gallery.reveal-fog,
.project-gallery.reveal-fog.visible {
    opacity: 1;
    filter: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .gal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Pompa: kein Glass-Highlight ::before — die Kachel bleibt flach. */

.gal-item img {
    display: block;
    width: 100%;
    height: auto;          /* natürliche Proportion, kein Crop */
}

/* Pompa: kein Hover-Shadow, kein Bild-Zoom — nur der weiße Schleier (::after). */

/* ─────────────────────────────────────────────────────────────────────────
   4. EINZELSTÜCKE-GRID (kompakter — pro Stück eine Card)
   ───────────────────────────────────────────────────────────────────────── */

.stueck-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: clamp(4rem, 8vw, 6rem);
}

@media (min-width: 720px) {
    .stueck-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .stueck-overview {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stueck-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
}

.stueck-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-soft);
    transition: box-shadow var(--dur-medium) var(--ease);
}

.stueck-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.stueck-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s var(--ease);
}

.stueck-card:hover .stueck-card-image {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.stueck-card:hover .stueck-card-image img {
    transform: scale(1.04);
}

.stueck-card-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.04em;
    margin-bottom: -0.2rem;
}

.stueck-card-title {
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-variation-settings: 'opsz' 48, 'wght' 420;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

.stueck-card-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-body);
    margin: 0;
}

.stueck-card-material {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-weight: 400;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-soft);
}

/* ─────────────────────────────────────────────────────────────────────────
   5. EDITIONEN HERO-STÜCK (eigene Section)
   ───────────────────────────────────────────────────────────────────────── */

.edition-hero {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: transparent;
}

.edition-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .edition-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.edition-hero-text .label {
    margin-bottom: 1.2rem;
}

.edition-hero-text h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    margin-bottom: 1.6rem;
    max-width: 16ch;
}

.edition-hero-text h2 em {
    color: var(--text);
}

.edition-hero-text p {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.6;
    color: var(--text-body);
    max-width: 36rem;
    margin-bottom: 1.4rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. EDITIONEN-LIST (Stack mit Bild + Text alternierend)
   ───────────────────────────────────────────────────────────────────────── */

.edition-list {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.edition-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    margin-bottom: clamp(4rem, 8vw, 7rem);
}

.edition-item:last-child {
    margin-bottom: 0;
}

@media (min-width: 800px) {
    .edition-item {
        grid-template-columns: 1fr 1fr;
    }
    .edition-item--reverse .edition-item-image {
        order: 2;
    }
}

.edition-item-image {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-rest);
}

.edition-item-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.edition-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.edition-item:hover .edition-item-image img {
    transform: scale(1.03);
}

.edition-item-text .label {
    margin-bottom: 1rem;
}

.edition-item-text h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.edition-item-text p {
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 1.2rem;
    max-width: 36rem;
}

.edition-item-material {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
    max-width: 36rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. KONTAKT-PAGE (Direkt-Kontakt + Form-Placeholder)
   ───────────────────────────────────────────────────────────────────────── */

.kontakt-page-section {
    padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem);
    /* Getönter Grund, damit das helle Briefpapier-Blatt klar darüber schwebt. */
    background: transparent;
}

.kontakt-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 900px) {
    .kontakt-page-grid {
        grid-template-columns: 1fr 1.4fr;
    }
}

.kontakt-page-info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.kontakt-page-info h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    margin-bottom: 0.4rem;
    max-width: 16ch;
}

.kontakt-page-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    max-width: 32rem;
}

/* Kontakt-Cards-Pattern bleibt gleich wie auf Index */

/* ─────────────────────────────────────────────────────────────────────────
   8. LEGAL PAGES (Impressum, Datenschutz)
   ───────────────────────────────────────────────────────────────────────── */

.legal-section {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
}

.legal-section h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-variation-settings: 'opsz' 48, 'wght' 440;
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--border-soft);
}

.legal-section h2:first-of-type {
    margin-top: 1rem;
    padding-top: 0;
    border-top: none;
}

.legal-section h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-variation-settings: 'opsz' 36, 'wght' 480;
    margin-top: 1.8rem;
    margin-bottom: 0.7rem;
}

.legal-section p,
.legal-section li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 0.9rem;
}

.legal-section ul {
    padding-left: 1.4rem;
    margin-bottom: 1.4rem;
}

.legal-section a {
    color: var(--accent-deep);
    text-decoration: underline;
    text-decoration-color: var(--accent-40);
    text-underline-offset: 3px;
}

.legal-section a:hover {
    text-decoration-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. FAQ-SECTION (Schreinereinbauten-Subpage)
   ───────────────────────────────────────────────────────────────────────── */

.faq-section {
    padding-block: clamp(4rem, 8vw, 7rem);
    background: transparent;
}

.faq-section .section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.faq-section .section-header h2 {
    max-width: none;
    margin-inline: auto;
}

.faq-section .section-header .label::before {
    margin-right: 0.6rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-soft);
}

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

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-variation-settings: 'opsz' 36, 'wght' 420;
    line-height: 1.3;
    color: var(--text);
    transition: color var(--dur-normal) var(--ease);
}

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

.faq-item summary:hover {
    color: var(--accent-deep);
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1;
    transition: transform var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease);
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.faq-item summary:hover .faq-icon {
    border-color: var(--accent-40);
    color: var(--accent-deep);
}

.faq-answer {
    padding: 0.3rem 0 1.8rem;
    max-width: 64ch;
}

.faq-answer p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-body);
    margin-bottom: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    margin: 0.4rem 0 1rem;
    padding-left: 1.2rem;
    list-style: none;
}

.faq-answer li {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-body);
    padding-left: 0.4rem;
    position: relative;
    margin-bottom: 0.3rem;
}

.faq-answer li::before {
    content: '·';
    color: var(--accent);
    font-weight: 700;
    position: absolute;
    left: -0.7rem;
}


/* ==========================================================================
   POMPA-MODUS — V2 FOUNDATION (Subpage-Teil)
   Lädt nach style.css → überschreibt die Subpage-eigenen Reveals + Zoom-Hovers.
   ========================================================================== */

/* Container NICHT animieren — sonst fadet die mehrere Screens hohe Galerie als
   ein Block (das globale .reveal-fog-Scroll-Timeline aus style.css würde sonst
   greifen). Die einzelnen .gal-item übernehmen den Reveal pro Element. */
.project-gallery.reveal-fog {
    opacity: 1;
    animation: none;
}

/* gal-item: war opacity:0 + JS-.visible. JS ist aus → Basis sichtbar,
   Reveal jetzt pro Element via Scroll-Timeline (löst das Lange-Galerie-Problem
   von Natur aus, weil view() pro Element zählt). */
.gal-item {
    opacity: 1;
    transform: none;
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .gal-item {
            animation: pompa-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}

/* Bild bleibt ruhig: kein Zoom, kein Brightness-Shift (Original-Hover raus). */
.gal-item:hover img,
.stueck-card:hover .stueck-card-image img,
.edition-item:hover .edition-item-image img {
    transform: none;
    filter: none;
}

/* Pompa: zarter weißer Schleier als Klick-Hinweis (Lightbox). Werte wie Homepage. */
.gal-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.5s var(--ease-pompa);
}
.gal-item:hover::after {
    opacity: 0.15;
    transition: opacity 0.3s var(--ease-pompa);   /* Hover-IN responsiv; OUT (Basis) 0.5s = sanfter (Marc) */
}

/* ──────────────────────────────────────────────────────────────────────────
   HOCKER-EDITORIAL — Marcs großes 2-Spalten-Spread (web-06-Geometrie).
   Gemessen aus dem Entwurf (2688×1512): Bilder ~40 % Viewport-Breite,
   Außenrand ~7 %, Querformate vertikal zentriert gegen die hohen Hochformate.
   Bricht aus dem .container (max 1400px) auf volle Viewport-Breite aus —
   body hat overflow-x: clip, also kein Horizontal-Scroll.
   ────────────────────────────────────────────────────────────────────────── */
.ed-spread {
    /* Inhaltsbreite = min(86vw, 140vh). 86vw = 7vw Rand/Seite = Marcs ~7,4 % (PDF).
       Der vh-Term ist der Viewport-Deckel: er greift NUR auf breiten ≥~1.6:1-Screens
       (16:9 etc.). PRINZIP (User): das höchste Element — ein 2:3-Hochformat auf HALBER
       Spaltenbreite (R3-Anker / 2-Hoch-Paar) — bestimmt die vertikale Bühne und geht
       fast bündig an den oberen+unteren Viewport (~98vh bei 140vh). DARAUS ergibt sich
       der Seitenrand zwangsläufig (~10.6vw auf 16:9) — Höhe und Seitenrand sind bei
       halber Breite 1:1 gekoppelt. ~142vh wäre bündig (100vh, ~10vw) = Limit ohne
       Overflow. Marcs 7% Seitenrand ginge nur, wenn diese Hochformate über den Viewport
       ragen (~115vh, Scroll) ODER die R2[HH]/R3-Reihen umgebaut werden.
       ALLE Reihen nutzen var(--ed-w) → gleichmäßiger Schrumpf → Staffelstab bleibt. */
    --ed-w: min(86vw, 140vh);
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    padding-inline: 0;
    margin-top: clamp(2.5rem, 6vh, 5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 9vh, 8rem);
}

.ed-row {
    width: var(--ed-w);
    align-self: center;           /* schmalere Spalte mittig im Full-Bleed */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;          /* kürzeres Querbild zentriert gegen das hohe */
}

.ed-row--single {
    grid-template-columns: minmax(0, 46%);
    justify-content: center;
}

/* FULL — einzelnes Querformat über die volle Reihenbreite (86vw, kinoartig).
   Anker an Sektionsnähten: sorgt für die durchgehende Kante. */
.ed-row--full {
    grid-template-columns: 1fr;
}

/* NARROW — Breiten-Staffelstab: Reihe auf ~80% (≈69vw) zentriert. Kombinierbar
   mit .ed-row (2-up bei 69vw) ODER .ed-row--full (1 Bild bei 69vw). So endet eine
   Sektion auf einer schmalen Kante und die nächste übernimmt exakt diese Breite. */
.ed-row--narrow {
    width: calc(var(--ed-w) * 0.8);
    align-self: center;
}

/* TRI — Triptychon aus 3 Hochformaten nebeneinander. Für reine
   Hochformat-Sektionen (kein Querformat zum Stapeln vorhanden). */
.ed-row--tri {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3.5vw, 4rem);
}

/* R3 — Anker (1 Hochformat, volle Reihenhöhe) + 2 gestapelte Querformate.
   Ankerseite = Reihenfolge der Kinder im HTML:
   links  → <div class="gal-item">(hoch)  + <div class="ed-stack">
   rechts → <div class="ed-stack"> + <div class="gal-item">(hoch) */
.ed-row--r3 {
    grid-template-columns: 1fr 1fr;
}

/* PAIR — justiertes Hoch+Quer-Paar: Spalten nach Seitenverhältnis (2:3 & 3:2),
   so sind BEIDE Bilder exakt gleich hoch und randvoll → kein Zufalls-Weißraum.
   4fr (Hochformat) : 9fr (Querformat) ergibt rechnerisch identische Höhe.
   --pl = Hoch links, Quer rechts · --lp = Quer links, Hoch rechts. */
.ed-row--pl { grid-template-columns: 4fr 9fr; }
.ed-row--lp { grid-template-columns: 9fr 4fr; }

/* Span-2 im TRI-Raster: ein Querformat über 2 der 3 Triptychon-Spalten. So sitzt
   die Gasse EXAKT auf der Triptychon-Spaltenlinie (durchgehende Flucht, kein
   Beinahe-Treffer) statt auf der 4:9-Paar-Teilung. align-items:center (von .ed-row)
   zentriert das kürzere Quer gegen das hohe Hochformat. */
.ed-span2 { grid-column: span 2; }
.ed-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    justify-content: center;
}

/* gal-item im Spread: Masonry-Reste neutralisieren, natürliche Bildhöhe.
   Veil-Hover + Lightbox + pompa-reveal bleiben aktiv (gleiche .gal-item). */
.ed-spread .gal-item {
    margin-bottom: 0;
    break-inside: auto;
}
/* Bilder füllen ihre Zelle randvoll (kein Per-Bild-Cap mehr → keine Leerflächen).
   Der Viewport-Fit kommt aus der begrenzten Spaltenbreite --ed-w (s.o.). */
.ed-spread .gal-item img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .ed-spread {
        padding-inline: 6vw;
        gap: clamp(2rem, 5vh, 3rem);
    }
    .ed-row,
    .ed-row--single,
    .ed-row--full,
    .ed-row--tri,
    .ed-row--r3 {
        grid-template-columns: 1fr;
        width: auto;
    }
    .ed-span2 { grid-column: auto; }   /* mobil gestapelt, kein Span */
    .ed-row--narrow { width: auto; }   /* mobil volle Breite, kein Staffelstab */
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. SEO-LANDINGPAGES (schreinerei-bad-toelz / -tegernsee / -starnberg)
   Komponiert aus bestehenden V2-Bausteinen (Hero, Reviews, FAQ, Buttons);
   nur diese paar eigenen Regeln für Fließtext, Vorteils-Liste, Bild+Text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero: lange Satz-H1 (Keyword) zähmen — kleiner + breiter als die Kategorie-H1 */
.subpage-hero--seo .subpage-hero-inner h1 {
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.14;
    max-width: 26ch;
}

/* Editorial-Textsektion */
.seo-section { padding-block: clamp(2.6rem, 5.5vw, 4.5rem); }
.seo-prose { max-width: 64ch; }
.seo-prose h2 { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.seo-prose > p {
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    line-height: 1.72;
    color: var(--text-soft);
    margin-bottom: 1.05rem;
}
.seo-prose > p:last-child { margin-bottom: 0; }

/* Vorteils-Checkliste */
.seo-list {
    list-style: none;
    margin: clamp(1.2rem, 2.4vw, 1.7rem) 0 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
    max-width: 64ch;
}
.seo-list li {
    position: relative;
    padding-left: 1.75rem;
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.5;
    color: var(--text-soft);
}
.seo-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

/* Bild + Text (Beratung mit Marc, Showroom) */
.seo-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.seo-media-img { overflow: hidden; }
.seo-media-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}
.seo-media--showroom .seo-media-img img { aspect-ratio: 3 / 2; }
.seo-media--rev .seo-media-img { order: 2; }   /* Bild rechts (Text links) */

/* CTA-Buttons-Reihe */
.seo-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: clamp(1.4rem, 3vw, 2rem);
}

@media (max-width: 768px) {
    .seo-media { grid-template-columns: 1fr; gap: 1.8rem; }
    .seo-media--rev .seo-media-img { order: 0; }
}