/*
 * Innovation Haus, Startseite (Figma "Home - Desktop" 292:5166 / "Home - Mobile" 292:12359).
 * Farben, Schrift und Schriftgroessen kommen aus theme.json (--wp--preset--*).
 * Layout-Werte entsprechen den Pro-Blocks-Tokens aus Figma; Mobile-first, Umbruch bei 768px.
 */

:root {
	--ih-section-y: 4rem; /* section-padding-y 64 */
	--ih-gutter: 1rem; /* container-padding-x 16 */
	--ih-max: 1232px; /* max-w-7xl 1280 minus 2 x 24 */
	--ih-h1-size: 3rem;
	--ih-h1-lh: 3rem;
	--ih-h1-ls: -1.2px;
}
@media (min-width: 768px) {
	:root {
		--ih-section-y: 6rem; /* 96 */
		--ih-gutter: 1.5rem; /* 24 */
		--ih-h1-size: 3.75rem;
		--ih-h1-lh: 3.75rem;
		--ih-h1-ls: -1.5px;
	}
}

/* ---------- Basis ---------- */
body { margin: 0; -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; }
:where(.ih-header, .ih-section, .ih-footer) :is(h1, h2, p, figure) { margin: 0; }
.wp-block-image { margin: 0; }

.ih-section {
	box-sizing: border-box;
	padding: var(--ih-section-y) var(--ih-gutter);
	background: var(--wp--preset--color--background);
}
.ih-section--muted { background: var(--wp--preset--color--muted); }
.ih-container { width: 100%; max-width: var(--ih-max); margin-inline: auto; }

/* Pro-Blocks "heading-xl": Geist SemiBold 60/60, -1.5px (Mobile 48/48, -1.2px) */
.ih-h1 {
	font-size: var(--ih-h1-size);
	line-height: var(--ih-h1-lh);
	letter-spacing: var(--ih-h1-ls);
	font-weight: 600;
	text-align: center;
	color: var(--wp--preset--color--foreground);
}
.ih-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 2rem;
	text-align: center;
	color: var(--wp--preset--color--muted-foreground);
}

/* ---------- Buttons (shadcn Button: default + secondary, size sm) ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.wp-block-button > .wp-block-button__link.wp-element-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 2rem;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	transition: background-color 0.15s;
}
.wp-block-button > .wp-block-button__link.wp-element-button:hover {
	background: color-mix(in oklab, var(--wp--preset--color--primary) 90%, transparent);
}
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-element-button {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
}
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-element-button:hover {
	background: color-mix(in oklab, var(--wp--preset--color--secondary) 80%, transparent);
}

/* ---------- Header (Figma LP Navbar 2: 148px Desktop / 88px Mobile) ---------- */
.ih-header {
	box-sizing: border-box;
	padding: 1rem var(--ih-gutter);
	background: var(--wp--preset--color--background);
}
@media (min-width: 768px) {
	.ih-header { padding-block: 26px; }
}
.ih-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--ih-max);
	height: 3.5rem;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.ih-header__row { height: 6rem; }
}
.ih-header .ih-logo { flex: none; height: 3rem; }
.ih-header .ih-logo a { display: block; height: 100%; }
.ih-header .wp-block-image.ih-logo img { display: block; width: auto; height: 100%; max-width: none; }
@media (min-width: 768px) {
	.ih-header .ih-logo { height: 6rem; }
}

/* ---------- Hero: "Welcome to my Haus" ---------- */
.ih-hero-house__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 754px;
	margin-inline: auto;
}

