/* ==========================================================================
   PIPPO – Theme-Styles (Frontend + Editor)
   Farben, Schriften und Abstände kommen aus theme.json. Hier stehen nur Dinge,
   die sich mit Block-Einstellungen allein nicht abbilden lassen.
   ========================================================================== */

:root {
	--pippo-radius: 16px;
	--pippo-shadow-card: 0 14px 30px -24px rgba(14, 59, 60, .55);
	/* = .pippo-header__inner min-height 64px + 1px Rahmen. Vorher 80px,
	   dadurch blieb unter der Kopfzeile ein Streifen des vorherigen
	   Abschnitts sichtbar. Eingeloggt kommt die Admin-Leiste dazu. */
	--pippo-header-offset: 65px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--wp--preset--color--apricot-soft); }
*:focus-visible { outline: 2px solid var(--wp--preset--color--petrol); outline-offset: 2px; border-radius: 6px; }

/* Kein Abstand zwischen Kopfzeile, Inhalt und Fußzeile */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Sprungziele unter der fixierten Kopfzeile */
[id] { scroll-margin-top: var(--pippo-header-offset); }
body.admin-bar { --pippo-header-offset: calc(65px + var(--wp-admin--admin-bar--height, 32px)); }

h1, h2 { text-wrap: balance; }

/* Kleine Überzeile (z. B. „WARUM PIPPO“) */
.pippo-eyebrow {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.pippo-eyebrow--pill { display: inline-flex; align-items: center; padding: 8px 13px; border-radius: 8px; background: var(--wp--preset--color--sage-soft); border: 1px solid rgba(14, 59, 60, .18); }
.pippo-hero__text h1 { overflow-wrap: normal; word-break: normal; }

/* ---------- Buttons ---------- */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; }
.pippo-btn-shadow .wp-block-button__link { box-shadow: 0 14px 26px -14px rgba(14, 59, 60, .7); }
.pippo-hero .wp-block-button__link { min-height: 58px; }

.is-style-pippo-whatsapp .wp-block-button__link,
.is-style-pippo-light .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--sage-line);
	padding: 16px 24px;
	font-size: 16px;
}
.is-style-pippo-whatsapp .wp-block-button__link:hover,
.is-style-pippo-light .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--petrol); }
.is-style-pippo-whatsapp-dark .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .35);
	padding: 16px 26px;
	font-size: 16px;
}
.is-style-pippo-whatsapp-dark .wp-block-button__link:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .6); }
.is-style-pippo-whatsapp .wp-block-button__link::before,
.is-style-pippo-whatsapp-dark .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.6' fill='none' stroke='%2325D366' stroke-width='1.5'/%3E%3Cpath fill='%2325D366' transform='translate(4.8 4.8) scale(0.6)' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.is-style-pippo-apricot .wp-block-button__link { background: var(--wp--preset--color--apricot); color: var(--wp--preset--color--petrol-dark); padding: 16px 28px; }
.is-style-pippo-apricot .wp-block-button__link:hover { background: #F2B477; color: var(--wp--preset--color--petrol-dark); }
.is-style-pippo-outline .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--petrol);
	border: 1.5px solid var(--wp--preset--color--petrol);
	padding: 14px 26px;
	font-size: 15px;
}
.is-style-pippo-outline .wp-block-button__link:hover { background: var(--wp--preset--color--sage-soft); color: var(--wp--preset--color--petrol); }
.pippo-reviews-more .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Telefon-Symbol: Text bleibt für Screenreader erhalten, sichtbar ist nur das Icon */
.is-style-pippo-phone .wp-block-button__link {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 12px;
	border: 1.5px solid var(--wp--preset--color--sage-line);
	background: #fff;
	color: var(--wp--preset--color--petrol);
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}
.is-style-pippo-phone .wp-block-button__link:hover { background: var(--wp--preset--color--sage-soft); color: var(--wp--preset--color--petrol); }
.is-style-pippo-phone .wp-block-button__link::before {
	content: "";
	width: 19px;
	height: 19px;
	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='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
	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='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Kopfzeile ---------- */
.pippo-header-part { position: sticky; top: 0; z-index: 60; }
.admin-bar .pippo-header-part { top: var(--wp-admin--admin-bar--height, 32px); }
.pippo-header {
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--sage-line);
}
/* backdrop-filter würde das Vollbild-Menü im Header „einsperren“ – beim Öffnen abschalten */
.has-modal-open .pippo-header,
.pippo-header:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
.pippo-logo { flex: 0 0 auto; }
.pippo-logo img { height: 38px !important; width: auto !important; display: block; }
.pippo-header__inner > .pippo-nav { margin-left: auto; }
.pippo-nav .wp-block-navigation-item__content { font-size: 15px; font-weight: 600; line-height: 1; color: var(--wp--preset--color--ink); }
.pippo-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 40px; text-underline-offset: 5px; text-decoration-thickness: 2px; transition: color .18s ease; }
.pippo-nav .wp-block-navigation-item__content:hover,
.pippo-nav .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--petrol); text-decoration: underline; }
.pippo-header__inner { min-height: 64px; }
@media (max-width: 560px) {
	.pippo-logo img,
	.pippo-footer__logo img { height: 32px !important; }
	.pippo-header-cta .wp-block-button__link { padding: 10px 12px; font-size: 13.5px; }
	.pippo-header__inner { gap: 10px !important; }
}
.pippo-nav .pippo-nav-ctas { display: none; }
.pippo-header-ctas { flex: 0 0 auto; }
.pippo-header-cta .wp-block-button__link { padding: 11px 16px; border-radius: 12px; font-size: 15px; white-space: nowrap; }

/* Handy-Menü (Overlay) – ab 880 px statt 600 px, wie im Design */
.pippo-nav .wp-block-navigation__responsive-container-open {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--wp--preset--color--petrol);
	color: #fff;
	align-items: center;
	justify-content: center;
}
.pippo-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }
.pippo-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 0;
	/* height:100% bezieht sich bei position:fixed in iOS-Safari auf den
	   GROSSEN Viewport (Toolbar ausgeblendet) – der letzte Button lag dann
	   hinter der Browser-Leiste. 100dvh nutzt die sichtbare Höhe. */
	height: 100dvh;
	max-height: 100dvh;
	/* WP-Core setzt gap:inherit auf alle Overlay-Container; dadurch erbt das
	   Overlay den blockGap der Navigation (26px) und reißt Lücken auf. */
	gap: 0;
}
.pippo-nav .is-menu-open .wp-block-navigation__responsive-close { min-height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; gap: 0; }
.pippo-nav .is-menu-open .wp-block-navigation__responsive-dialog { flex: 1; display: flex; flex-direction: column; gap: 0; }
/* Eingeloggt schiebt WP den Dialog um 46px nach unten – stattdessen das
   ganze Overlay unter der Admin-Leiste beginnen lassen. */
.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog,
body.admin-bar .pippo-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
@media screen and (max-width: 782px) {
	body.admin-bar .pippo-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: 46px;
		height: calc(100dvh - 46px);
		max-height: calc(100dvh - 46px);
	}
	body.admin-bar .pippo-nav .is-menu-open .wp-block-navigation__responsive-close {
		min-height: calc(100dvh - 46px);
		max-height: calc(100dvh - 46px);
	}
}
.pippo-nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	display: block;
	height: clamp(52px, 7.5vh, 64px);
	border-bottom: 1px solid var(--wp--preset--color--sage-line);
	background: url("../images/logo/logo-header.png") no-repeat 20px center / auto clamp(30px, 4.4vh, 38px);
}
.pippo-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 11px;
	right: 20px;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--wp--preset--color--petrol);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pippo-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	/* --pippo-inset = Abstand Linie -> Text innerhalb einer Zeile. Derselbe
	   Wert gilt unter der letzten Linie und am unteren Rand. */
	--pippo-row: clamp(44px, 6.4vh, 56px);
	--pippo-fs: clamp(17px, 2.2vh, 20px);
	--pippo-inset: calc((var(--pippo-row) - var(--pippo-fs) * 1.2) / 2);
	flex: 1;
	display: flex !important;
	flex-direction: column;
	gap: 0;
	/* padding-top 0: die Trennlinie der Logoleiste ist zugleich die obere
	   Linie des ersten Eintrags. WP-Core setzt hier calc(2rem + 24px) –
	   deshalb !important. */
	padding: 0 24px calc(var(--pippo-inset) + env(safe-area-inset-bottom)) !important;
	justify-content: flex-start;
	align-items: stretch !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pippo-nav .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; margin: 0; padding: 0; width: 100%; }
