/* DJ Plus – DJ LIVE MUSIC · Theme-Styles (Cloud Dancer) */

:root {
	--djp-cloud: #F0EEE9;
	--djp-linen: #E6E2DA;
	--djp-chalk: #D6D1C7;
	--djp-line-strong: #A39C90;
	--djp-ink: #1B1A18;
	--djp-graphite: #57524A;
	--djp-lead: #3D3934;
	--djp-accent: #B8400E;
	--djp-accent-dark: #9A3412;
	--djp-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--djp-max: 1240px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.djp-main > * { margin-block: 0 !important; }
.djp-main [id] { scroll-margin-top: 96px; }

/* Raster-Helfer: Kinder ohne Flow-Abstände */
.djp-grid, .djp-stack, .djp-hero, .djp-facts, .djp-cards3, .djp-concepts, .djp-occasions,
.djp-steps, .djp-contact, .djp-card, .djp-concept, .djp-occasion, .djp-step, .djp-fact,
.djp-footer__top, .djp-footer__bottom, .djp-header__inner { margin-block: 0; }
.djp-grid > *, .djp-hero > *, .djp-facts > *, .djp-cards3 > *, .djp-concepts > *,
.djp-occasions > *, .djp-steps > *, .djp-contact > *, .djp-footer__top > *,
.djp-footer__bottom > * { margin-block: 0 !important; }
.djp-card > *, .djp-concept__body > *, .djp-occasion > *, .djp-step > *, .djp-fact > *,
.djp-stack > * { margin-block: 0 !important; }

/* Typo-Bausteine */
.djp-eyebrow {
	font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--djp-accent);
}
.djp-lead { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--djp-lead); max-width: 560px; }
.djp-muted { color: var(--djp-graphite); }
.djp-section { padding-block: clamp(72px, 9vw, 112px); }
.djp-section--band { background: var(--djp-linen); border-block: 1px solid var(--djp-chalk); }
.djp-section--line { border-top: 1px solid var(--djp-chalk); }
.djp-stack { display: flex; flex-direction: column; gap: 16px; }
.djp-hero .djp-stack { gap: 28px; }
.djp-narrow { max-width: 760px; }
.djp-section h2 { margin: 0; }

/* Buttons */
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; box-sizing: border-box; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--djp-ink); border: 1px solid var(--djp-line-strong); padding: 14px 27px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--djp-ink); color: var(--djp-ink); background: transparent; }

/* Kopfzeile */
.djp-header { position: sticky; top: 0; z-index: 50; background: var(--djp-cloud); border-bottom: 1px solid var(--djp-chalk); }
.admin-bar .djp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .djp-header { top: 46px; } }
.djp-header__inner { padding-block: 14px; gap: 16px 32px; }
.djp-logo { margin: 0 !important; }
.djp-logo img { height: 52px !important; width: auto !important; display: block; }
.djp-nav { font-size: 15px; font-weight: 500; gap: 8px 28px; }
.djp-nav a { text-decoration: none; }
.djp-nav a:hover { color: var(--djp-accent); }
.djp-header .wp-block-button__link { padding: 11px 22px; font-size: 15px; min-height: 44px; }
@media (max-width: 600px) {
	.djp-logo img { height: 40px !important; }
	.djp-header .wp-block-buttons { display: none; }
}

/* Eingangsvideo */
.djp-intro { position: relative; background: var(--djp-ink); height: min(56.25vw, 86vh); min-height: 320px; overflow: hidden; }
.djp-intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.djp-intro__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; }
.djp-pill {
	background: var(--djp-cloud); color: var(--djp-ink); font: inherit; font-size: 14px; font-weight: 600;
	padding: 12px 20px; border: 0; border-radius: 999px; min-height: 44px; box-sizing: border-box;
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
}
.djp-pill:hover { color: var(--djp-accent); }
.djp-pill svg { flex: none; }

/* Hero */
.djp-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 48px; align-items: center; padding-block: clamp(56px, 7vw, 72px) 56px; }
.djp-hero h1 { margin: 0; }
.djp-hero__media { position: relative; margin: 0; }
.djp-hero__media .wp-block-image { margin: 0; }
.djp-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; display: block; }
.djp-hero__caption {
	position: absolute; left: 20px; bottom: 20px; margin: 0 !important; background: var(--djp-cloud);
	padding: 12px 16px; border-radius: 4px; font-weight: 600; font-size: 15px; line-height: 1.4;
}
.djp-hero__caption span { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--djp-graphite); }

/* Fakten */
.djp-factband { border-block: 1px solid var(--djp-chalk); }
.djp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; padding-block: 32px; }
.djp-fact__num { font-family: var(--djp-display); font-weight: 800; font-size: 56px; line-height: 1; }
.djp-fact__label { color: var(--djp-graphite); font-size: 15px; }

/* Drei Schritte DJ Plus */
.djp-cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--djp-chalk); border: 1px solid var(--djp-chalk); margin-top: 56px !important; }
.djp-card { background: var(--djp-cloud); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.djp-card__num { font-family: var(--djp-display); font-weight: 800; font-size: 72px; line-height: 1; color: var(--djp-accent); }
.djp-card h3 { font-family: var(--wp--preset--font-family--body); text-transform: none; font-size: 24px; font-weight: 700; line-height: 1.2; }

/* Line-up-Baukasten */
.djp-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: start; }
.djp-lineup__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.djp-chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
	font: inherit; font-weight: 600; cursor: pointer; background: transparent; color: var(--djp-ink); border: 1px solid var(--djp-line-strong);
}
.djp-chip[aria-pressed="true"] { background: var(--djp-accent); border-color: var(--djp-accent); color: #fff; }
.djp-chip--fixed { background: var(--djp-ink); color: var(--djp-cloud); border-color: var(--djp-ink); cursor: default; font-weight: 700; }
.djp-chip:focus-visible, .djp-pill:focus-visible { outline: 3px solid var(--djp-accent); outline-offset: 3px; }
.djp-lineup__summary { border: 1px solid var(--djp-chalk); background: var(--djp-cloud); border-radius: 4px; padding: 24px; display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.djp-lineup__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--djp-graphite); }
.djp-lineup__result { font-family: var(--djp-display); font-weight: 800; font-size: 34px; line-height: 1.1; text-transform: uppercase; }
.djp-lineup__cta { margin-top: 20px; }
.djp-btn {
	display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 15px 28px; border-radius: 999px;
	background: var(--djp-accent); color: #fff !important; font-weight: 700; text-decoration: none;
}
.djp-btn:hover { background: var(--djp-accent-dark); }