/* ---------- Haus-Illustration (Figma 292:12356, Buehne 831.36 x 567) ---------- */
.ih-house {
	position: relative;
	width: 100%;
	max-width: 831.36px;
	aspect-ratio: 831.36 / 567;
	margin: 3rem auto 0;
}
@media (min-width: 768px) {
	.ih-house { margin-top: 73px; }
}
.ih-house > * { position: absolute; display: block; margin: 0; }
.ih-house img { max-width: none; }
.ih-house__group { left:0.000%;top:-0.104%;width:100.000%;height:69.239%; }
.ih-house__motion { left:15.730%;top:58.755%;width:19.638%;height:21.398%; }
.ih-house__box { box-sizing: border-box; border: 1px solid var(--wp--preset--color--mist-500); }
.ih-house__observatory { left:15.790%;top:28.296%;width:27.851%;height:30.547%; }
.ih-house__makerspace { left:35.307%;top:58.843%;width:37.281%;height:30.868%; }
.ih-house__guide-v { left:50.658%;top:94.767%;width:7.018%;height:0.176%; transform: rotate(-90deg); }
.ih-house__guide-h { left:8.772%;top:58.751%;width:7.018%;height:0.176%; }
.ih-house__label {
	transform: translate(-50%, -50%);
	white-space: nowrap;
	text-align: center;
	font-size: 11px;
	line-height: 1rem;
	font-weight: 700;
	color: #000;
}
@media (min-width: 640px) {
	.ih-house__label { font-size: 1rem; line-height: 1.5rem; }
}
.ih-house__label--studio { left:64.254%;top:32.187%; }
.ih-house__label--observatory { left:29.612%;top:42.416%; }
.ih-house__label--motion { left:25.582%;top:69.224%; }
.ih-house__label--makerspace { left:54.150%;top:74.339%; }

/* ---------- Logo-Leiste (Ticker) ---------- */
.ih-logos__inner { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
@media (min-width: 768px) {
	.ih-logos__inner { gap: 4rem; }
}
.ih-logos__tagline {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	font-weight: 500;
	text-align: center;
	color: var(--wp--preset--color--muted-foreground);
}
.ih-marquee { position: relative; width: 100%; overflow: hidden; }
.ih-marquee__track { display: flex; align-items: center; width: max-content; }
.ih-marquee.is-ready .ih-marquee__track { animation: ih-marquee 40s linear infinite; }
.ih-marquee.is-ready:hover .ih-marquee__track { animation-play-state: paused; }
.ih-marquee__item { flex: none; display: flex; align-items: center; justify-content: center; width: 12rem; }
.ih-marquee__item img { display: block; width: auto; height: 2rem; max-width: none; }
.ih-marquee::before,
.ih-marquee::after {
	content: "";
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 100px;
	height: 2.5rem;
	transform: translateY(-50%);
	pointer-events: none;
}
.ih-marquee::before { left: 0; background: linear-gradient(to right, var(--wp--preset--color--background), rgb(255 255 255 / 0.1)); }
.ih-marquee::after { right: 0; background: linear-gradient(to left, var(--wp--preset--color--background), rgb(255 255 255 / 0.1)); }
@keyframes ih-marquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ih-marquee.is-ready .ih-marquee__track { animation: none; }
}

/* ---------- Karussell (Scroll-Snap; Pfeile/Dots per theme.js) ---------- */
.ih-carousel__stage { position: relative; }
.ih-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ih-carousel__track::-webkit-scrollbar { display: none; }
.ih-carousel__slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; }
.ih-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9999px;
	background: #fff;
	color: var(--wp--preset--color--foreground);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
	transform: translateY(-50%);
	cursor: pointer;
}
.ih-carousel__arrow:disabled { opacity: 0.5; cursor: default; }
.ih-carousel__arrow svg { display: block; width: 1rem; height: 1rem; }
.ih-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ih-carousel__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgb(115 115 115 / 0.2);
	cursor: pointer;
	transition: width 0.15s, background-color 0.15s;
}
.ih-carousel__dots button[aria-current="true"] { width: 16px; background: var(--wp--preset--color--primary); }

