/* =========================
   CMS DESIGN SYSTEM
   Grundsatz: Alle Blöcke wirken einheitlich.
   Standard = clean, ohne weisse Boxen/Kästen.
========================= */
:root {
    --cms-page-bg: #f5f6f8;
    --cms-text: #1f2937;
    --cms-muted: #667085;
    --cms-border: rgba(16, 24, 40, 0.12);
    --cms-shadow: 0 22px 70px rgba(16, 24, 40, 0.10);
}

body {
    background:
        radial-gradient(circle at top left, rgba(212,175,55,0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, var(--cms-page-bg) 58%, #edf1f5 100%) !important;
    color: var(--cms-text);
    font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Breiten */
.cms-block.layout-default {
    width: min(1180px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.cms-block.layout-center {
    width: min(880px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.cms-block.layout-full {
    width: 100%;
    max-width: none;
}

/* Innenabstand */
.cms-pad-none { padding-top: 0; padding-bottom: 0; }
.cms-pad-small { padding-top: clamp(12px, 2vw, 22px); padding-bottom: clamp(12px, 2vw, 22px); }
.cms-pad-medium { padding-top: clamp(28px, 4vw, 54px); padding-bottom: clamp(28px, 4vw, 54px); }
.cms-pad-large { padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(48px, 7vw, 92px); }

/* Abstand zwischen Blöcken */
.cms-space-none { margin-bottom: 0; }
.cms-space-small { margin-bottom: clamp(10px, 2vw, 20px); }
.cms-space-medium { margin-bottom: clamp(22px, 4vw, 46px); }
.cms-space-large { margin-bottom: clamp(42px, 7vw, 86px); }

.cms-block {
    position: relative;
    isolation: isolate;
}

.cms-block:hover {
    transform: none !important;
}

/* Standard: bewusst keine Box */
.cms-design-clean {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Overline: feine Akzentlinie oberhalb */
.cms-design-overline {
    border-top: 3px solid var(--cms-block-accent, #d4af37);
}

/* Overlay: dezenter Verlauf hinter dem Block */
.cms-design-overlay {
    padding-left: clamp(18px, 4vw, 56px);
    padding-right: clamp(18px, 4vw, 56px);
    color: #ffffff;
}

.cms-design-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(16,24,40,0.92), rgba(16,24,40,0.68)),
        var(--cms-block-bg, #111827);
}

/* Karte nur optional */
.cms-design-card {
    padding-left: clamp(18px, 4vw, 56px);
    padding-right: clamp(18px, 4vw, 56px);
    border: 1px solid var(--cms-border);
    border-radius: 28px;
    background: var(--cms-block-bg, #ffffff);
    box-shadow: var(--cms-shadow);
}

/* Glas nur optional */
.cms-design-glass {
    padding-left: clamp(18px, 4vw, 56px);
    padding-right: clamp(18px, 4vw, 56px);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 28px;
    background: rgba(255,255,255,0.58);
    box-shadow: var(--cms-shadow);
    backdrop-filter: blur(14px);
}

/* Textblock optisch an die anderen Blöcke angleichen */
.cms-block-text {
    max-width: 820px;
    line-height: 1.75;
    font-size: clamp(1rem, 1.4vw, 1.08rem);
}

.cms-align-center .cms-block-text { margin-left: auto; margin-right: auto; }
.cms-align-right .cms-block-text { margin-left: auto; }

.cms-block-text h1,
.cms-block-text h2,
.cms-block-text h3 {
    margin-top: 0;
    letter-spacing: -0.03em;
}

.cms-block-text h2 { font-size: clamp(1.8rem, 4vw, 3rem); }

/* Navbar bleibt komplett unberührt */
.cms-block:has(.cms-navbar-block),
.cms-block.layout-center:has(.cms-navbar-block),
.cms-block.layout-default:has(.cms-navbar-block),
.cms-block.layout-full:has(.cms-navbar-block) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

@media (max-width: 760px) {
    .cms-block.layout-default,
    .cms-block.layout-center {
        width: min(100% - 24px, 1180px);
    }

    .cms-design-card,
    .cms-design-glass,
    .cms-design-overlay {
        border-radius: 20px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* =========================
   FIX: Hero/Subhero echte Bildschirmbreite
   Hero-Blöcke dürfen nicht durch das allgemeine Block-Design-System
   in Inhaltsbreite, Karte, Glass oder Overlay-Box gezwungen werden.
========================= */
.cms-block:has(.hero-section),
.cms-block:has(.subhero) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: hidden;
}

.cms-block:has(.hero-section)::before,
.cms-block:has(.subhero)::before {
    display: none !important;
}

.cms-block:has(.hero-section) .hero-section,
.cms-block:has(.subhero) .subhero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* =====================================================
   VISUAL RHYTHM UPDATE
   Ziel: weniger leere Flächen, mehr moderne Ruhe und
   einheitlicher Abstand zwischen allen Blöcken.
===================================================== */

:root {
    --cms-content-wide: min(1120px, calc(100% - 40px));
    --cms-content-normal: min(980px, calc(100% - 40px));
    --cms-content-narrow: min(820px, calc(100% - 40px));
}

body {
    font-size: 17px;
    line-height: 1.6;
}

/* Breiten etwas grosszügiger, damit die Seite nicht wie ein dünner Strich wirkt */
.cms-block.layout-default {
    width: var(--cms-content-normal) !important;
}

.cms-block.layout-center {
    width: var(--cms-content-narrow) !important;
}

.cms-block.layout-full {
    width: 100% !important;
}

/* Kompakteres Spacing-System */
.cms-pad-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.cms-pad-small { padding-top: clamp(8px, 1.4vw, 16px) !important; padding-bottom: clamp(8px, 1.4vw, 16px) !important; }
.cms-pad-medium { padding-top: clamp(16px, 2.4vw, 32px) !important; padding-bottom: clamp(16px, 2.4vw, 32px) !important; }
.cms-pad-large { padding-top: clamp(32px, 4.8vw, 64px) !important; padding-bottom: clamp(32px, 4.8vw, 64px) !important; }

.cms-space-none { margin-bottom: 0 !important; }
.cms-space-small { margin-bottom: clamp(8px, 1.3vw, 16px) !important; }
.cms-space-medium { margin-bottom: clamp(14px, 2.2vw, 28px) !important; }
.cms-space-large { margin-bottom: clamp(28px, 4vw, 54px) !important; }

/* Direkt nach Navbar und Hero etwas sauberer Einstieg */
.cms-block:has(.cms-navbar-block) + .cms-block,
.cms-block:has(.hero-section) + .cms-block,
.cms-block:has(.subhero) + .cms-block {
    margin-top: clamp(18px, 3vw, 38px) !important;
}

/* Typografie: weniger trist, mehr Substanz */
.cms-block-text {
    max-width: 900px !important;
    font-size: clamp(1.03rem, 1.25vw, 1.18rem);
    line-height: 1.68;
}

.cms-block-text h1,
.cms-block-text h2,
.cms-block-text h3,
.media-text-content h1,
.media-text-content h2,
.media-text-content h3,
.image-text h3 {
    margin-top: 0 !important;
    margin-bottom: 0.45em !important;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #111827;
}

.cms-block-text h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
.cms-block-text h2 { font-size: clamp(2rem, 4.3vw, 3.8rem); }
.cms-block-text h3 { font-size: clamp(1.35rem, 2.3vw, 2rem); }

.cms-block-text p,
.media-text-body,
.image-text p {
    color: #374151;
}

/* Absätze kompakter */
.cms-block-text div {
    max-width: 74ch;
}

.cms-align-center .cms-block-text div {
    margin-left: auto;
    margin-right: auto;
}

.cms-block-text br + br {
    display: block;
    content: "";
    margin-top: 0.65em;
}

/* Media/Text-Blöcke: Abstand wird vom CMS-Wrapper gesteuert, nicht vom Block selbst */
.media-text,
.cms-block .media-text {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: clamp(22px, 4vw, 52px) !important;
}

.media-text-content {
    font-size: clamp(1rem, 1.15vw, 1.12rem);
}

.media-text-image img,
.cms-image {
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(16, 24, 40, 0.10);
}

/* Bildblock ohne extra Leerräume */
.image-text {
    margin-top: 12px !important;
}

.image-text h3 {
    font-size: clamp(1.25rem, 2vw, 1.8rem);
}

/* Button nicht mehr als eigener grosser leerer Abschnitt */
.cms-button-outer {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.cms-button-wrapper {
    max-width: 900px !important;
}

.cms-button {
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

.cms-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.13);
}

/* Optional Card/Glass sollen moderner, aber nicht wuchtig sein */
.cms-design-card,
.cms-design-glass,
.cms-design-overlay {
    padding-left: clamp(20px, 3.8vw, 44px) !important;
    padding-right: clamp(20px, 3.8vw, 44px) !important;
}

.cms-design-card {
    box-shadow: 0 16px 46px rgba(16, 24, 40, 0.08) !important;
}

/* Clean-Blöcke bleiben wirklich clean */
.cms-design-clean {
    background: transparent !important;
    box-shadow: none !important;
}

/* Mobile: kompakt, aber nicht gequetscht */
@media (max-width: 760px) {
    :root {
        --cms-content-wide: min(100% - 24px, 1120px);
        --cms-content-normal: min(100% - 24px, 980px);
        --cms-content-narrow: min(100% - 24px, 820px);
    }

    body {
        font-size: 16px;
    }

    .media-text,
    .cms-block .media-text {
        gap: 18px !important;
    }
}

/* =====================================================
   FINAL FIX: Hero/Subhero immer echte Bildschirmbreite
   Muss ganz am Ende stehen, damit spätere Breiten-Regeln
   Hero und Unterseiten-Hero nicht wieder verschieben.
===================================================== */
.cms-block.layout-full:has(.hero-section),
.cms-block.layout-default:has(.hero-section),
.cms-block.layout-center:has(.hero-section),
.cms-block:has(.hero-section),
.cms-block.layout-full:has(.subhero),
.cms-block.layout-default:has(.subhero),
.cms-block.layout-center:has(.subhero),
.cms-block:has(.subhero) {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.cms-block:has(.hero-section) .hero-section,
.cms-block:has(.subhero) .subhero {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}

.cms-block:has(.hero-section) + .cms-block,
.cms-block:has(.subhero) + .cms-block {
    margin-top: clamp(14px, 2.5vw, 30px) !important;
}


/* =====================================================
   STORY / PORTFOLIO DESIGN PRESETS
   Diese Klassen werden durch den neuen Gestaltungsvorschlag gesetzt.
===================================================== */
.cms-design-editorial {
    padding-left: clamp(22px, 4vw, 56px) !important;
    padding-right: clamp(22px, 4vw, 56px) !important;
    border-left: 5px solid var(--cms-block-accent, #d4af37);
    background: linear-gradient(90deg, rgba(255,255,255,0.82), rgba(255,255,255,0.22));
}

.cms-design-editorial .cms-block-text,
.cms-design-editorial .media-text-content,
.cms-design-editorial .image-text {
    position: relative;
}

.cms-design-werkstatt {
    padding-left: clamp(22px, 4vw, 52px) !important;
    padding-right: clamp(22px, 4vw, 52px) !important;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(92, 64, 43, 0.08), rgba(255,255,255,0.84)),
        var(--cms-block-bg, #fffaf2);
    border: 1px solid rgba(92, 64, 43, 0.16);
}

.cms-design-story {
    padding-left: clamp(22px, 4vw, 58px) !important;
    padding-right: clamp(22px, 4vw, 58px) !important;
}

.cms-design-story::before {
    content: "";
    position: absolute;
    left: clamp(8px, 1.6vw, 18px);
    top: clamp(26px, 4vw, 48px);
    bottom: clamp(26px, 4vw, 48px);
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cms-block-accent, #d4af37), transparent);
}

.cms-design-buehne {
    padding-left: clamp(24px, 5vw, 72px) !important;
    padding-right: clamp(24px, 5vw, 72px) !important;
    color: #ffffff !important;
    border-radius: 34px;
    background:
        radial-gradient(circle at 85% 10%, rgba(212,175,55,0.28), transparent 34%),
        linear-gradient(135deg, #101828, #1f2937 54%, #111827);
    box-shadow: 0 28px 80px rgba(16, 24, 40, 0.22);
}

.cms-design-buehne h1,
.cms-design-buehne h2,
.cms-design-buehne h3,
.cms-design-buehne .cms-block-text p,
.cms-design-buehne .media-text-body,
.cms-design-buehne .image-text p {
    color: #ffffff !important;
}

.cms-design-buehne .media-text-image img,
.cms-design-werkstatt .media-text-image img,
.cms-design-story .media-text-image img,
.cms-design-editorial .media-text-image img,
.cms-design-buehne .cms-image,
.cms-design-werkstatt .cms-image,
.cms-design-story .cms-image,
.cms-design-editorial .cms-image {
    transform: rotate(-0.25deg);
}

.cms-design-story:nth-of-type(even) .media-text-image img,
.cms-design-editorial:nth-of-type(even) .media-text-image img {
    transform: rotate(0.35deg);
}

/* Galerie lebendiger: leichte Höhenvariation, trotzdem stabil */
.cms-design-story .image-gallery-grid,
.cms-design-werkstatt .image-gallery-grid,
.cms-design-editorial .image-gallery-grid {
    align-items: stretch;
}

.cms-design-story .image-gallery-grid .gallery-image,
.cms-design-werkstatt .image-gallery-grid .gallery-image,
.cms-design-editorial .image-gallery-grid .gallery-image {
    height: clamp(210px, 24vw, 330px);
}

.cms-design-story .image-gallery-grid .cms-lightbox-trigger:nth-child(3n+1) .gallery-image,
.cms-design-werkstatt .image-gallery-grid .cms-lightbox-trigger:nth-child(3n+1) .gallery-image,
.cms-design-editorial .image-gallery-grid .cms-lightbox-trigger:nth-child(3n+1) .gallery-image {
    height: clamp(260px, 30vw, 400px);
}

/* Automatisch gesetzte Seiten-Verlinkung */
.cms-auto-page-link {
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (max-width: 760px) {
    .cms-design-editorial,
    .cms-design-werkstatt,
    .cms-design-story,
    .cms-design-buehne {
        border-radius: 22px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .cms-design-story::before { display:none; }
}

/* =====================================================
   FIX: Textblöcke gleiche Seitenbreite wie Bild+Text-Boxen
   Der Textblock nutzt nun die volle CMS-Blockbreite. Die Lesbarkeit
   bleibt durch Zeilenhöhe erhalten, aber die Box wirkt bündig mit
   Bild+Text, Image und Galerie.
===================================================== */
.cms-block-type-text .cms-block-text,
.cms-block.cms-block-type-text .cms-block-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cms-block-type-text .cms-block-text > div,
.cms-block.cms-block-type-text .cms-block-text > div {
    width: 100% !important;
    max-width: 100% !important;
}

.cms-block-type-text.layout-default,
.cms-block-type-text.layout-center {
    width: var(--cms-content-normal) !important;
}

@media (max-width: 760px) {
    .cms-block-type-text.layout-default,
    .cms-block-type-text.layout-center {
        width: min(100% - 24px, 1180px) !important;
    }
}

/* =====================================================
   FINALER BREITEN-FIX: Textblock exakt wie Bild + Text / Image
   Alle normalen Inhaltsboxen verwenden dieselbe sichtbare Breite.
   Hero/Subhero/Navbar bleiben davon ausgenommen.
===================================================== */
:root {
    --cms-unified-box-width: min(848px, calc(100% - 40px));
}

.cms-block.cms-block-type-text.layout-default,
.cms-block.cms-block-type-text.layout-center,
.cms-block.cms-block-type-image.layout-default,
.cms-block.cms-block-type-image.layout-center,
.cms-block.cms-block-type-media_text.layout-default,
.cms-block.cms-block-type-media_text.layout-center,
.cms-block.cms-block-type-gallery.layout-default,
.cms-block.cms-block-type-gallery.layout-center {
    width: var(--cms-unified-box-width) !important;
    max-width: var(--cms-unified-box-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cms-block.cms-block-type-text .cms-block-text,
.cms-block.cms-block-type-text .cms-block-text > div,
.cms-block.cms-block-type-image .image-block,
.cms-block.cms-block-type-image .image-side-layout,
.cms-block.cms-block-type-media_text .media-text,
.cms-block.cms-block-type-gallery .gallery-block,
.cms-block.cms-block-type-gallery .image-gallery-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Text bleibt bündig, aber lesbar */
.cms-block.cms-block-type-text .cms-block-text {
    line-height: 1.68;
}

@media (max-width: 760px) {
    :root {
        --cms-unified-box-width: min(100% - 24px, 848px);
    }
}