/*
Theme Name: DJ Scherni
Theme URI: https://dj-scherni.de
Author: DJ-Scherni Entertainments
Description: Schlankes Block-Theme für DJ-Scherni Entertainments – Design in weichem Markenblau, ohne Page-Builder, Schriften lokal (DSGVO), schnelle Ladezeit. Enthält Muster für Startseite, Stadt-Landingpages, Pakete und Galerie.
Version: 1.21.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dj-scherni
Schrift: Inter von Rasmus Andersson, SIL Open Font License 1.1
*/

/* ---------- Markenfarben: weiches Blau (#0072D2) ---------- */
:root {
	--ds-ink: #14263B;          /* warmes Dunkelbraun für Text */
	--ds-ink-soft: #46586E;     /* Fließtext gedämpft (7:1 auf Creme) */
	--ds-creme: #FAFCFF;
	--ds-blush: #EFF6FE;
	--ds-rose: #D6E8FB;
	--ds-line: #DCE7F3;
	--ds-terra: #0072D2;        /* Markenblau: Buttons & Akzente (weißer Text 4,9:1) */
	--ds-terra-dark: #005BA8;
	--ds-gold: #D99A1E;
	--ds-grad-warm: linear-gradient(135deg, #F4F9FF 0%, #E3F0FD 45%, #C9E1F9 100%);
	--ds-grad-rose: linear-gradient(160deg, #EEF6FF 0%, #DDECFC 55%, #CBE2FA 100%);
	--ds-grad-gold: linear-gradient(120deg, #F8FBFF 0%, #E8F2FD 60%, #D7E9FB 100%);
	--ds-radius: 20px;
	--ds-shadow: 0 10px 30px rgba(0, 60, 120, 0.08);
	--ds-section-y: clamp(3.5rem, 8vw, 6rem);
}

body { -webkit-font-smoothing: antialiased; background: var(--ds-creme); color: var(--ds-ink); }
.ds-main { margin-block-start: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0; }
a { color: var(--ds-terra); }
a:hover { color: var(--ds-terra-dark); }

/* ---------- Kopfbereich ---------- */
.ds-header {
	background: rgba(250, 252, 255, 0.94);
	backdrop-filter: saturate(140%) blur(8px);
	color: var(--ds-ink);
	border-bottom: 1px solid var(--ds-line);
	padding-block: 12px;
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .ds-header { top: 32px; }
.ds-header__inner { gap: 16px; align-items: center; }
.ds-brand { gap: 12px; align-items: center; }
.ds-header .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ds-header .wp-block-site-title a { color: var(--ds-ink); text-decoration: none; }
.ds-header__nav { gap: 8px 24px; align-items: center; }
.ds-nav, .ds-nav a { color: var(--ds-ink-soft); text-decoration: none; font-size: 0.9375rem; }
.ds-nav a:hover, .ds-nav .current-menu-item > a { color: var(--ds-terra); }
.ds-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--ds-creme); color: var(--ds-ink); }
.ds-nav .wp-block-navigation__responsive-container-open, .ds-nav .wp-block-navigation__responsive-container-close { color: var(--ds-ink); min-width: 44px; min-height: 44px; }
.ds-header .wp-block-button__link { padding: 0.65rem 1.2rem; font-size: 0.9375rem; }

/* ---------- Abschnitte ---------- */
.ds-section { padding-block: var(--ds-section-y); margin-block: 0 !important; color: var(--ds-ink); }
/* "ds-dark" = warmer Verlauf (Name aus Version 1 beibehalten) */
.ds-dark { background: var(--ds-grad-warm); }
.ds-hero { background:
	radial-gradient(60% 70% at 85% 30%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%),
	var(--ds-grad-warm); }
.ds-dark-2 { background: #fff; border-block: 1px solid var(--ds-line); }
.ds-light { background: var(--ds-blush); }
.ds-white { background: var(--ds-creme); }
.ds-rose { background: var(--ds-grad-rose); }
.ds-gold { background: var(--ds-grad-gold); }
.ds-section h1, .ds-section h2, .ds-section h3 { color: var(--ds-ink); }
.ds-section p, .ds-section li { color: var(--ds-ink-soft); }

.ds-eyebrow { font-size: 0.875rem !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-terra) !important; margin: 0; }
.ds-claim { font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.3; color: var(--ds-terra-dark) !important; }
.ds-lead { max-width: 640px; }
.ds-small { font-size: 0.875rem; color: var(--ds-ink-soft) !important; }

/* Zweispaltig, bricht auf dem Handy um */
.ds-split { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.ds-split > * { flex: 1 1 380px; min-width: 0; margin: 0 !important; }
.ds-split--top { align-items: flex-start; }
.ds-stack > * + * { margin-block-start: 1.1rem; }

/* Buttons */
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; box-shadow: 0 6px 18px rgba(0, 114, 210, 0.22); }
.wp-block-button.is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, 0.6); color: var(--ds-terra); border: 1.5px solid var(--ds-terra); box-shadow: none; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--ds-terra-dark); }

