/* StudiCoe – Theme-Styles. Farben/Schriften kommen aus theme.json (Design → Editor → Stile). */

:root {
	--sc-radius: 18px;
	--sc-primary: var(--wp--preset--color--primary);
	--sc-secondary: var(--wp--preset--color--secondary);
	--sc-surface: var(--wp--preset--color--surface);
	--sc-line: var(--wp--preset--color--line);
	--sc-muted: var(--wp--preset--color--muted);
	--sc-fg: var(--wp--preset--color--foreground);
	--sc-bg: var(--wp--preset--color--base);
}

h1, h2, h3, h4 { text-wrap: balance; }
img { max-width: 100%; height: auto; }
:where(a, button, input, select):focus-visible { outline: 3px solid var(--sc-secondary); outline-offset: 3px; }

/* ---------- Kopfzeile ---------- */
.studicoe-sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: color-mix(in srgb, var(--sc-bg) 92%, transparent);
	backdrop-filter: blur(10px);
}
.studicoe-header .wp-block-site-logo img { border-radius: 10px; }
.studicoe-header .wp-block-navigation a:hover { color: var(--sc-primary); }
.studicoe-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--sc-line) !important;
	border-radius: 12px;
	padding: .4rem !important;
	box-shadow: 0 12px 30px rgba(40, 20, 50, .12);
}
.studicoe-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .45rem .8rem !important; border-radius: 8px; }
@media (max-width: 1240px) {
	.studicoe-header .studicoe-header-cta { display: none !important; }
}
@media (min-width: 600px) and (max-width: 1000px) {
	.studicoe-header .wp-block-navigation,
	.studicoe-header .wp-block-navigation__container { gap: 1rem !important; font-size: .88rem; flex-wrap: nowrap; }
	.studicoe-header .wp-block-navigation-item__content { white-space: nowrap; }
}
@media (max-width: 600px) {
	.studicoe-header .wp-block-site-logo img { width: 74px !important; }
}

/* ---------- Abstände Startseite ---------- */
.studicoe-front > * { margin-block-start: 0 !important; }
.studicoe-section { padding-block: var(--wp--preset--spacing--60); }
.studicoe-hero-wrap { padding-top: clamp(16px, 3vw, 28px); }

/* ---------- Handschrift-Zeile, Lead, Kopfzeilen der Abschnitte ---------- */
.is-style-studicoe-eyebrow {
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.6rem !important;
	line-height: 1;
	color: var(--sc-primary);
	margin-bottom: .35rem !important;
}
.is-style-studicoe-eyebrow + .wp-block-heading { margin-top: 0; }
.studicoe-lead { font-size: 1.15rem; max-width: 34em; }
.studicoe-headrow { margin-bottom: 2.2rem; gap: 1rem; }
.studicoe-headrow-title > * { margin-block: 0; }
.studicoe-headrow-text { color: var(--sc-muted); max-width: 30em; margin: 0; }

