/* Sonnenbogen-Motiv. Klassen frei auf Blöcke setzbar:
   .sk-bogen  großer drehender Bogen oben rechts (Element braucht keinen eigenen Inhalt dafür)
   .sk-punkte schwebende Punkte
   .sk-ring   Ring um ein Bild (auf Bild-Block)
   .sk-einblenden  Abschnitt gleitet beim Scrollen ein */

.sk-bogen, .sk-punkte { position: relative; overflow: hidden; }

.sk-bogen::before {
	content: "";
	position: absolute;
	width: min(60vw, 520px);
	aspect-ratio: 1;
	right: -8%;
	top: -14%;
	border: 3px solid var(--wp--preset--color--sonne);
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-radius: 50%;
	opacity: .85;
	pointer-events: none;
	z-index: 1;
	animation: sk-drehen 40s linear infinite;
}

.sk-punkte::after {
	content: "";
	position: absolute;
	left: 62%;
	top: 24%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--sonne-hell);
	box-shadow: 160px 170px 0 -3px var(--wp--preset--color--sonne-hell), 290px 70px 0 3px rgba(255, 166, 38, .6);
	pointer-events: none;
	z-index: 1;
	animation: sk-schweben 7s ease-in-out infinite;
}

/* Inhalte über den Deko-Elementen halten */
.sk-bogen > *, .sk-punkte > * { position: relative; z-index: 2; }
.sk-bogen > .wp-block-cover__image-background,
.sk-bogen > .wp-block-cover__background { position: absolute; z-index: 0; }

.wp-block-image.sk-ring { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto var(--wp--preset--spacing--30); }
.wp-block-image.sk-ring img { position: relative; z-index: 1; border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; }
.wp-block-image.sk-ring::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--sonne);
	border-right-color: transparent;
	pointer-events: none;
	animation: sk-drehen 30s linear infinite;
}