/* Konzepte */
.djp-head-row { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: flex-end; }
.djp-head-row > * { margin: 0 !important; }
.djp-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: 48px !important; }
.djp-concept { background: var(--djp-linen); border: 1px solid var(--djp-chalk); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.djp-concept .wp-block-image { margin: 0 !important; }
.djp-concept img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.djp-concept__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.djp-concept__body h3 { margin: 0; font-size: 36px; }
.djp-concept__text { color: var(--djp-graphite); font-size: 15px; flex-grow: 1; }
.djp-tag {
	align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: #fff; background: var(--djp-ink); padding: 5px 10px; border-radius: 999px;
}
.djp-tag--accent { background: var(--djp-accent); }
.djp-more a { font-weight: 600; font-size: 15px; color: var(--djp-accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* Anlässe */
.djp-occasions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 24px; margin-top: 48px !important; }
.djp-occasion--photo { position: relative; border-radius: 4px; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; }
.djp-occasion--photo > .wp-block-image { position: absolute !important; inset: 0; margin: 0 !important; }
.djp-occasion--photo > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.djp-occasion__panel { position: relative; background: var(--djp-cloud); margin: 20px !important; padding: 28px; border-radius: 4px; display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.djp-occasion__panel > * { margin: 0 !important; }
.djp-occasion-list { display: flex; flex-direction: column; gap: 24px; }
.djp-occasion { background: var(--djp-linen); border: 1px solid var(--djp-chalk); border-radius: 4px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.djp-occasion h3, .djp-occasion__panel h3 { margin: 0; }
.djp-clients { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 8px; font-weight: 700; letter-spacing: 0.08em; color: #6B655C; font-size: 14px; }

/* Ablauf */
.djp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 48px !important; }
.djp-step { border-top: 2px solid var(--djp-accent); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.djp-step__title { font-family: var(--djp-display); font-weight: 800; font-size: 28px; line-height: 1.1; }

/* Zitat */
.djp-quote { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 1000px; margin-inline: auto; }
.djp-quote > * { margin: 0 !important; }
.djp-quote .wp-block-image img { height: 64px; width: auto; }
.djp-quote__text { font-family: var(--djp-display); font-weight: 700; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; }

/* Kontakt */
.djp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; }
.djp-contact__data a { text-decoration: none; }
.djp-form { background: var(--djp-linen); border: 1px solid var(--djp-chalk); border-radius: 4px; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.djp-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.djp-form input[type="text"], .djp-form input[type="email"], .djp-form input[type="tel"], .djp-form input[type="date"], .djp-form select, .djp-form textarea {
	background: #fff; border: 1px solid var(--djp-line-strong); border-radius: 4px; color: var(--djp-ink);
	padding: 12px 14px; font: inherit; font-weight: 400; min-height: 46px; box-sizing: border-box; width: 100%;
}
.djp-form textarea { resize: vertical; min-height: 120px; }
.djp-form input:focus, .djp-form select:focus, .djp-form textarea:focus { outline: 2px solid var(--djp-accent); outline-offset: 1px; border-color: var(--djp-accent); }
.djp-form__full { grid-column: 1 / -1; }
.djp-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.djp-form legend { font-size: 14px; font-weight: 600; padding: 0 0 8px; }
.djp-form .djp-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; min-height: 44px; }
.djp-form .djp-check input { width: 20px; height: 20px; accent-color: var(--djp-accent); }
.djp-form .djp-consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; line-height: 1.5; }
.djp-form .djp-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--djp-accent); }
.djp-form button[type="submit"] { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.djp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.djp-notice { grid-column: 1 / -1; padding: 14px 16px; border-radius: 4px; font-weight: 600; }
.djp-notice--ok { background: #DCEBDD; color: #1E4620; }
.djp-notice--error { background: #F6DCD3; color: #7A2410; }

/* Fußzeile */
.djp-footer { background: var(--djp-ink); color: #C9C3B8; }
.djp-footer a { color: var(--djp-cloud); text-decoration: none; }
.djp-footer a:hover { color: #F2A27E; }
.djp-footer__top { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; align-items: flex-start; padding-block: 72px 48px; }
.djp-footer__logo img { height: 72px !important; width: auto !important; }
.djp-footer__cols { display: flex; flex-wrap: wrap; gap: 32px 64px; font-size: 15px; line-height: 1.7; }
.djp-footer__cols > * { margin: 0 !important; }
.djp-footer__col p { margin: 0; }
.djp-footer__title { font-size: 12px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9E978B; padding-bottom: 6px; }
.djp-footer__bottom { border-top: 1px solid #3A3733; padding-block: 24px 40px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 14px; }

/* Standardseiten (Impressum, Datenschutz …) */
.djp-page { padding-block: clamp(56px, 7vw, 96px); }
.djp-page h1 { font-size: clamp(48px, 7vw, 88px); margin-bottom: 32px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }