/* ==========================================================================
   Immenverein Stil-Vorlage „Schwarm" v2 – jung, frisch, dynamisch
   Eigene Farbwelt (helles Weiß + sattes Bienengelb + Verlaufs-Akzente) und
   eigene Schrift (Bricolage Grotesque, lokal gebündelt – DSGVO-sicher).
   Wird zusätzlich zum Theme geladen (body.iv-stil-modern).
   ========================================================================== */

@font-face {
	font-family: "Bricolage Grotesque";
	font-weight: 600; font-style: normal; font-display: swap;
	src: url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-weight: 700; font-style: normal; font-display: swap;
	src: url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-weight: 800; font-style: normal; font-display: swap;
	src: url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");
}

/* ---------- Frische Farbwelt (ersetzt Creme/Honig-Töne) ---------- */

body.iv-stil-modern {
	--wp--preset--color--cream: #FFFFFF;
	--wp--preset--color--cream-deep: #F5F3EC;
	--wp--preset--color--honey: #FFB300;
	--wp--preset--color--honey-soft: #FFD34D;
	--wp--preset--color--honey-deep: #B26B00;
	--wp--preset--color--ink: #14120F;
	--wp--preset--color--ink-soft: #57503F;
	--iv-coral: #FF7A59;
	--iv-lemon: #FFE14D;
	--iv-mint: #9BE15D;
	background: #FFFFFF;
}

/* ---------- Typografie: markant statt Serifen ---------- */

body.iv-stil-modern h1, body.iv-stil-modern h2, body.iv-stil-modern h3,
body.iv-stil-modern h4, body.iv-stil-modern .wp-block-site-title,
body.iv-stil-modern .iv-stat-n, body.iv-stil-modern .iv-price,
body.iv-stil-modern .iv-treffen-datum .iv-d, body.iv-stil-modern .iv-hc-date .iv-d,
body.iv-stil-modern .iv-avatar {
	font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important;
}
body.iv-stil-modern h1 {
	font-size: clamp(48px, 7.4vw, 92px) !important;
	line-height: .98; letter-spacing: -0.03em; font-weight: 800;
}
body.iv-stil-modern h2 { font-weight: 800; letter-spacing: -0.02em; }
body.iv-stil-modern h1 em {
	font-style: normal;
	background: linear-gradient(100deg, var(--iv-coral), var(--wp--preset--color--honey) 45%, var(--iv-lemon));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Überschriften bekommen beim Einblenden einen wachsenden Farbstrich */
body.iv-stil-modern h2.iv-reveal { position: relative; padding-bottom: 14px; }
body.iv-stil-modern h2.iv-reveal::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 92px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--honey), var(--iv-coral));
	transform: scaleX(0); transform-origin: left;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1) .25s;
}
body.iv-stil-modern h2.iv-reveal.iv-in::after { transform: scaleX(1); }

/* Eyebrows: ruhiges Sechseck statt Strich – mit sitzender Biene (setzt das JS) */
body.iv-stil-modern .iv-eyebrow { color: var(--wp--preset--color--honey-deep); position: relative; }
body.iv-stil-modern .iv-eyebrow::before {
	width: 14px; height: 16px; background: var(--wp--preset--color--honey);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	border-radius: 0;
}

/* Die sitzende Biene: ruht auf der Wabe, fliegt bei Mauskontakt davon
   und landet nach ein paar Sekunden wieder. */
.iv-sitzbiene {
	position: absolute; left: -3px; top: -15px; width: 21px; height: 17px;
	pointer-events: none;
}
.iv-sitzbiene svg { width: 100%; height: 100%; display: block; }
.iv-sitzbiene.iv-fliegt { animation: iv-wegflug 1.5s ease-in forwards; }
@keyframes iv-wegflug {
	0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
	25%  { transform: translate(14px, -18px) rotate(-16deg); }
	55%  { transform: translate(52px, -40px) rotate(8deg); }
	100% { transform: translate(170px, -130px) rotate(14deg); opacity: 0; }
}
.iv-sitzbiene.iv-landet { animation: iv-anflug 1.1s ease-out forwards; }
@keyframes iv-anflug {
	0%   { transform: translate(90px, -80px) rotate(10deg); opacity: 0; }
	60%  { transform: translate(8px, -12px) rotate(-8deg); opacity: 1; }
	100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

/* ---------- Hero: Mesh-Verlauf, fliegende Biene, Scroll-Pfeil ---------- */

body.iv-stil-modern .iv-hero,
body.iv-stil-modern .has-hero-gradient-background {
	position: relative; overflow: hidden;
	background:
		radial-gradient(760px 460px at 88% -12%, color-mix(in srgb, var(--iv-lemon) 60%, transparent), transparent 60%),
		radial-gradient(640px 420px at -8% 30%, color-mix(in srgb, var(--iv-coral) 26%, transparent), transparent 62%),
		radial-gradient(700px 460px at 55% 118%, color-mix(in srgb, var(--iv-mint) 26%, transparent), transparent 60%),
		#FFFFFF !important;
	background-size: 150% 150%, 150% 150%, 150% 150%, auto;
	animation: iv-hero-drift 14s ease-in-out infinite alternate;
}
@keyframes iv-hero-drift {
	0%   { background-position: 0% 0%, 100% 100%, 50% 100%, 0 0; }
	100% { background-position: 55% 45%, 45% 55%, 25% 65%, 0 0; }
}
body.iv-stil-modern .iv-hero-badge {
	background: rgba(255, 255, 255, .6); backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); border: 1px solid rgba(20, 18, 15, .08);
}
body.iv-stil-modern .iv-hero-treffen {
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .85);
}

