/* ============================================================
   commission_landing.css · Landingpage Auftragsmalerei (/auftragsmalerei/)
   Sections: page_manager/sections/commission_*.php (Prefix .cl-)
   Baut auf tokens/*.css, btn.css und magazin/v2/article.css auf.
   Geladen über content_inc/section/commission_landing/assets.php.
   ============================================================ */

.cl-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.cl-section { padding: 96px 0; background: var(--bg); color: var(--color-text); }

.cl-kicker {
    display: inline-flex; align-items: center; gap: .7em;
    font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
    color: var(--color-accent); margin-bottom: 18px;
}
.cl-kicker::before { content: ""; width: 2.2em; height: 1px; background: var(--color-accent); opacity: .6; }

.cl-section .cl-h2,
.cl-h2 {
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.01em;
    margin: 0 0 20px; padding: 0; color: var(--color-fg, var(--fg));
}
.cl-h2 em { font-style: normal; color: var(--color-accent); }
.cl-lead { font-size: 18px; line-height: 1.6; max-width: 640px; margin: 0 0 20px; opacity: .85; }
.cl-small { font-size: 15px; line-height: 1.6; opacity: .75; margin: 0 0 8px; }

/* ── Versprechen-Leiste (Glas, unter dem Hero) ── */
.cl-promise { padding: 64px 0 64px; background: var(--bg); color: var(--fg); }
.cl-promise-grid { display: flex; gap: 48px; }
.cl-promise-item { flex: 1 1 0; padding: 0; }
.cl-promise-item b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 6px; }
.cl-promise-item b i { font-style: normal; color: var(--color-accent); margin-right: 8px; }
.cl-promise-item span { font-size: 14px; line-height: 1.5; opacity: .75; }
.cl-promise-icon { display: block; width: 30px; height: 30px; margin-bottom: 16px; color: var(--color-accent); fill: currentColor; }
.cl-promise-icon--line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Höhepunkt: Vollbild ──
   commission_peak.php nutzt jetzt den Baustein room_peak (css/room_peak.css, Klassen .room-peak-*).
   Die .cl-peak-Regeln hier greifen nicht mehr, bleiben aber stehen. */
.cl-peak { position: relative; min-height: 100vh; display: flex; align-items: flex-end; background: var(--bg); color: var(--fg); overflow: hidden; }
.cl-peak-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.cl-peak-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-peak-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(0deg, var(--bg) 0%, rgba(0,0,0,0) 100%); }
.cl-peak-text { position: relative; z-index: 2; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 24px 96px; box-sizing: border-box; }
.cl-peak .cl-peak-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 9vw, 140px); line-height: .95; letter-spacing: -.015em; margin: 0 0 24px; padding: 0; color: var(--fg); }
.cl-peak-title em { font-style: normal; color: var(--color-accent); }
.cl-peak-text p { font-size: 20px; line-height: 1.6; max-width: 620px; margin: 0 0 10px; opacity: .9; }

/* Dynamisch: Raum + Werk aus dem Room Manager (Szene = Klassen aus css/hub_room_teaser.css, js/commission_peak.js) */
.cl-peak--rooms .cl-peak-image { --hrt-image-h: 100vh; overflow: hidden; }
.cl-peak-image::after { pointer-events: none; }
.cl-peak--rooms .hub-room-teaser-scene * { box-sizing: border-box; }
/* breit: Raum etwas größer als der Bildschirm, damit das Gemälde nach rechts oben rücken kann (JS) */
.cl-peak--rooms .hub-room-teaser-scene { width: 125%; width: max(125%, calc(var(--hrt-image-h) * var(--room-ratio))); }
.cl-peak--rooms .hub-room-teaser-art { display: block; cursor: pointer; }
.cl-peak-credit {
    position: absolute; right: 24px; bottom: 32px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: .08em; color: var(--fg); text-decoration: none;
    opacity: .6; transition: opacity .25s ease;
}
.cl-peak-credit:hover, .cl-peak-credit:focus { opacity: 1; }
.cl-peak-credit svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ── Pain: "Alles gewöhnlich. Außer Ihrem Bild." (commission_ordinary.php) ── */
.cl-ordinary { padding: 128px 0; }
.cl-section .cl-ordinary-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 7.5vw, 120px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 32px; padding: 0; max-width: 12ch; color: var(--color-fg, var(--fg)); }
.cl-ordinary-title em { font-style: normal; color: var(--color-accent); }
.cl-ordinary-text { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.55; max-width: 720px; margin: 0; opacity: .85; }