.pippo-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--sage-line); align-items: stretch !important; }
.pippo-nav .is-menu-open .wp-block-navigation-item__content {
	/* Flex-Zentrierung statt Padding: der Text sitzt exakt mittig zwischen
	   den beiden Trennlinien, unabhängig von der Schriftmetrik. */
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--pippo-row);
	padding: 0 4px !important;
	line-height: 1.2;
	text-align: center;
	font-size: var(--pippo-fs);
}
.pippo-nav .is-menu-open .pippo-nav-ctas { display: flex; flex-direction: column; align-items: stretch; gap: var(--pippo-inset); margin-top: var(--pippo-inset); width: 100%; }
.pippo-nav .is-menu-open .pippo-nav-ctas .wp-block-button { width: 100%; }
.pippo-nav .is-menu-open .pippo-nav-ctas .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	min-height: var(--pippo-row);
	padding: 0 16px;
	line-height: 1.2;
	font-size: clamp(15px, 1.9vh, 17px);
	border-radius: 12px;
}

@media (min-width: 600px) and (max-width: 880px) {
	.pippo-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.pippo-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 880px) {
	.pippo-header__inner > .pippo-header-ctas { order: 2; margin-left: auto; }
	.pippo-header__inner > .pippo-nav { order: 3; margin-left: 0; }
	.pippo-header-ctas .is-style-pippo-phone { display: none; }
}
@media (max-width: 599px) {
	.pippo-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}

/* ---------- Animationen ---------- */
@keyframes pippoHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pippoPop { 0% { transform: scale(1); } 14% { transform: scale(1.26); } 34% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes pippoSweep { 0% { transform: translateX(-3px) rotate(-7deg); } 25% { transform: translateX(0) translateY(-2px) rotate(0deg); } 50% { transform: translateX(3px) rotate(7deg); } 75% { transform: translateX(0) translateY(-2px) rotate(0deg); } 100% { transform: translateX(-3px) rotate(-7deg); } }
@keyframes pippoRing { 0%, 54%, 100% { transform: rotate(0) scale(1); } 57% { transform: rotate(-14deg) scale(1.1); } 61% { transform: rotate(13deg) scale(1.1); } 65% { transform: rotate(-11deg) scale(1.08); } 69% { transform: rotate(10deg) scale(1.08); } 73% { transform: rotate(-7deg) scale(1.05); } 77% { transform: rotate(6deg) scale(1.04); } 81% { transform: rotate(0) scale(1); } }
@keyframes pippoRevIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pippoTwinkle { 0%, 70%, 100% { transform: scale(1); filter: none; } 78% { transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(242, 179, 61, .85)); } 86% { transform: scale(1); filter: none; } }
@keyframes pippoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body:not(.block-editor-iframe__body) .pippo-anim { animation: pippoHeroIn .6s cubic-bezier(.22, .7, .3, 1) both; }
.pippo-anim-1 { animation-delay: .05s !important; }
.pippo-anim-2 { animation-delay: .14s !important; }
.pippo-anim-3 { animation-delay: .23s !important; }
.pippo-anim-4 { animation-delay: .32s !important; }
.pippo-anim-5 { animation-delay: .41s !important; }
.pippo-pop img { animation: pippoPop 2s cubic-bezier(.3, .8, .3, 1) infinite both; will-change: transform; }
.pippo-pop-1 img { animation-delay: 0s; }
.pippo-pop-2 img { animation-delay: .18s; }
.pippo-pop-3 img { animation-delay: .36s; }
.pippo-callout__icon img { animation: pippoSweep 2.6s ease-in-out infinite both; transform-origin: 50% 82%; will-change: transform; }
.is-style-pippo-whatsapp .wp-block-button__link::before,
.is-style-pippo-whatsapp-dark .wp-block-button__link::before { animation: pippoRing 2.6s ease-in-out infinite both; }
/* Kundenstimmen: sanftes Einblenden, Sterne funkeln */
.pippo-reviews.is-armed > .pippo-review { opacity: 0; }
.pippo-reviews.is-armed.is-run > .pippo-review { animation: pippoRevIn .7s cubic-bezier(.22, .7, .3, 1) both; }
.pippo-reviews.is-run > .pippo-review:nth-child(2) { animation-delay: .14s; }
.pippo-reviews.is-run > .pippo-review:nth-child(3) { animation-delay: .28s; }
.pippo-reviews.is-run > .pippo-review:nth-child(4) { animation-delay: .42s; }
.pippo-reviews.is-run > .pippo-review:nth-child(5) { animation-delay: .56s; }
.pippo-reviews.is-run > .pippo-review:nth-child(6) { animation-delay: .7s; }
.pippo-star { display: inline-block; animation: pippoTwinkle 3s ease-in-out infinite both; will-change: transform; }
.pippo-star:nth-child(2) { animation-delay: .12s; }
.pippo-star:nth-child(3) { animation-delay: .24s; }
.pippo-star:nth-child(4) { animation-delay: .36s; }
.pippo-star:nth-child(5) { animation-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
	.pippo-anim, .pippo-pop img, .pippo-marquee__track, .pippo-callout__icon img, .pippo-star,
	.is-style-pippo-whatsapp .wp-block-button__link::before, .is-style-pippo-whatsapp-dark .wp-block-button__link::before { animation: none !important; }
	.pippo-reviews > .pippo-review { opacity: 1 !important; animation: none !important; }
}

