/* AF Media Film – Struktur für die Bereiche des CMS-Kerns.
   Der Kern bringt Funktion und Feinheiten mit (cms-structure.css, cms-public.css),
   erwartet die Grundstruktur aber vom Projekt – genauso wie Kopf- und Fusszeile.

   Alles ist in .cms-zone gekapselt: der Kern benutzt Klassennamen wie .card,
   .hero-inner oder .more, die es im Filmteil ebenfalls gibt. Ohne die Kapsel
   würden sich die beiden Welten gegenseitig überschreiben. */

.cms-zone{--cms-maxw:var(--wrap,1400px);--cms-pad:var(--gutter,48px);color:var(--fg-2,#a7abb6)}
.cms-zone h1,.cms-zone h2,.cms-zone h3,.cms-zone h4{color:var(--fg,#f2f3f6)}
.cms-zone img{max-width:100%;height:auto}
.cms-zone a{color:var(--accent,#f0b429)}

/* Breitenhalter */
.cms-zone .container{width:100%;max-width:var(--cms-maxw);margin:0 auto;padding:0 var(--cms-pad)}
.cms-zone .container.narrow,.cms-zone .narrow{max-width:820px}
.cms-zone .center{text-align:center}

/* Abschnitte */
.cms-zone .section,.cms-zone .usp-sec,.cms-zone .mtx-sec,.cms-zone .home-seo{padding:46px 0}
.cms-zone .section--alt{background:var(--bg-2,#141418)}
.cms-zone .sec-head{margin-bottom:22px}
.cms-zone .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent,#f0b429);margin:0 0 8px}
.cms-zone .eyebrow--light{color:var(--fg-2,#a7abb6)}
.cms-zone .lead{font-size:17px;line-height:1.65;max-width:70ch}
.cms-zone .mtx-body,.cms-zone .prose--page{max-width:74ch;line-height:1.7}
.cms-zone .prose--page{margin:0 auto}

/* FREIE SPALTEN – hier lag der Fehler: ohne display:grid stapeln sich die
   Spalten untereinander. Die Spaltenbreiten setzt der Kern als Inline-Stil. */
.cms-zone .colrow{display:grid;gap:clamp(20px,3vw,44px);align-items:start;
  width:100%;max-width:var(--cms-maxw);margin:0 auto;padding:0 var(--cms-pad)}
.cms-zone .colrow--full{max-width:none;padding:0}
.cms-zone .colrow--narrow{max-width:900px}
.cms-zone .colrow-col{min-width:0;display:flex;flex-direction:column;gap:18px}
.cms-zone .colrow-col--vtop{justify-content:flex-start}
.cms-zone .colrow-col--vcenter{justify-content:center}
.cms-zone .colrow-col--vbottom{justify-content:flex-end}

/* Reihen-Bausteine */
.cms-zone .rowel{position:relative;padding:34px 0}
.cms-zone .rowel-inner{width:100%;max-width:var(--cms-maxw);margin:0 auto;padding:0 var(--cms-pad)}
.cms-zone .rowel--text .rowel-inner{max-width:78ch}
.cms-zone .rowel-copy{display:flex;flex-direction:column;gap:14px;justify-content:center}
.cms-zone .rowel--split .rowel-inner{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,44px);align-items:center}
.cms-zone .rowel--mflip .rowel-img{order:-1}
.cms-zone .rowel-img img{width:100%;height:auto;border-radius:12px;display:block}
.cms-zone .rowel-vid{position:relative;width:100%;overflow:hidden}
.cms-zone .rowel-vid video{width:100%;height:100%;object-fit:cover;display:block}
.cms-zone .rowel-vid-ov{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.cms-zone .fluidrow-inner{width:100%;max-width:var(--cms-maxw);margin:0 auto;padding:0 var(--cms-pad);position:relative;z-index:2}
.cms-zone .fluidrow-overlay{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Karten und Kästen */
.cms-zone .card{background:var(--bg-2,#141418);border:1px solid var(--line,#26262e);
  border-radius:12px;padding:22px}
.cms-zone .cta-band{background:var(--bg-3,#1d1d23);border-radius:14px;padding:30px;text-align:center}
.cms-zone .contact-card{background:var(--bg-2,#141418);border:1px solid var(--line,#26262e);
  border-radius:12px;padding:24px}
.cms-zone .contact-card--dark{background:var(--bg-3,#1d1d23)}
.cms-zone .split,.cms-zone .psplit-inner{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,44px);align-items:center}
.cms-zone .psplit-copy{display:flex;flex-direction:column;gap:14px}
.cms-zone .more{opacity:1;font-size:14px}

/* Eigener Kopfbereich eines Bereichs – nicht der Film-Hero */
.cms-zone .hero-inner,.cms-zone .hero-free{position:relative;width:100%;
  max-width:var(--cms-maxw);margin:0 auto;padding:46px var(--cms-pad)}
.cms-zone .hero-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.cms-zone .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.cms-zone .hero-seo{padding:36px 0}

@media (max-width:820px){
  .cms-zone{--cms-pad:var(--gutter,20px)}
  .cms-zone .colrow{grid-template-columns:1fr !important;gap:26px}
  .cms-zone .rowel--split .rowel-inner,
  .cms-zone .split,.cms-zone .psplit-inner{grid-template-columns:1fr;gap:20px}
  .cms-zone .rowel--mflip .rowel-img{order:0}
}