/* ── Einleitung (Magazin) ── */
.cl-mag .az-guide { max-width: 1000px; margin: 0 auto; }
.cl-mag-cols { display: flex; gap: 48px; align-items: flex-start; }
.cl-mag-text { flex: 1 1 58%; }
.cl-mag-note { flex: 1 1 42%; margin-top: 0 !important; }
.cl-mag .az-guide p.cl-mag-p { font-size: 19px; line-height: 1.7; color: var(--az-fg2); margin: 0 0 18px; }

/* ── Für wen ── */
.cl-for { display: flex; gap: 24px; max-width: none; }
.cl-for .az-fit-box { flex: 1 1 0; margin: 0; padding: 36px; }
.cl-for .az-fit-box h4 { font-size: 34px; text-transform: uppercase; }
.cl-for .az-fit-box p { font-size: 17px; line-height: 1.6; color: var(--az-fg2); }
.cl-for .az-fit-box .btn { margin-top: 20px; }
/* Für wen: auf Weiß, ohne Rahmen/Hintergrund, Trennlinie zwischen den Spalten */
.cl-audience { background: #fff; }
.cl-section .az-guide.cl-for { padding-left: 0; }   /* .az-guide (article.css) hat padding-inline → links bündig mit der Überschrift */
.cl-section .cl-for .az-fit-box { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 8px 48px; }
.cl-section .cl-for .az-fit-box::before, .cl-section .cl-for .az-fit-box::after { display: none; }
.cl-section .cl-for .az-fit-box:first-child { padding-left: 0; }
.cl-section .cl-for .az-fit-box + .az-fit-box { border-left: 1px solid var(--border); padding-right: 0; }
.cl-for-list { list-style: none; padding: 0; margin: 18px 0 0; }
.cl-for-list li { padding: 8px 0 8px 26px; position: relative; border-top: 1px solid var(--az-border); font-size: 15px; }
.cl-for-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
/* Häkchen = Kreis (li::before) + Haken (li::after) aus magazin/v2/article.css: beide mittig zur Zeile, Liste bündig mit dem Text */
.cl-section .az-guide.cl-for .cl-for-list { margin: 18px 0 0; padding: 0; }
.cl-section .az-guide.cl-for .cl-for-list li { position: relative; margin: 0; padding: 14px 0 14px 40px; line-height: 1.5; }
.cl-section .az-guide.cl-for .cl-for-list li::before { left: 0; top: 50%; margin: -.6rem 0 0; }              /* Kreis 1.2rem (article.css) → halbe Höhe hoch */
.cl-section .az-guide.cl-for .cl-for-list li::after { top: 50%; margin: calc(-.6rem + .2em) 0 0; }             /* Haken: wie in article.css .2em unter Kreis-Oberkante */
.cl-for .az-fit-box p.cl-for-note { font-size: 13px; opacity: .75; margin: 16px 0 0; }

/* ── Ablauf ── */
.cl-steps { display: flex; border-top: 1px solid var(--border); }
.cl-step { flex: 1 1 0; padding: 32px 28px 0 0; }
.cl-step-num { display: block; font-family: var(--font-display); font-size: 72px; font-weight: 800; line-height: 1; color: var(--color-accent); margin-bottom: 14px; }
.cl-step h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 10px; padding: 0; }
.cl-step p { font-size: 15px; line-height: 1.6; opacity: .8; margin: 0; }

