/* ============================================================================ * layout-bleed.css * * Wiederverwendbares Desktop-Layoutsystem für Flora. * * Aktivierung: (opt-in pro Seite) * Mobile (<1024px) bleibt unverändert – die bestehenden Section-Cards greifen. * * Konzept: * - Auf Desktop wird .page-main zu einer vollen, rahmenlosen Bahn * - .section-card verliert den Karten-Look (Schatten, Border, Radius) * und wird zu einem flachen, edge-to-edge Section-Band * - Innen-Inhalte werden über CSS-Tokens auf lesbare Breiten begrenzt * - Dekorative Varianten (--tinted, --floral, --canvas, --winter, --spring) * behalten ihre Farbflächen, verlieren aber Card-Chrome * * Tokens (überschreibbar pro Seite/Section): * --content-narrow 720px reine Prosa * --content-readable 960px Headlines + Intros * --content-wide 1280px Grids, mehrspaltige Layouts * --content-max 1440px harte Obergrenze * --section-pad-block vertikales Section-Padding * --section-pad-inline horizontales Section-Padding * * Escape-Hatch: * Direkt-Kinder einer .section-card mit .is-bleed oder [data-bleed] dürfen * wieder auf 100% Breite ausbrechen (z. B. Marquee-Tracks, Hero-Banner). * ============================================================================ */ @media (min-width: 1024px) { body.layout-bleed { --content-narrow: 720px; --content-readable: 960px; --content-wide: 1280px; --content-max: 1440px; --section-pad-block: clamp(56px, 7vw, 110px); --section-pad-inline: clamp(32px, 5vw, 80px); --section-rhythm: clamp(20px, 2.5vw, 40px); } /* ---------- Page main: volle Breite, keine globalen Paddings/Gaps ---------- */ body.layout-bleed .page-main { max-width: 100%; padding-inline: 0; padding-top: 0; padding-bottom: 0; gap: 0; } /* ---------- Sections: flache, randlose Bänder ---------- Sections mit eigenem Theme-Hintergrund (--dark, .home-story-editorial) werden vom :not()-Filter ausgeklammert, damit ihr Background bestehen bleibt. */ body.layout-bleed .page-main > .section-card { border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; margin: 0; width: 100%; max-width: 100%; padding: var(--section-pad-block) var(--section-pad-inline); } body.layout-bleed .page-main > .section-card:not(.section-card--dark):not(.section-card--notice):not(.home-story-editorial) { background: none; } body.layout-bleed .page-main > .section-card::before { display: none; } /* ---------- Innen-Inhalte: zentriert + lesbare Breite ---------- */ body.layout-bleed .page-main > .section-card > * { width: 100%; max-width: var(--content-wide); margin-inline: auto; } /* Headlines / Intro-Prosa schmaler */ body.layout-bleed .page-main > .section-card > .home-section-head, body.layout-bleed .page-main > .section-card > .section-head, body.layout-bleed .page-main > .section-card > .section-intro, body.layout-bleed .page-main > .section-card > p { max-width: var(--content-readable); } /* ---------- Bleed-Escape: Kinder dürfen auf voller Breite ausbrechen ---------- */ body.layout-bleed .page-main > .section-card > .is-bleed, body.layout-bleed .page-main > .section-card > [data-bleed], body.layout-bleed .page-main > .section-card .home-showcase__track { max-width: none; } /* ---------- Dekorative Varianten: Farbe behalten, Chrome droppen ---------- */ body.layout-bleed .page-main > .section-card--tinted, body.layout-bleed .page-main > .section-card--floral, body.layout-bleed .page-main > .section-card--canvas, body.layout-bleed .page-main > .section-card--winter, body.layout-bleed .page-main > .section-card--spring, body.layout-bleed .page-main > .section-card--featured-drinks { border-radius: 0; border: none; box-shadow: none; margin: 0; } /* Spring-Dekor: Decorative-Layer für volle Bahn neu positionieren */ body.layout-bleed .page-main > .section-card--spring::after { inset: 0 0 auto 0; } /* ---------- Hero / Final-CTA: schon edge-to-edge, nur Margins säubern ---------- */ body.layout-bleed .page-main > .home-hero, body.layout-bleed .page-main > .home-final-cta, body.layout-bleed .page-main > .hero { width: 100%; margin-inline: 0; } /* ---------- Section-Modifier: --bleed = ohne horizontales Padding ---------- */ /* Für Sections mit Inhalten, die zwingend bis an den Rand laufen müssen (z. B. Marquees, randlose Hero-Bahnen, durchlaufende Bildslider). */ body.layout-bleed .page-main > .section-card--bleed, body.layout-bleed .page-main > .section-card.home-showcase { padding-inline: 0; } /* ---------- Section-Modifier: --compact = engere vertikale Höhe ---------- Für Hinweise, Banner oder Übergangs-Sections, die keinen vollen Abstand brauchen sondern an die Nachbarn andocken sollen. */ body.layout-bleed .page-main > .section-card--compact { padding-block: clamp(28px, 3.5vw, 60px); } /* ---------- Section-Modifier: --notice = warmer Hinweis-Streifen ---------- Wiederverwendbar für Banner, Aktions-Hinweise, Statusmeldungen. Etwas wärmer als --tinted, hebt sich dezent von neutralen Sections ab. */ body.layout-bleed .page-main > .section-card--notice { background: linear-gradient(160deg, rgba(255, 232, 215, 0.92), rgba(255, 248, 240, 0.95)); } /* ---------- Section-Modifier: --dark = dunkles Theme-Band ---------- Wiederverwendbare dunkle Section mit hellem Text. Kann auf jeder Seite mit

genutzt werden. Eigene Hintergründe (z. B. Verläufe) können per zusätzlicher Klasse darübergelegt werden. */ body.layout-bleed .page-main > .section-card--dark { background: linear-gradient(145deg, rgba(42, 26, 20, 0.97) 0%, rgba(62, 35, 28, 0.95) 100%); color: rgba(255, 248, 240, 0.92); } body.layout-bleed .page-main > .section-card--dark h1, body.layout-bleed .page-main > .section-card--dark h2, body.layout-bleed .page-main > .section-card--dark h3, body.layout-bleed .page-main > .section-card--dark h4 { color: rgba(255, 248, 240, 0.97); } body.layout-bleed .page-main > .section-card--dark p { color: rgba(255, 240, 228, 0.78); } /* ---------- Container-Utility: optional in Markup nutzbar ---------- */ body.layout-bleed .container-narrow { max-width: var(--content-narrow); margin-inline: auto; } body.layout-bleed .container-readable { max-width: var(--content-readable); margin-inline: auto; } body.layout-bleed .container-wide { max-width: var(--content-wide); margin-inline: auto; } body.layout-bleed .container-max { max-width: var(--content-max); margin-inline: auto; } }