/* ---------- Hero ---------- */
.pippo-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.pippo-rating mark { font-size: 19px; letter-spacing: 2px; line-height: 1; }

/* Vorher/Nachher-Badges */
.pippo-hero-slider::before, .pippo-hero-slider::after,
.pippo-marquee figure.wp-block-image::before, .pippo-marquee figure.wp-block-image::after {
	position: absolute;
	top: 14px;
	z-index: 2;
	color: #fff;
	font: 700 12px/1 var(--wp--preset--font-family--inter);
	letter-spacing: .04em;
	padding: 7px 12px;
	border-radius: 8px;
	pointer-events: none;
}
.pippo-hero-slider::before, .pippo-marquee figure.wp-block-image::before { content: "VORHER"; left: 14px; background: rgba(30, 42, 40, .82); }
.pippo-hero-slider::after, .pippo-marquee figure.wp-block-image::after { content: "NACHHER"; right: 14px; background: var(--wp--preset--color--petrol); }
.pippo-marquee figure.wp-block-image::before, .pippo-marquee figure.wp-block-image::after { top: 10px; font-size: 10.5px; letter-spacing: .05em; padding: 6px 9px; border-radius: 7px; height: auto; width: auto; bottom: auto; }
.pippo-marquee figure.wp-block-image::before { left: 10px; }
.pippo-marquee figure.wp-block-image::after { right: 10px; }

/* Hero-Slider (Galerie-Block) */
.wp-block-gallery.pippo-hero-slider {
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	display: block !important;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	border: 6px solid #fff;
	background: #fff;
	box-shadow: 0 34px 60px -30px rgba(14, 59, 60, .5);
}
.wp-block-gallery.has-nested-images.pippo-hero-slider figure.wp-block-image:not(#individual-image) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity .45s ease;
}
.wp-block-gallery.has-nested-images.pippo-hero-slider figure.wp-block-image:first-child:not(#individual-image),
.wp-block-gallery.has-nested-images.pippo-hero-slider figure.wp-block-image.is-active:not(#individual-image) { opacity: 1; }
.pippo-js .wp-block-gallery.has-nested-images.pippo-hero-slider figure.wp-block-image:not(.is-active):not(#individual-image) { opacity: 0; }
.wp-block-gallery.has-nested-images.pippo-hero-slider figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Im Editor alle Bilder als Raster zeigen, damit man sie tauschen kann */
.block-editor-block-list__layout .wp-block-gallery.pippo-hero-slider { aspect-ratio: auto; display: flex !important; }
.block-editor-block-list__layout .wp-block-gallery.has-nested-images.pippo-hero-slider figure.wp-block-image:not(#individual-image) { position: relative; opacity: 1; width: calc(50% - 8px); height: auto; }

/* Responsive Spaltenabstände (clamp) */
.wp-block-columns.pippo-hero__grid { column-gap: clamp(26px, 4vw, 54px) !important; }
.wp-block-columns.pippo-two-col { column-gap: clamp(28px, 4vw, 56px) !important; }
.pippo-trust__bar.is-layout-flex { column-gap: clamp(40px, 7vw, 96px) !important; }

/* Erster Bildschirm (Hero + Vorteile-Leiste) füllt auf Desktop das Fenster */
@media (min-width: 881px) and (min-height: 600px) {
	.pippo-fold { display: flex; flex-direction: column; min-height: calc(100svh - 65px); }
	.pippo-fold > .pippo-hero { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(22px, 4vh, 64px) !important; padding-bottom: clamp(26px, 4vh, 72px) !important; }
	.pippo-fold > .pippo-hero > * { width: 100%; }
	.wp-block-gallery.pippo-hero-slider { width: clamp(300px, 54vh, 620px); margin-inline: auto; }
}
.admin-bar .pippo-fold { min-height: calc(100svh - 65px - var(--wp-admin--admin-bar--height, 32px)); }

/* ---------- Vorteile-Leiste ---------- */
.pippo-trust__icon img { width: 45px !important; height: 45px !important; display: block; }
.pippo-trust__item { flex: 0 0 auto; }

/* ---------- Problem / Verschmutzungen ---------- */
.pippo-callout__icon { flex: 0 0 auto; }
.pippo-callout__icon img { width: 58px !important; height: 58px !important; display: block; object-fit: contain; }
.pippo-sit__title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px !important;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--apricot);
}
.pippo-sit__title::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .16); }
ul.pippo-chips { list-style: none; margin: 15px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
ul.pippo-chips li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--mint-text);
	white-space: nowrap;
}