/* Deko (setzt das JS ein) */
.iv-deko { position: absolute; z-index: 0; pointer-events: none; }
.iv-deko-biene { width: 60px; animation: iv-flug 8s ease-in-out infinite alternate; }
.iv-deko-biene-2 { width: 42px; animation-duration: 6.5s; animation-delay: 1.2s; }
.iv-deko-wabe { width: 320px; opacity: .3; animation: iv-schweben 12s ease-in-out infinite alternate; }
@keyframes iv-flug { 0% { transform: translate(0,0) rotate(-6deg); } 50% { transform: translate(26px,-30px) rotate(5deg); } 100% { transform: translate(-14px,-8deg) rotate(-3deg); } }
@keyframes iv-schweben { from { transform: translateY(0); } to { transform: translateY(-26px) rotate(3deg); } }

/* Eine Biene fliegt regelmäßig quer durchs Bild */
.iv-deko-flugbiene {
	position: absolute; top: 22%; left: -90px; width: 54px; z-index: 1;
	animation: iv-querflug 15s linear infinite;
}
@keyframes iv-querflug {
	0%   { transform: translate(0, 0) rotate(8deg); }
	12%  { transform: translate(24vw, -46px) rotate(-6deg); }
	24%  { transform: translate(48vw, 14px) rotate(9deg); }
	36%  { transform: translate(76vw, -38px) rotate(-5deg); }
	48%  { transform: translate(110vw, -10px) rotate(6deg); }
	48.01%, 100% { transform: translate(110vw, -9999px); }
}

/* Scroll-Pfeil unten im Hero */
.iv-scrollhin {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	width: 40px; height: 40px; border-radius: 50%; z-index: 2;
	display: grid; place-items: center; text-decoration: none;
	background: var(--wp--preset--color--ink); color: #fff; font-size: 18px;
	animation: iv-huepf 1.8s ease-in-out infinite;
}
@keyframes iv-huepf { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
@media (max-width: 920px) { .iv-deko, .iv-deko-flugbiene, .iv-scrollhin { display: none; } }

/* ---------- Lauf-Band mit Icons (setzt das JS ein) ---------- */

.iv-marquee {
	overflow: hidden; white-space: nowrap; padding: 16px 0;
	background: var(--wp--preset--color--ink);
	border-top: 3px solid var(--wp--preset--color--honey);
	border-bottom: 3px solid var(--wp--preset--color--honey);
}
.iv-marquee-spur { display: inline-flex; gap: 44px; padding-right: 44px; animation: iv-band 26s linear infinite; will-change: transform; }
.iv-marquee:hover .iv-marquee-spur { animation-play-state: paused; }
@keyframes iv-band { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.iv-marquee span {
	display: inline-flex; align-items: center; gap: 12px;
	color: #fff; font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 700; font-size: 19px; letter-spacing: .01em;
}
.iv-marquee .iv-ic { width: 24px; height: 24px; color: var(--wp--preset--color--honey-soft); }

/* ---------- Icons: überall lebendig ---------- */

.iv-ic { display: inline-block; vertical-align: -0.18em; width: 1.15em; height: 1.15em; flex: none; }
body.iv-stil-modern .iv-hc-row .iv-ic,
body.iv-stil-modern .iv-treffen-details .iv-ic { color: var(--wp--preset--color--honey-deep); }
body.iv-stil-modern .iv-hc-row:hover .iv-ic,
body.iv-stil-modern a:hover > .iv-ic { animation: iv-wackel .5s ease-in-out; }
@keyframes iv-wackel { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.15); } 65% { transform: rotate(9deg); } }

/* Häkchenliste: gelbe Sechsecke statt grüner Kreise */
body.iv-stil-modern ul.iv-check-list li::before {
	background: var(--wp--preset--color--honey); color: var(--wp--preset--color--ink);
	border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	width: 26px; height: 28px; font-size: 12px;
}

/* ---------- Buttons: Verlauf + Lichtstreif ---------- */