/* ---------- Hero ---------- */
.studicoe-hero { border-radius: 24px; overflow: hidden; }
.studicoe-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(25, 10, 30, .55) 0%, rgba(25, 10, 30, .15) 55%, transparent 100%);
	pointer-events: none;
}
.studicoe-hero .wp-block-cover__inner-container { z-index: 2; max-width: min(560px, 90%) !important; padding: clamp(8px, 3vw, 36px); color: #fff; }
.studicoe-hero .is-style-studicoe-eyebrow { color: #ffd2e6; font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }
.studicoe-hero h1 { color: #fff; margin-top: 0; }
.studicoe-hero .wp-block-cover__image-background { object-position: center 60%; }
@media (max-width: 640px) {
	.studicoe-hero { min-height: 480px !important; }
	.studicoe-hero::after { background: linear-gradient(0deg, rgba(25, 10, 30, .72) 0%, transparent 70%); }
}

/* ---------- Begrüßung ---------- */
.studicoe-intro { gap: clamp(28px, 5vw, 72px); }
.studicoe-intro-photos.wp-block-gallery { gap: 14px !important; }
.studicoe-intro-photos .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--sc-radius); }
.studicoe-intro-photos .wp-block-image:nth-child(2) { margin-top: 48px !important; }

/* ---------- Karten ---------- */
.is-style-studicoe-card {
	background: var(--sc-bg);
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.is-style-studicoe-card > * { margin-block: 0 !important; }
.studicoe-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.studicoe-card-body > * { margin-block: 0 !important; }
.studicoe-card-body p:not([class*="is-style"]) { color: var(--sc-muted); font-size: .98rem; }
.studicoe-card-body .studicoe-chips { margin-top: auto !important; padding-top: .4rem; }
.studicoe-more a { font-weight: 700; text-decoration: none; }

.studicoe-feature { margin-bottom: 18px; }
.studicoe-feature-cols { gap: 0 !important; margin: 0 !important; }
.studicoe-feature-cols > .wp-block-column:last-child { padding: clamp(1.6rem, 4vw, 3rem); }
.studicoe-feature-cols > .wp-block-column:last-child > * { margin-block: 0 0 .7rem; }
.studicoe-feature h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.studicoe-feature .is-style-studicoe-slider { min-height: 320px; height: 100%; aspect-ratio: auto !important; max-height: 460px; }
@media (max-width: 781px) { .studicoe-feature .is-style-studicoe-slider { min-height: 240px; aspect-ratio: 4 / 3 !important; } }

/* Info-Kärtchen */
.studicoe-chips { gap: .4rem !important; }
.is-style-studicoe-chip {
	font-size: .8rem;
	font-weight: 700;
	padding: .3em .75em;
	border-radius: 999px;
	background: var(--sc-surface);
	margin: 0 !important;
	font-variant-numeric: tabular-nums;
}
.is-style-studicoe-chip.is-price { background: color-mix(in srgb, var(--sc-secondary) 18%, var(--sc-bg)); }

/* Banner „Derzeit ausgebucht“ – liegt über dem Bild der Karte */
.is-style-studicoe-ribbon {
	position: absolute;
	left: -10%; right: -10%;
	top: calc(var(--sc-pic-h, 37.5cqw) / 2);
	transform: translateY(-50%) rotate(-6deg);
	text-align: center;
	background: var(--sc-primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(.8rem, 1.6vw, 1.3rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .6rem 0;
	z-index: 3;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	margin: 0 !important;
}
.is-style-studicoe-card:has(.is-style-studicoe-ribbon) { container-type: inline-size; }
.is-style-studicoe-card:has(.is-style-studicoe-ribbon) .is-style-studicoe-slider img { filter: grayscale(.55) brightness(.92); }

/* Drei Kacheln nebeneinander */
.studicoe-tiles { gap: 18px !important; }
.studicoe-tiles > .wp-block-column { min-width: 0; }
@media (max-width: 900px) {
	.studicoe-tiles { gap: 12px !important; }
	.studicoe-tiles .studicoe-card-body { padding: 1rem 1rem 1.2rem; gap: .45rem; }
	.studicoe-tiles h3 { font-size: 1.1rem; overflow-wrap: anywhere; hyphens: auto; }
	.studicoe-tiles .studicoe-card-body p:not([class*="is-style"]) { font-size: .88rem; }
	.studicoe-tiles .is-style-studicoe-chip { font-size: .72rem; }
}
@media (max-width: 560px) {
	.studicoe-tiles {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * clamp(16px, 4vw, 40px)) !important;
		padding-inline: clamp(16px, 4vw, 40px);
		padding-bottom: 6px;
	}
	.studicoe-tiles > .wp-block-column { flex: 0 0 72% !important; scroll-snap-align: start; }
}

/* ---------- Bild-Slider (Galerie-Block mit Stil „Bild-Slider“) ---------- */
.is-style-studicoe-slider.wp-block-gallery { margin: 0 !important; }
.is-style-studicoe-slider.wp-block-gallery .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: 100%; }
.studicoe-js .is-style-studicoe-slider.wp-block-gallery {
	display: block !important;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sc-surface);
}
.studicoe-js .is-style-studicoe-slider.wp-block-gallery > .wp-block-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	transition: opacity .5s ease;
}
.studicoe-js .is-style-studicoe-slider.wp-block-gallery > .wp-block-image.is-active { opacity: 1; z-index: 1; }
.studicoe-js .is-style-studicoe-slider.wp-block-gallery > .wp-block-image img { aspect-ratio: auto; }
.sc-arrows { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 4; }
.sc-arrows button {
	width: 34px; height: 34px; border-radius: 50%; border: 0;
	background: rgba(255, 255, 255, .92); color: #2a2230;
	font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.sc-dots { position: absolute; left: 12px; bottom: 20px; display: flex; gap: 5px; z-index: 4; }
.sc-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.sc-dots span.on { background: #fff; }
@media (max-width: 900px) { .sc-arrows button { width: 28px; height: 28px; font-size: 1rem; } }

/* ---------- Buchung ---------- */
.studicoe-booking { gap: clamp(28px, 5vw, 64px) !important; }
.is-style-studicoe-steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: grid; gap: 16px; }
.is-style-studicoe-steps li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: center; }
.is-style-studicoe-steps li::before {
	content: counter(s);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 1.3rem;
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center;
	background: color-mix(in srgb, var(--sc-primary) 14%, var(--sc-bg));
	color: var(--sc-primary);
}
.is-style-studicoe-note {
	margin-top: 2rem !important;
	padding: 1rem 1.3rem;
	border-left: 4px solid var(--sc-secondary);
	background: var(--sc-surface);
	border-radius: 0 12px 12px 0;
	font-weight: 600;
}
.studicoe-widget-box { background: var(--sc-surface); border-radius: var(--sc-radius); padding: clamp(18px, 3vw, 32px); }