/* ---------- Kundenstimmen ---------- */
.ih-testimonials { padding-inline: 0; }
@media (min-width: 768px) {
	.ih-testimonials { padding-inline: var(--ih-gutter); }
}
.ih-testimonials .ih-carousel { display: flex; flex-direction: column; gap: 2rem; max-width: 672px; margin-inline: auto; }
.ih-testimonial { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-inline: 0.5rem; }
@media (min-width: 768px) {
	.ih-testimonial { gap: 2rem; padding-inline: 1rem; }
}
.ih-testimonial__quote {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.75rem;
	font-weight: 500;
	text-align: center;
	color: var(--wp--preset--color--foreground);
}
@media (min-width: 768px) {
	.ih-testimonial__quote { font-size: var(--wp--preset--font-size--xl); }
}
.ih-testimonial__author { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
@media (min-width: 768px) {
	.ih-testimonial__author { flex-direction: row; gap: 1rem; }
}
.wp-block-image.ih-testimonial__avatar { flex: none; width: 56px; height: 56px; }
.wp-block-image.ih-testimonial__avatar img { display: block; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.ih-testimonial__meta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
@media (min-width: 768px) {
	.ih-testimonial__meta { align-items: flex-start; }
}
.ih-testimonial__name { font-weight: 500; line-height: 1.5rem; color: var(--wp--preset--color--foreground); }
.ih-testimonial__role { line-height: 1.5rem; color: var(--wp--preset--color--muted-foreground); }
/* Pfeile (40px) erst ab 1024px: dann passen sie neben die 672px breite Zitatspalte */
.ih-testimonials .ih-carousel__arrow { width: 2.5rem; height: 2.5rem; }
.ih-testimonials .ih-carousel__arrow--prev { left: -7rem; }
.ih-testimonials .ih-carousel__arrow--next { right: -7rem; }
@media (min-width: 1024px) {
	.ih-testimonials .ih-carousel__arrow { display: inline-flex; }
	.ih-testimonials .ih-carousel__dots { display: none; }
}

/* ---------- Hero-Karussell "My Designprocess and my view on AI" ---------- */
@media (min-width: 768px) {
	.ih-hero-carousel { padding-block: 95px; }
}
.ih-hero-carousel .ih-carousel { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; max-width: 957px; margin-inline: auto; }

/*
 * Der Inhalt liegt auf allen Breiten ueber dem Bild (Bild deckt die ganze Karte).
 * Mobile bekommt dafuer ein eigenes, hochformatiges Seitenverhaeltnis, damit Titel,
 * Text und Buttons Platz haben; ab 768px uebernimmt die feste Desktop-Mindesthoehe
 * aus Figma (386px + 56px Innenabstand oben/unten).
 */
.ih-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 14px;
}
.ih-slide__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
	max-width: 617px;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
.ih-slide__head { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
.ih-slide .ih-h1 { color: var(--wp--preset--color--secondary); }
.ih-slide .ih-lead { color: var(--wp--preset--color--muted); }
.ih-slide__also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ih-slide__also-label {
	width: 100%;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 2rem;
	text-align: center;
	color: var(--wp--preset--color--muted-foreground);
}
.ih-slide .wp-block-image.ih-slide__media {
	position: absolute;
	inset: 0;
	border-radius: 0;
	background: var(--wp--preset--color--muted);
}
.ih-slide .wp-block-image.ih-slide__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top;
}
/* Punktraster ueber dem Bild (Figma: 24px Raster, halbtransparent weiss) */
.ih-slide .wp-block-image.ih-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgb(255 255 255 / 0.3) 1.5px, transparent 2px);
	background-size: 24px 24px;
	background-position: 10px 11px;
}
.ih-hero-carousel .ih-carousel__arrow--prev { left: 27px; }
.ih-hero-carousel .ih-carousel__arrow--next { right: 30px; }
@media (min-width: 768px) {
	.ih-slide { aspect-ratio: auto; min-height: 386px; padding-block: 56px; }
	.ih-slide__content { padding-inline: 0; }
	.ih-slide__head { gap: 1.5rem; }
	.ih-slide__also-label { width: auto; }
	.ih-hero-carousel .ih-carousel__arrow { display: inline-flex; }
	.ih-hero-carousel .ih-carousel__dots { display: none; }
}

/* ---------- Footer ---------- */
.ih-footer {
	box-sizing: border-box;
	padding: var(--ih-section-y) var(--ih-gutter);
	background: var(--wp--preset--color--background);
}
.ih-footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
	max-width: var(--ih-max);
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25rem;
	text-align: center;
	color: var(--wp--preset--color--muted-foreground);
}
.ih-footer__links { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ih-footer a { color: inherit; text-decoration: none; }
.ih-footer a:hover { color: var(--wp--preset--color--foreground); }
@media (min-width: 768px) {
	.ih-footer__row { flex-direction: row-reverse; justify-content: space-between; text-align: left; }
	.ih-footer__links { flex-direction: row; gap: 2rem; }
}