body.iv-stil-modern .wp-block-button__link,
body.iv-stil-modern .iv-submit,
body.iv-stil-modern .nav-cta > a {
	position: relative; overflow: hidden;
	background: linear-gradient(115deg, var(--iv-lemon), var(--wp--preset--color--honey) 55%, #F09000);
	color: var(--wp--preset--color--ink); font-weight: 700;
	transition: transform .18s ease, box-shadow .18s ease;
}
body.iv-stil-modern .wp-block-button__link::after,
body.iv-stil-modern .iv-submit::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: skewX(-18deg); transition: left .5s ease;
}
body.iv-stil-modern .wp-block-button__link:hover::after,
body.iv-stil-modern .iv-submit:hover::after { left: 125%; }
body.iv-stil-modern .wp-block-button__link:hover,
body.iv-stil-modern .iv-submit:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 18px 36px -12px rgba(240, 144, 0, .55);
}
body.iv-stil-modern .iv-btn-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 2px solid rgba(20, 18, 15, .2); }

/* ---------- Karten & Kacheln ---------- */

body.iv-stil-modern .iv-card, body.iv-stil-modern .iv-treffen,
body.iv-stil-modern .iv-vorstand-card, body.iv-stil-modern .iv-form {
	border-radius: 22px;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}
body.iv-stil-modern .iv-treffen:hover, body.iv-stil-modern .iv-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 60px -18px rgba(20, 18, 15, .28);
}
/* Hinweis: bewusst KEINE Dauer-Pulse mehr – wirkte nervös. */

/* Vorstand: Foto mit Farbring, lebendiger Hover */
body.iv-stil-modern .iv-vorstand-card:hover { transform: translateY(-8px) rotate(-.6deg); }
body.iv-stil-modern .iv-vorstand-card .iv-avatar {
	width: 96px; height: 96px;
	box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--wp--preset--color--honey), 0 14px 30px -12px rgba(20, 18, 15, .35);
	transition: transform .3s ease, box-shadow .3s ease;
}
body.iv-stil-modern .iv-vorstand-card:hover .iv-avatar {
	transform: scale(1.07) rotate(3deg);
	box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--iv-coral), 0 18px 36px -12px rgba(20, 18, 15, .4);
}
body.iv-stil-modern .iv-vorstand-card .iv-role { color: var(--wp--preset--color--honey-deep); }

/* ---------- Kennzahlen ---------- */

body.iv-stil-modern .iv-stat-n {
	font-size: clamp(46px, 5.4vw, 72px); font-weight: 800;
	background: linear-gradient(115deg, var(--iv-lemon), var(--wp--preset--color--honey));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Galerie & Karte ---------- */

body.iv-stil-modern .iv-g-item { border-radius: 18px; }
body.iv-stil-modern a.iv-g-item:hover img { transform: scale(1.07) rotate(.6deg); }
body.iv-stil-modern .iv-map-wrap { border-radius: 24px; }

/* ---------- Scroll-Reveal + Header ---------- */

body.iv-stil-modern .iv-reveal {
	opacity: 0; transform: translateY(30px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--iv-delay, 0s);
}
body.iv-stil-modern .iv-reveal.iv-in { opacity: 1; transform: none; }

body.iv-stil-modern .iv-header { background: rgba(255, 255, 255, .82); transition: box-shadow .25s ease, background .25s ease; }
body.iv-stil-modern .iv-header.iv-gescrollt { background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px -18px rgba(20, 18, 15, .3); }

/* ---------- Ruhe bei Systemeinstellung „Bewegung reduzieren" ---------- */

/* „Bewegung reduzieren" respektieren – außer body.iv-anim-immer
   (Einstellung „Animationen immer anzeigen" im Design-Reiter). */
@media (prefers-reduced-motion: reduce) {
	body.iv-stil-modern:not(.iv-anim-immer) .iv-hero,
	body.iv-stil-modern:not(.iv-anim-immer) .has-hero-gradient-background { animation: none; }
	body:not(.iv-anim-immer) .iv-deko,
	body:not(.iv-anim-immer) .iv-deko-flugbiene,
	body:not(.iv-anim-immer) .iv-scrollhin,
	body:not(.iv-anim-immer) .iv-marquee { display: none; }
	body.iv-stil-modern:not(.iv-anim-immer) .iv-reveal { opacity: 1; transform: none; transition: none; }
	body.iv-stil-modern:not(.iv-anim-immer) *,
	body.iv-stil-modern:not(.iv-anim-immer) *::before,
	body.iv-stil-modern:not(.iv-anim-immer) *::after {
		transition-duration: .01ms !important; animation-duration: .01ms !important;
	}
}

/* Barrierefrei-Modus: alle Extras aus (zusätzlich zu a11y.css) */
body.iv-a11y .iv-deko, body.iv-a11y .iv-deko-flugbiene,
body.iv-a11y .iv-scrollhin, body.iv-a11y .iv-marquee { display: none !important; }
body.iv-a11y.iv-stil-modern .iv-reveal { opacity: 1 !important; transform: none !important; }
body.iv-a11y.iv-stil-modern h1 em, body.iv-a11y.iv-stil-modern .iv-stat-n {
	background: none; -webkit-background-clip: initial; background-clip: initial;
	color: var(--wp--preset--color--ink);
}