/*
 * Gemeinsame Layout-Bausteine für Start- und Unterseiten: der Split
 * (Bild | Farbe), das FAQ-Akkordeon und generische Abstände. Seiten-eigene
 * Komponenten (Reel, Events-Scroller, Fakten-Kacheln, Räume, Referenzen,
 * Formulare) stehen in home.css bzw. inner.css.
 */

/* ============ Split: Bild | Farbe ============ */
.split { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(540px, 74svh, 760px); }
.split .shot { position: relative; overflow: clip; background: var(--schwarz); }
.split .shot img { position: absolute; inset: 0; width: 100%; height: 132%; object-fit: cover; transform: translateY(-13%); will-change: transform; }
.split .side { display: flex; flex-direction: column; justify-content: center; gap: clamp(.7rem, 1.4vw, 1.05rem); padding: clamp(1.7rem, 3.4vw, 3.2rem); }
.split.flip .shot { order: 2; }
.split.flip .side { order: 1; text-align: right; align-items: flex-end; }
.split.flip .side .cta { align-self: flex-end; }
.split h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.7vw, 3.2rem); line-height: .9; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.split p { margin: 0; max-width: 44ch; font-size: .96rem; line-height: 1.6; }
.split.flip p { margin-left: auto; }
.split .cta { align-self: flex-start; font-weight: 600; font-size: .79rem; letter-spacing: .04em; padding: .88rem 1.65rem; border-radius: 999px; transition: transform .3s var(--ease), background .3s, color .3s; background: var(--zitrone); color: var(--merlot); }
.split .cta:hover { transform: scale(1.05); }
.split .alt { align-self: flex-start; font-weight: 600; font-size: .86rem; border-bottom: 2.5px solid currentColor; padding-bottom: 3px; transition: opacity .3s; }
.split .alt:hover { opacity: .65; }
.split.flip .side .alt { align-self: flex-end; }
@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; min-height: 0; }
	.split .shot { min-height: 44svh; }
	.split.flip .shot { order: 1; }
	.split.flip .side { order: 2; text-align: left; align-items: flex-start; }
	.split.flip .side .cta, .split.flip .side .alt { align-self: flex-start; }
	.split.flip p { margin-left: 0; }
}


/* ============ Generische Buttons (wiederverwendet außerhalb von .split) ============ */
.cta { display: inline-block; align-self: flex-start; font-weight: 600; font-size: .79rem; letter-spacing: .04em; padding: .88rem 1.65rem; border-radius: 999px; transition: transform .3s var(--ease), background .3s, color .3s; background: var(--zitrone); color: var(--merlot); }
.cta:hover { transform: scale(1.05); }
.alt { display: inline-block; font-weight: 600; font-size: .86rem; border-bottom: 2.5px solid currentColor; padding-bottom: 3px; transition: opacity .3s; }
.alt:hover { opacity: .65; }
.pact { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: .3rem; }

/* ============ Bild-/Inhaltsplatzhalter ("Bild folgt" / "folgt" statt Preis) ============ */
.ph { border: 2px dashed rgba(73, 3, 1, .35); border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; color: rgba(73, 3, 1, .55); font-size: .82rem; font-weight: 600; padding: 1rem; min-height: 140px; background: rgba(73, 3, 1, .04); }
.ph.on-dark { border-color: rgba(255, 245, 239, .4); color: rgba(255, 245, 239, .7); background: rgba(255, 245, 239, .06); }
.folgt { opacity: .7; font-style: italic; }