/* Plugin „Custom Booking“: Feinabstimmung an das Theme */
#cb-booking-widget, #cb-newsletter-widget {
	--cb-radius-custom: 12px;
	--cb-border-custom: var(--sc-line);
	--cb-surface-custom: var(--sc-bg);
	--cb-muted-custom: var(--sc-muted);
}
#cb-booking-widget .cb-button, #cb-newsletter-widget .cb-button { border-radius: 999px; font-weight: 700; }

/* ---------- Galerie-Streifen ---------- */
.studicoe-strip.wp-block-gallery { gap: 10px !important; }
.studicoe-strip .wp-block-image img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (max-width: 700px) {
	.studicoe-strip.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc(33.333% - 7px) !important; }
}

/* ---------- Newsletter ---------- */
.studicoe-news {
	margin-top: var(--wp--preset--spacing--60) !important;
	background: var(--sc-primary);
	color: #fff;
	border-radius: 24px;
	padding: clamp(28px, 5vw, 56px);
}
.studicoe-news h2 { color: #fff; margin-top: 0; }
.studicoe-news a { color: #fff; }
.studicoe-news #cb-newsletter-widget { max-width: none; }
.studicoe-news #cb-newsletter-widget input[type="text"],
.studicoe-news #cb-newsletter-widget input[type="email"] { border: 0; background: #fff; color: var(--sc-fg); }
.studicoe-news #cb-newsletter-widget .cb-button { background: transparent; border: 2px solid #fff; color: #fff; width: 100%; }
.studicoe-news #cb-newsletter-widget .cb-button:hover { background: #fff; color: var(--sc-primary); }
.studicoe-news #cb-news-message.success, .studicoe-news #cb-news-message.error { color: #fff; }

/* ---------- Unterseiten ---------- */
.studicoe-page-title { margin-bottom: 1.5rem; }

/* ---------- Fußzeile ---------- */
.studicoe-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.studicoe-footer a { color: inherit; text-decoration: none; }
.studicoe-footer a:hover { color: var(--sc-primary); }
.studicoe-social { margin-top: 1rem !important; }
.studicoe-social .wp-social-link a { color: #fff !important; padding: .35em .8em !important; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* Buchungsseite: linke Spalte nie zu schmal */
.studicoe-booking > .wp-block-column:first-child { min-width: 280px; }
.wp-block-post-content.alignfull > .alignfull.studicoe-section:first-child { padding-top: clamp(2rem, 5vw, 4rem); }

/* ---------- Unterseiten (ab 1.0.3) ---------- */
.studicoe-offer, .studicoe-contact { gap: clamp(28px, 5vw, 72px) !important; }
.studicoe-offer h1, .studicoe-contact h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); hyphens: auto; overflow-wrap: break-word; }
.studicoe-headrow h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.studicoe-page-media { height: auto; }
.studicoe-page-media .is-style-studicoe-slider.wp-block-gallery { aspect-ratio: 4 / 3; }
.studicoe-facts { display: grid; gap: .35rem; margin-block: 1.4rem !important; }
.studicoe-facts > p { margin: 0 !important; font-weight: 600; }
.studicoe-facts > p::before { content: "•"; color: var(--sc-primary); font-weight: 800; margin-right: .55em; }
.studicoe-short iframe { width: 100%; aspect-ratio: 9 / 16; height: auto; max-height: 80vh; border-radius: var(--sc-radius); }
.studicoe-short .wp-block-embed__wrapper::before { display: none; }
.studicoe-short.wp-block-embed { max-width: 420px; margin-inline: auto; }
.studicoe-tiles .studicoe-card-body h3 a { color: inherit; text-decoration: none; }
.studicoe-tiles .studicoe-card-body h3 a:hover { color: var(--sc-primary); }
.studicoe-tiles + .studicoe-tiles { margin-top: 18px !important; }
.studicoe-galerie-grid.wp-block-gallery { gap: 12px !important; }
.studicoe-galerie-grid .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.studicoe-map { margin-top: var(--wp--preset--spacing--50) !important; border-radius: var(--sc-radius); overflow: hidden; }
.studicoe-news h1 { color: #fff; margin-top: 0; font-size: clamp(2rem, 4vw, 3rem); }
.studicoe-news-cols { gap: clamp(24px, 4vw, 56px) !important; }

/* Kontaktformular (Contact Form 7) */
.studicoe-form .wpcf7 p { margin: 0 0 1rem; font-weight: 600; }
.studicoe-form .wpcf7 input[type="text"],
.studicoe-form .wpcf7 input[type="email"],
.studicoe-form .wpcf7 input[type="tel"],
.studicoe-form .wpcf7 textarea {
	width: 100%; box-sizing: border-box; margin-top: .35rem;
	padding: 10px 12px; font: inherit; font-weight: 400; color: var(--sc-fg);
	background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 12px;
}
.studicoe-form .wpcf7 textarea { min-height: 160px; }
.studicoe-form .wpcf7 input:focus, .studicoe-form .wpcf7 textarea:focus { outline: 2px solid var(--sc-primary); outline-offset: 1px; }
.studicoe-form .wpcf7 input[type="submit"] {
	background: var(--sc-primary); color: #fff; border: 0; border-radius: 999px;
	padding: .85em 1.6em; font: inherit; font-weight: 700; cursor: pointer;
}
.studicoe-form .wpcf7 input[type="submit"]:hover { background: var(--sc-fg); }
.studicoe-form .wpcf7-response-output { border-radius: 12px; margin: 1rem 0 0 !important; }

/* Newsletter-Formular: Felder untereinander */
#cb-newsletter-widget .cb-field { margin-bottom: 14px; }
#cb-newsletter-widget label { display: block; font-weight: 600; margin-bottom: 5px; }
#cb-newsletter-widget input[type="text"],
#cb-newsletter-widget input[type="email"] {
	width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit;
	border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-bg); color: var(--sc-fg);
}
#cb-newsletter-widget .cb-news-consent label { display: flex; font-weight: 400; }