/* ── Atelier ── */
.cl-studio { display: flex; gap: 64px; align-items: flex-start; }
.cl-studio-head { flex: 1 1 50%; }
.cl-studio-text { flex: 1 1 50%; padding-top: 34px; }
.cl-stats { display: flex; margin: 40px 0 0; border-top: 1px solid var(--border); }
.cl-stat { flex: 1 1 0; padding: 28px 24px 4px; border-left: 1px solid var(--border); }
.cl-stat:first-child { padding-left: 0; border-left: 0; }
.cl-stat b { display: block; font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.cl-stat b i { font-style: normal; color: var(--color-accent); margin-left: 2px; }   /* das "+" in Gold */
.cl-stat span { display: block; margin-top: 12px; font-size: var(--text-base-s); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.cl-motto { font-family: var(--font-display); font-size: 22px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); }

/* ── Statement + Überleitung zum Kontakt ── */
.cl-statement { padding-bottom: 32px; scroll-margin-top: 80px; }
.cl-statement .az-guide { max-width: 1000px; margin: 0 auto; }
.cl-statement .az-statement-box { margin: 0 0 64px; padding: 48px 24px 72px; }
.cl-statement .az-statement-box p { font-size: clamp(32px, 4.4vw, 56px); }
.cl-statement-lead { text-align: center; }
.cl-statement-lead .cl-lead { margin-left: auto; margin-right: auto; }
.cl-statement-lead .cl-lead a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.cl-statement-lead .cl-lead a:hover { color: var(--fg); }

/* ── Handy ── */
@media (max-width: 899px) {
    .cl-section { padding: 64px 0; }
    .cl-ordinary { padding: 80px 0; }
    .cl-promise { padding-bottom: 48px; }
    .cl-promise-grid, .cl-for, .cl-steps, .cl-studio, .cl-mag-cols { flex-direction: column; }
    .cl-promise-grid { gap: 32px; }
    .cl-mag-cols, .cl-studio { gap: 24px; }
    .cl-studio-text { padding-top: 0; }
    .cl-step { padding-right: 0; }
    .cl-for .az-fit-box { padding: 28px 22px; }
    .cl-section .cl-for .az-fit-box, .cl-section .cl-for .az-fit-box:first-child { padding: 0; }
    .cl-section .cl-for .az-fit-box + .az-fit-box { border-left: 0; border-top: 1px solid var(--border); padding-top: 40px; margin-top: 16px; }
    .cl-studio-head, .cl-studio-text { min-width: 0; width: 100%; }
    .cl-stat { padding: 20px 10px 4px; min-width: 0; }
    .cl-stat b { font-size: 32px; }
    .cl-stat span { font-size: 10px; letter-spacing: .12em; }
    .cl-for .az-fit-box .btn { display: flex; width: 100%; white-space: normal; text-align: center; box-sizing: border-box; }
    .cl-peak { min-height: 80vh; }
    .cl-peak-text { padding-bottom: 64px; }
    /* Handy: Raum oben als eigener Block, Text darunter (sonst liegt der große Titel über dem Gemälde) */
    .cl-peak--rooms { display: block; min-height: 0; }
    .cl-peak--rooms .cl-peak-image { position: relative; height: 62vh; --hrt-image-h: 62vh; }
    .cl-peak--rooms .cl-peak-image::after { height: 35%; }
    .cl-peak--rooms .hub-room-teaser-scene { width: 100%; width: max(100%, calc(var(--hrt-image-h) * var(--room-ratio))); }
    .cl-peak--rooms .cl-peak-text { margin-top: -40px; padding-bottom: 32px; }
    .cl-peak-credit { position: relative; right: auto; bottom: auto; margin: 0 24px 56px; }
}

/* ── Inspiration: verkaufte Werke (dein Template masonry.php) ── */
.cl-insp .cl-lead { margin-bottom: 40px; }
.cl-insp-wall { padding: 0 24px; }
.cl-insp-wall .masonry-section { margin-bottom: 40px; }
.cl-insp-more { text-align: center; }