/* ---------- Galerie (Laufband / Handy-Diashow) ---------- */
.wp-block-gallery.pippo-marquee.is-marquee { display: block !important; overflow: hidden; gap: 0; }
.pippo-marquee__track { display: flex; width: max-content; animation: pippoMarquee 30s linear infinite; }
.pippo-marquee.is-marquee:hover .pippo-marquee__track { animation-play-state: paused; }
.wp-block-gallery.has-nested-images.pippo-marquee figure.wp-block-image:not(#individual-image) {
	position: relative;
	border-radius: var(--pippo-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--sage-line);
	box-shadow: 0 20px 40px -26px rgba(14, 59, 60, .45);
}
.wp-block-gallery.has-nested-images.pippo-marquee.is-marquee figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	width: 340px;
	margin: 0 16px 0 0;
}
.wp-block-gallery.has-nested-images.pippo-marquee figure.wp-block-image:not(#individual-image) img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }
.pippo-marquee__dots { display: none; }

@media (max-width: 880px) {
	.pippo-marquee.is-marquee .pippo-marquee__track {
		animation: none;
		position: relative;
		display: block;
		width: min(88vw, 420px);
		aspect-ratio: 1 / 1;
		margin: 0 auto;
		border-radius: var(--pippo-radius);
		overflow: hidden;
		border: 1px solid var(--wp--preset--color--sage-line);
		box-shadow: 0 20px 40px -26px rgba(14, 59, 60, .45);
	}
	.wp-block-gallery.has-nested-images.pippo-marquee.is-marquee figure.wp-block-image:not(#individual-image) {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		transition: opacity .7s ease;
	}
	.wp-block-gallery.has-nested-images.pippo-marquee.is-marquee figure.wp-block-image.is-active:not(#individual-image) { opacity: 1; }
	.wp-block-gallery.has-nested-images.pippo-marquee.is-marquee figure.wp-block-image.is-clone:not(#individual-image) { display: none; }
	.wp-block-gallery.has-nested-images.pippo-marquee figure.wp-block-image:not(#individual-image) img { height: 100%; }
	.pippo-marquee__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
	.pippo-marquee__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--sage-line); transition: background .3s; }
	.pippo-marquee__dots span.is-active { background: var(--wp--preset--color--petrol); }
}

/* ---------- Warum PIPPO ---------- */
.pippo-rounded-media img { border: 1px solid var(--wp--preset--color--sage-line); background: var(--wp--preset--color--sage-soft); width: 100%; height: auto; display: block; }
.pippo-feature__icon, .pippo-step__icon { flex: 0 0 auto; }
.pippo-feature__icon img { width: 56px !important; height: 56px !important; border-radius: 14px; display: block; }
.pippo-step__icon img { width: 48px !important; height: 48px !important; border-radius: 12px; display: block; }
.pippo-step > .wp-block-group { min-width: 0; }

/* Ablauf: Schritte leuchten nacheinander auf (startet, sobald sichtbar) */
@keyframes pippoFlowCard { 0%, 1% { border-color: rgba(255,255,255,.1); background-color: #12494A; transform: translateY(0); box-shadow: none; } 6%, 30% { border-color: rgba(238,163,95,.85); background-color: #14514F; transform: translateY(-5px); box-shadow: 0 18px 32px -20px rgba(0,0,0,.9); } 38%, 100% { border-color: rgba(255,255,255,.1); background-color: #12494A; transform: translateY(0); box-shadow: none; } }
@keyframes pippoFlowNum { 0%, 1% { background: transparent; color: #BFD4CB; border-color: rgba(255,255,255,.22); } 6%, 30% { background: #EEA35F; color: #123F3F; border-color: #EEA35F; } 38%, 100% { background: transparent; color: #BFD4CB; border-color: rgba(255,255,255,.22); } }
@keyframes pippoFlowFill1 { 0%, 2% { transform: scaleX(0); } 31% { transform: scaleX(1); } 99.4% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pippoFlowFill2 { 0%, 34% { transform: scaleX(0); } 64% { transform: scaleX(1); } 99.4% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pippoFlowFill3 { 0%, 67% { transform: scaleX(0); } 97% { transform: scaleX(1); } 99.4% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pippoFlowArrow { 0%, 20% { opacity: .28; transform: translateY(-50%) translateX(0); } 30% { opacity: 1; transform: translateY(-50%) translateX(6px); } 42%, 100% { opacity: .28; transform: translateY(-50%) translateX(0); } }
@keyframes pippoFlowIcon { 0%, 2% { transform: scale(1) rotate(0); } 8% { transform: scale(1.13) rotate(-4deg); } 17% { transform: scale(1) rotate(0); } 100% { transform: scale(1) rotate(0); } }
@keyframes pippoFlowDone { 0%, 72% { opacity: 0; transform: scale(.4); } 78% { opacity: 1; transform: scale(1.18); } 83% { opacity: 1; transform: scale(1); } 99.4% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
.pippo-flow { counter-reset: pippoflow; }
.pippo-flow > .wp-block-column { counter-increment: pippoflow; position: relative; }
.pippo-flow .pippo-step {
	position: relative;
	background-image: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12));
	background-repeat: no-repeat;
	background-position: left 26px bottom 20px;
	background-size: calc(100% - 52px) 3px;
}
.pippo-flow .pippo-step > .wp-block-group { padding-right: 22px; }
.pippo-flow .pippo-step::before {
	content: counter(pippoflow);
	position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center;
	font: 700 12px/1 var(--wp--preset--font-family--inter); color: #BFD4CB;
}
.pippo-flow .pippo-step::after {
	content: ""; position: absolute; left: 26px; right: 26px; bottom: 20px; height: 3px; border-radius: 2px;
	background: #EEA35F; transform: scaleX(0); transform-origin: left center;
}
.pippo-flow > .wp-block-column:not(:last-child)::after {
	content: "→"; position: absolute; top: 50%; right: -17px; z-index: 2;
	font: 700 19px/1 var(--wp--preset--font-family--inter); color: #EEA35F; opacity: .28; transform: translateY(-50%);
}
.pippo-flow .pippo-step__icon { position: relative; }
.pippo-flow > .wp-block-column:last-child .pippo-step__icon::after {
	content: "✓"; position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%;
	background: #EEA35F; color: #0E3B3C; display: flex; align-items: center; justify-content: center;
	font: 800 13px/1 var(--wp--preset--font-family--inter); box-shadow: 0 0 0 3px #12494A; opacity: 0;
}
.pippo-flow.is-run .pippo-step { animation: pippoFlowCard 18s ease-in-out infinite both; }
.pippo-flow.is-run .pippo-step::before { animation: pippoFlowNum 18s ease-in-out infinite both; }
.pippo-flow.is-run .pippo-step__icon { animation: pippoFlowIcon 18s ease-in-out infinite both; }
.pippo-flow.is-run > .wp-block-column:nth-child(1) .pippo-step::after { animation: pippoFlowFill1 18s linear infinite both; }
.pippo-flow.is-run > .wp-block-column:nth-child(2) .pippo-step::after { animation: pippoFlowFill2 18s linear infinite both; }
.pippo-flow.is-run > .wp-block-column:nth-child(3) .pippo-step::after { animation: pippoFlowFill3 18s linear infinite both; }
.pippo-flow.is-run > .wp-block-column:not(:last-child)::after { animation: pippoFlowArrow 18s ease-in-out infinite both; }
.pippo-flow.is-run > .wp-block-column:last-child .pippo-step__icon::after { animation: pippoFlowDone 18s ease-in-out infinite both; }
.pippo-flow.is-run > .wp-block-column:nth-child(2) .pippo-step,
.pippo-flow.is-run > .wp-block-column:nth-child(2) .pippo-step::before,
.pippo-flow.is-run > .wp-block-column:nth-child(2) .pippo-step__icon,
.pippo-flow.is-run > .wp-block-column:nth-child(2)::after { animation-delay: 6s; }
.pippo-flow.is-run > .wp-block-column:nth-child(3) .pippo-step,
.pippo-flow.is-run > .wp-block-column:nth-child(3) .pippo-step::before,
.pippo-flow.is-run > .wp-block-column:nth-child(3) .pippo-step__icon { animation-delay: 12s; }
@media (max-width: 880px) { .pippo-flow > .wp-block-column::after { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
	.pippo-flow .pippo-step, .pippo-flow .pippo-step::before, .pippo-flow .pippo-step__icon, .pippo-flow .pippo-step::after,
	.pippo-flow > .wp-block-column::after, .pippo-flow .pippo-step__icon::after { animation: none !important; }
	.pippo-flow .pippo-step::after { transform: scaleX(1); }
	.pippo-flow > .wp-block-column:last-child .pippo-step__icon::after { opacity: 1; }
}
/* Hinweis mit Info-Symbol */
.pippo-note-info::before {
	content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 11px; vertical-align: -6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEA35F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 10.8v5.6'/%3E%3Cpath d='M12 7.7h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Spalten erst unter 880 px untereinander (wie im Design) ---------- */
@media (max-width: 880px) {
	.wp-block-columns.pippo-stack-880 { flex-wrap: wrap !important; }
	.wp-block-columns.pippo-stack-880 > .wp-block-column { flex-basis: 100% !important; flex-grow: 1; }
	.wp-block-columns.pippo-media-last > .wp-block-column:first-child { order: 2; }
	.pippo-hero .wp-block-buttons { flex-direction: column; align-items: flex-start; }
	.pippo-trust__bar { flex-direction: column !important; align-items: flex-start !important; width: fit-content; margin-inline: auto !important; }
	/* Chips: lesbar, aber so, dass jede der drei Kategorien in 3 Zeilen passt.
	   Die Größe skaliert mit der Displaybreite, weil die Spalte am Handy
	   die volle Breite einnimmt. */
	.pippo-sit ul.pippo-chips { gap: 6px; }
	.pippo-sit ul.pippo-chips li { padding: 8px 9px; font-size: clamp(10px, 3.35vw, 14px); }
	.pippo-callout__icon img { width: 84px !important; height: 84px !important; }
}

/* Schmale Geräte (bis iPhone SE / 360er-Android): enger, damit die
   größte Kategorie weiterhin in 3 Zeilen passt. */
@media (max-width: 374px) {
	.pippo-sit ul.pippo-chips { gap: 5px; }
	.pippo-sit ul.pippo-chips li { padding: 7px 7px; font-size: clamp(9px, 3vw, 12px); }
}

/* ---------- Kundenstimmen ---------- */
.pippo-dots {
	background-image: radial-gradient(rgba(14, 59, 60, .09) 1.4px, transparent 1.5px);
	background-size: 22px 22px;
	background-position: center;
}
.pippo-google-rating { margin-top: 16px !important; }
.pippo-google-rating a { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; color: var(--wp--preset--color--ink); line-height: 1.35; }
.pippo-google-rating a::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.1 24.5c0-1.6-.1-2.8-.4-4H24v7.3h12.1c-.2 2-1.6 5-4.5 7l-.1.3 6.5 5 .5.1c4.2-3.8 6.6-9.5 6.6-15.7z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.9-1.9 14.5-5.3l-6.9-5.3c-1.8 1.3-4.3 2.2-7.6 2.2-5.8 0-10.7-3.8-12.5-9l-.3.1-6.7 5.2-.1.3C8 41.1 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.5 28.6c-.5-1.4-.7-2.9-.7-4.6s.3-3.2.7-4.6v-.3l-6.8-5.3-.2.1C2.9 17 2 20.4 2 24s.9 7 2.5 10.1l7-5.5z'/%3E%3Cpath fill='%23EA4335' d='M24 10.4c4.1 0 6.9 1.8 8.5 3.3l6.2-6C34.9 4.1 29.9 2 24 2 15.4 2 8 6.9 4.5 13.9l7 5.5c1.8-5.2 6.7-9 12.5-9z'/%3E%3C/svg%3E") no-repeat center / contain; }
.pippo-google-rating mark { font-size: 18px; letter-spacing: 1px; }
.pippo-review { margin: 0; box-shadow: var(--pippo-shadow-card); }
.pippo-review__stars { font-size: 16px; letter-spacing: 1px; line-height: 1.2; }
.pippo-review__text { flex-grow: 1; }
.pippo-review__name { margin-top: 8px !important; line-height: 1; }
.pippo-js .pippo-review.is-hidden { display: none; }
.wp-block-buttons > .wp-block-button.pippo-reviews-more { display: none; }
.pippo-js .wp-block-buttons > .wp-block-button.pippo-reviews-more.is-needed,
.block-editor-block-list__layout .wp-block-buttons > .wp-block-button.pippo-reviews-more { display: inline-block; }

@media (max-width: 880px) {
	.pippo-reviews.is-layout-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
	.pippo-contact-cards.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* ---------- FAQ (Details-Block) ---------- */
.pippo-faq.is-layout-grid { align-items: start; }
@media (max-width: 880px) { .pippo-faq.is-layout-grid { grid-template-columns: 1fr !important; } }
.pippo-faq__item a { color: var(--wp--preset--color--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.pippo-faq__item { transition: transform .25s cubic-bezier(.22, .7, .3, 1), box-shadow .25s ease, border-color .25s ease; }
	.pippo-faq__item:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--sage) !important; box-shadow: 0 20px 36px -24px rgba(14, 59, 60, .6); }
}
@media (prefers-reduced-motion: reduce) { .pippo-faq__item, .pippo-faq__item:hover { transition: none; transform: none; } }
.pippo-faq__item {
	background: #fff;
	border: 1px solid var(--wp--preset--color--sage-line);
	border-radius: var(--pippo-radius);
	overflow: hidden;
}
.pippo-faq__item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
}
.pippo-faq__item summary::-webkit-details-marker { display: none; }
.pippo-faq__item summary::marker { content: ""; }
.pippo-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--apricot);
	transition: transform .2s;
}
.pippo-faq__item[open] summary::after { transform: rotate(45deg); }
.pippo-faq__item > :not(summary) { margin: 0 !important; padding: 0 20px 20px; }

/* ---------- Kontakt ---------- */
.pippo-contact-card { position: relative; text-align: left; }
.pippo-contact-card__label { font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.pippo-contact-card__value { word-break: break-word; margin-top: 2px !important; }
.pippo-contact-card__value a { color: #fff; }
.pippo-contact-card__value a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pippo-contact-card:hover { border-color: rgba(255, 255, 255, .25) !important; }

/* ---------- Fußzeile ---------- */
/* Gleiche Höhe wie im Kopfbereich – beide Dateien haben dasselbe
   Seitenverhältnis (800x219), daher stimmt auch die Breite überein. */
.pippo-footer__logo img { height: 38px !important; width: auto !important; display: block; }
.pippo-footer__main { max-width: var(--wp--style--global--content-size); margin-inline: auto; }

/* ---------- „Nach oben“-Button (per JS eingefügt) ---------- */
.pippo-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 65;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: var(--wp--preset--color--petrol);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 26px -10px rgba(14, 59, 60, .7);
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .25s, transform .25s;
}
.pippo-top::before {
	content: "";
	width: 22px;
	height: 22px;
	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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pippo-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Bei offenem Overlay-Menü stört der Pfeil (position:fixed, z-index 65) */
.has-modal-open .pippo-top { opacity: 0; pointer-events: none; }

/* ---------- Einfache Unterseiten (Impressum, Datenschutz …) ---------- */
/* Kurze Seiten füllen sonst den Bildschirm nicht aus und die Fußzeile steht
   auf großen Displays mitten auf der Seite. Nur auf diesen Seiten aktiv –
   die Startseite ist ohnehin höher als der Viewport. */
body:has(.pippo-page-content) .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}
body.admin-bar:has(.pippo-page-content) .wp-site-blocks {
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}
body:has(.pippo-page-content) .pippo-page-content { flex: 1 0 auto; }
.pippo-page-content { padding-block: clamp(40px, 6vw, 80px); }
.pippo-page-content h1 { margin-bottom: 24px; }

/* Aufklappbare Abschnitte auf Unterseiten (z. B. die Postanschrift im
   Impressum). Natives <details>, daher ohne JavaScript und mit Tastatur
   bedienbar – die Zusammenfassung bekommt hier nur das Aussehen eines
   Links, damit erkennbar ist, dass sie anklickbar ist. */
.pippo-page-content .wp-block-details { margin-block: 14px; }
.pippo-page-content .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--petrol);
	text-underline-offset: 3px;
}
.pippo-page-content .wp-block-details summary:hover,
.pippo-page-content .wp-block-details summary:focus-visible { text-decoration: underline; }
.pippo-page-content .wp-block-details[open] summary { margin-bottom: 10px; }
.pippo-page-content .wp-block-details :where(p):last-child { margin-bottom: 0; }
.pippo-page-content :where(p, li) { color: var(--wp--preset--color--ink); }