/* Bilder */
.ds-photo { border-radius: 20px; border: 1px dashed #A9C8E8; background: var(--ds-blush); min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.ds-split .wp-block-image img { border-radius: 24px; width: 100%; height: auto; object-fit: cover; }
/* Hero: freigestelltes Foto steht auf der Unterkante, heller Bildhintergrund verschmilzt mit dem Verlauf */
.ds-hero { padding-bottom: 0 !important; }
.ds-hero .ds-split { align-items: flex-end; }
.ds-hero .ds-split > .ds-stack { align-self: center; padding-bottom: var(--ds-section-y); }
.ds-hero .wp-block-image:not(.ds-photo-frame) { align-self: flex-end; }
.ds-hero .wp-block-image:not(.ds-photo-frame) img { border-radius: 0; filter: none; box-shadow: none; mix-blend-mode: multiply; max-height: 600px; width: auto; max-width: 100%; display: block; margin-inline: auto; }
.ds-hero .ds-photo-frame { align-self: center; margin-bottom: var(--ds-section-y) !important; }
.ds-photo-frame img { border-radius: 24px; box-shadow: var(--ds-shadow); }

/* Galerie */
.ds-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ds-gallery > * { margin: 0 !important; }
.ds-gallery .wp-block-image { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3; box-shadow: var(--ds-shadow); }
.ds-gallery .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ds-gallery .wp-block-image:hover img { transform: scale(1.04); }
.ds-gallery .wp-block-image figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 28px 14px 10px; font-size: 0.8125rem; color: #fff; background: linear-gradient(to top, rgba(10, 30, 55, 0.75), rgba(10, 30, 55, 0)); text-align: left; }
@media (min-width: 900px) {
	.ds-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ds-gallery > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* Kennzahlen */
.ds-stats { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.ds-stats > * { flex: 1 1 200px; margin: 0 !important; }
.ds-stat__zahl { font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; font-size: 2.5rem; line-height: 1.1; color: var(--ds-terra) !important; margin: 0 0 4px !important; }
.ds-stat__text { margin: 0 !important; }

/* Häkchen-Liste */
.ds-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-checklist li { position: relative; padding: 16px 20px 16px 54px; border-radius: 14px; background: #fff; border: 1px solid var(--ds-line); }
.ds-checklist li::before { content: ""; position: absolute; left: 20px; top: 19px; width: 20px; height: 20px; background: var(--ds-terra);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.ds-white .ds-checklist li { background: var(--ds-blush); border-color: transparent; }

/* Karten */
.ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ds-cards > * { margin: 0 !important; }
.ds-card { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 30px; box-shadow: var(--ds-shadow); }
.ds-card > * + * { margin-block-start: 0.75rem; }
.ds-card h3 { margin: 0; }
.ds-card p { margin-bottom: 0; }

/* Pakete */
.ds-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.ds-packages > * { margin: 0 !important; }
.ds-package { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ds-line); border-radius: 22px; padding: 28px 24px; box-shadow: var(--ds-shadow); }
.ds-package > * { margin: 0 !important; }
.ds-package > * + * { margin-top: 0.7rem !important; }
.ds-package__dauer { font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--ds-terra) !important; }
.ds-package__name { font-size: 0.875rem !important; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink) !important; }
.ds-package .wp-block-buttons { margin-top: auto !important; padding-top: 1rem; }
.ds-package .wp-block-button, .ds-package .wp-block-button__link { width: 100%; justify-content: center; }
.ds-package--highlight { background: var(--ds-grad-rose); border-color: #A9CDF2; }
.ds-package__badge { align-self: flex-start; font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ds-terra); color: #fff !important; padding: 4px 10px; border-radius: 999px; }
.ds-included { background: #fff; border: 1px solid var(--ds-line); border-radius: 22px; padding: 26px 28px; }
.ds-included .ds-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ds-included .ds-checklist li { background: var(--ds-blush); border-color: transparent; }

/* Bewertungen */
.ds-stars { color: var(--ds-gold) !important; letter-spacing: 3px; font-size: 1.1rem; margin: 0 !important; }
.ds-review__name { font-size: 0.9375rem; }

/* Schritte */
.ds-step { border-top: 2px solid var(--ds-terra); padding-top: 22px; }
.ds-step > * + * { margin-block-start: 0.6rem; }
.ds-step__nr { font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; color: var(--ds-terra) !important; font-size: 0.9375rem; margin: 0 !important; }
.ds-step h3 { margin: 0; }

/* FAQ */
.ds-faq { display: flex; flex-direction: column; gap: 12px; }
.ds-faq > * { margin: 0 !important; }
.ds-faq .wp-block-details { background: #fff; border: 1px solid var(--ds-line); border-radius: 14px; padding: 18px 22px; }
.ds-faq summary { font-weight: 600; cursor: pointer; min-height: 28px; color: var(--ds-ink); }
.ds-faq .wp-block-details p { margin: 12px 0 0; }

/* Anfrage / Formular */
.ds-contact-links p { margin: 0 0 6px; }
.ds-contact-links a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: 600; color: var(--ds-ink); }
.ds-contact-links a:hover { color: var(--ds-terra); }
.ds-form { background: #fff; border: 1px solid var(--ds-line); border-radius: 22px; padding: 32px; box-shadow: var(--ds-shadow); }
.ds-form input:not([type=submit]):not([type=checkbox]), .ds-form textarea, .ds-form select {
	width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px; border-radius: 12px;
	border: 1px solid #C5D8EC; background: var(--ds-creme); color: var(--ds-ink); font: inherit; }
.ds-form input:focus, .ds-form textarea:focus { outline: 2px solid var(--ds-terra); outline-offset: 1px; }
.ds-form label { color: var(--ds-ink); font-size: 0.9375rem; font-weight: 500; }
.ds-form p { color: var(--ds-ink); }
.ds-form input[type=submit], .ds-form button[type=submit] {
	min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ds-terra); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 114, 210, 0.22); }
.ds-form input[type=submit]:hover { background: var(--ds-terra-dark); }

/* Regionen-Chips */
.ds-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.ds-chips > * { margin: 0 !important; }
.ds-chips .wp-block-button__link { background: #fff; color: var(--ds-ink); border: 1px solid #C5D8EC; font-weight: 500; box-shadow: none; }
.ds-chips .wp-block-button__link:hover { border-color: var(--ds-terra); color: var(--ds-terra); }

/* Fußbereich */
.ds-footer { background: #0F2E4F; color: #DCE7F3; padding-block: 48px; font-size: 0.9375rem; }
.ds-footer__inner { gap: 28px 48px; }
.ds-footer a { color: #DCE7F3; }
.ds-footer a:hover { color: #fff; }
.ds-footer p { margin: 0; color: #DCE7F3; }
.ds-footer__name { font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; color: #fff !important; margin-bottom: 6px !important; }
.ds-footer__label { color: #fff !important; font-weight: 600; margin-bottom: 6px !important; }
.ds-footer__regions { max-width: 460px; }

.ds-footer__label, .ds-footer__name { font-size: 0.8125rem !important; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }

/* Normale Seiten (Impressum, Datenschutz …) */
.ds-page { padding-block: var(--ds-section-y); }

/* Zertifikate unter den Kennzahlen */
.ds-certs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 28px; margin-top: 2.5rem !important; padding-top: 2rem; border-top: 1px solid var(--ds-line); }
.ds-certs__label { flex: 1 1 100%; text-align: center; margin: 0 !important; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-terra) !important; }
.ds-certs .ds-cert { margin: 0 !important; background: #fff; border: 1px solid var(--ds-line); border-radius: 16px; padding: 12px; box-shadow: var(--ds-shadow); }
.ds-certs .ds-cert img { height: 220px; width: auto; display: block; border-radius: 8px; }
.ds-certs .ds-cert figcaption { margin: 8px 0 0; font-size: 0.8125rem; text-align: center; color: var(--ds-ink-soft); }
@media (max-width: 600px) { .ds-certs .ds-cert img { height: 150px; } }

.ds-split .ds-portrait img { max-height: 560px; width: auto; margin-inline: auto; display: block; object-fit: contain; border-radius: 24px; background: #fff; box-shadow: var(--ds-shadow); }

.ds-hero .ds-photo-frame img { border-radius: 24px; filter: none; box-shadow: 0 18px 40px rgba(0, 60, 120, 0.18); max-height: 640px; width: auto; margin-inline: auto; display: block; }

.ds-split > .wp-block-image:not(.ds-portrait):not(.ds-photo-frame) img { max-height: 640px; object-fit: cover; }

/* WhatsApp-Buttons in WhatsApp-Grün */
.wp-block-button a.wp-block-button__link[href*="wa.me"] { background: #25D366; color: #fff; border: 0; font-weight: 700; gap: 8px; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3); }
.wp-block-button a.wp-block-button__link[href*="wa.me"]:hover { background: #1EBE5A; color: #fff; }
.wp-block-button a.wp-block-button__link[href*="wa.me"]::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.5 7.4L3 20.5l1.6-5.3A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.5 7.4L3 20.5l1.6-5.3A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Kopfbereich ohne Menü (Stadtseiten) */
.ds-header--minimal .ds-header__cta { gap: 10px; }
@media (max-width: 600px) {
	.ds-header--minimal .wp-block-buttons { display: flex !important; }
	.ds-header--minimal .wp-block-site-title { display: none; }
	.ds-header--minimal .wp-block-button__link { padding: 0.55rem 0.9rem; font-size: 0.875rem; min-height: 44px; }
}

/* Handy */
@media (max-width: 600px) {
	.admin-bar .ds-header { top: 0; position: relative; }
	.ds-photo { min-height: 280px; }
	.ds-form { padding: 22px; }
	.ds-header .wp-block-buttons { display: none; }
}