@supports (animation-timeline: view()) {
	.sk-einblenden {
		animation: sk-einblenden linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
}
.editor-styles-wrapper .sk-einblenden { animation: none; }

@keyframes sk-drehen { to { transform: rotate(360deg); } }
@keyframes sk-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes sk-einblenden { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sk-bogen::before, .sk-punkte::after, .wp-block-image.sk-ring::before, .sk-einblenden { animation: none !important; }
}

/* ===== Kopfbereich „Ihr Haus kann mehr." – hell, Foto als Kachel ===== */
.sk-hero { background: radial-gradient(circle at 78% 35%, #fff1da 0, var(--wp--preset--color--sand) 58%); overflow: hidden; }
.sk-hero .sk-kicker { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: #a35f00; }
.sk-hero-titel { font-size: clamp(2.8rem, 6vw, 4.8rem) !important; line-height: .98 !important; font-weight: 900 !important; margin-top: .3em !important; }
.sk-hero-titel mark { position: relative; display: inline-block; }
.sk-hero-titel mark::after { content: ""; position: absolute; left: -.2em; right: -.25em; top: -.12em; bottom: -.22em; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M10,70 C20,15 160,0 190,40 C200,70 120,98 40,90' fill='none' stroke='%23ffa626' stroke-width='5' stroke-linecap='round' stroke-dasharray='520' stroke-dashoffset='520'%3E%3Canimate attributeName='stroke-dashoffset' from='520' to='0' begin='0.9s' dur='1.4s' fill='freeze'/%3E%3C/path%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.sk-wechsel { position: relative; font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; min-height: 1.3em; margin: .4em 0 .2em !important; }
.sk-wechsel em { position: absolute; margin-left: .3em; font-style: normal; white-space: nowrap; color: #b86a00; opacity: 0; animation: sk-wort 15s infinite; }
.sk-wechsel em:nth-of-type(2) { animation-delay: 3s; } .sk-wechsel em:nth-of-type(3) { animation-delay: 6s; }
.sk-wechsel em:nth-of-type(4) { animation-delay: 9s; } .sk-wechsel em:nth-of-type(5) { animation-delay: 12s; }
.sk-hero .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--anthrazit); border-color: var(--wp--preset--color--anthrazit); }
.sk-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem !important; }
.sk-chips span { background: #fff; border: 1px solid #ecdcc4; padding: .45rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 700; }

/* Foto als große Kachel mit Sonnenbogen und angehefteter Kundenstimme */
.sk-hero-bild { position: relative; }
.sk-hero-bild::before { content: ""; position: absolute; right: -28px; top: -28px; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--wp--preset--color--sonne); border-left-color: transparent; border-bottom-color: transparent; animation: sk-drehen 40s linear infinite; z-index: 0; pointer-events: none; }
.sk-hero-foto { position: relative; z-index: 1; margin: 0 !important; }
.sk-hero-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 26px; box-shadow: 0 24px 50px rgba(25,25,25,.16); display: block; }
.sk-hero-stimme { position: absolute !important; z-index: 2; left: -2.5rem; bottom: -1.5rem; width: min(300px, 70%); margin: 0 !important; background: #fff; color: var(--wp--preset--color--anthrazit);
	border-radius: 16px; padding: 1rem 1.1rem !important; box-shadow: 0 18px 40px rgba(0,0,0,.16); animation: sk-schweben 7s ease-in-out infinite; }
.sk-hero-stimme p { margin: 0 0 .3rem !important; font-size: .95rem; line-height: 1.4; }

/* Handy/Tablet: Foto oben, Text darunter, Karte aus */
@media (max-width: 781px) {
	.sk-hero-spalten { flex-direction: column-reverse; }
	.sk-hero-stimme { display: none; }
	.sk-hero-bild::before { width: 40%; right: -14px; top: -14px; }
}
.editor-styles-wrapper .sk-wechsel em { position: static; opacity: 1; animation: none; }
.editor-styles-wrapper .sk-hero-stimme { position: static !important; width: auto; }
@keyframes sk-wort { 0% { opacity: 0; transform: translateY(8px); } 3%, 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
	.sk-wechsel em { animation: none; } .sk-wechsel em:first-of-type { opacity: 1; }
	.sk-hero-stimme, .sk-hero-bild::before { animation: none; }
}

/* ===== Energieflussstern (Beispieldaten) ===== */
.sk-energiefluss .sk-kicker { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--wp--preset--color--sonne-hell); }
.sk-stern { margin: 0 auto; max-width: 460px; }
.sk-stern svg { width: 100%; height: auto; display: block; overflow: visible; }
.sk-stern .fl { fill: none; stroke: #69c350; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 12; animation: sk-fliessen 1.1s linear infinite; }
.sk-stern .fl-sonne { stroke: var(--wp--preset--color--sonne); }
.sk-stern .kn { fill: #262626; stroke-width: 3; }
.sk-stern .kn-haus { fill: var(--wp--preset--color--sonne); stroke: none; }
.sk-stern .kn-sonne { stroke: var(--wp--preset--color--sonne); }
.sk-stern .kn-netz { stroke: #8a8a8a; }
.sk-stern .kn-speicher { stroke: #69c350; }
.sk-stern .kn-auto { stroke: #5ab4e6; }
.sk-stern .kn-klima { stroke: #9fd8f2; }
.sk-stern text { fill: #fff; font-family: var(--wp--preset--font-family--nunito-sans); }
.sk-stern .lb { font-size: 13px; font-weight: 600; opacity: .85; }
.sk-stern .wt { font-size: 17px; font-weight: 900; }
.sk-stern .kl { font-size: 11px; font-weight: 700; fill: #69c350; }
.sk-stern .kl-grau { fill: #b5b5b5; font-size: 10px; }
.sk-stern .kn-haus + .lb, .sk-stern .kn-haus + .lb + .wt { fill: #191919; }
.sk-stern .kn-haus + .lb + .wt { font-size: 22px; }
.sk-stern figcaption { text-align: center; font-size: .8rem; opacity: .6; margin-top: .4rem; }
@keyframes sk-fliessen { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .sk-stern .fl { animation: none; } }

/* Energiefluss als Tafel statt vollflächig dunkel */
.sk-energiefluss.has-anthrazit-background-color { background: var(--wp--preset--color--sand) !important; }
.sk-energiefluss > .wp-block-columns { background: radial-gradient(circle at 85% 15%, rgba(255,166,38,.22), transparent 45%), #1d1b19; border-radius: 28px; padding: clamp(1.75rem, 4vw, 3.5rem) !important; box-shadow: 0 24px 60px rgba(25,25,25,.18); }