/* Schoch & Friends: Bewegung an den roten Haupt-Knöpfen (a.ctaBtn.ctaBtnInverse und a.snf-knopf-ziel, JS setzt .snf-fx-knopf), Testlabor Dev 14.10.2026.
   Varianten über die Body-Klasse snf-knopf-<name>. Effekte laufen nur, solange der Knopf sichtbar ist (.snf-fx-an). */
.snf-knopf .snf-fx-knopf { position: relative; isolation: isolate; }
.snf-knopf .snf-fx-knopf::after { display: inline-block; }
.snf-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

/* 1 · Höhenlinien-Puls: feine Linien wandern vom Knopf weg und werden dabei unregelmäßig wie Höhenlinien */
.snf-knopf-hoehen .snf-fx i {
	position: absolute; inset: 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .6); opacity: 0;
}
.snf-knopf-hoehen .snf-fx-an .snf-fx i { animation: snf-hoehe 7s cubic-bezier(.2, .7, .2, 1) var(--snf-versatz, 0s) infinite; }
.snf-knopf-hoehen .snf-fx-an .snf-fx i:nth-child(2) { animation-delay: calc(var(--snf-versatz, 0s) + .5s); }
.snf-knopf-hoehen .snf-fx-an .snf-fx i:nth-child(3) { animation-delay: calc(var(--snf-versatz, 0s) + 1s); }
@keyframes snf-hoehe {
	0% { inset: 0; opacity: 0; border-radius: 12px; }
	3% { opacity: .75; }
	34% { inset: -20px -30px; opacity: 0; border-radius: 34px 22px 40px 18px / 24px 36px 20px 30px; }
	100% { inset: -20px -30px; opacity: 0; }
}

/* 2 · Schimmer: Glanz zieht alle paar Sekunden über die Fläche, Pfeil hüpft beim Darüberfahren */
.snf-knopf-schimmer .snf-fx { overflow: hidden; }
.snf-knopf-schimmer .snf-fx::before {
	content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 45%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .42) 50%, transparent 100%);
	transform: skewX(-20deg);
}
.snf-knopf-schimmer .snf-fx-an .snf-fx::before { animation: snf-glanz 5.5s ease-in-out var(--snf-versatz, 0s) infinite; }
@keyframes snf-glanz { 0% { left: -70%; } 16% { left: 135%; } 100% { left: 135%; } }
.snf-knopf-schimmer .snf-fx-knopf:hover::after { animation: snf-pfeil .6s ease-in-out 2; }
@keyframes snf-pfeil { 50% { translate: 5px 0; } }

/* 3 · Kuckucks-Stups: ab und zu ein kurzes Anklopfen, ein Lichtpunkt blitzt an der Pickstelle */
.snf-knopf-stups .snf-fx-an { animation: snf-stups 9s ease-in-out var(--snf-versatz, 0s) infinite; transform-origin: 50% 100%; }
.snf-knopf-stups .snf-fx::before {
	content: ""; position: absolute; top: -5px; right: 18%; width: 10px; height: 10px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); opacity: 0; scale: .2;
}
.snf-knopf-stups .snf-fx-an .snf-fx::before { animation: snf-pick 9s ease-out var(--snf-versatz, 0s) infinite; }
.snf-knopf-stups .snf-fx-an::after { animation: snf-pfeil-stups 9s ease-in-out var(--snf-versatz, 0s) infinite; }
@keyframes snf-stups {
	0%, 86%, 100% { rotate: 0deg; translate: 0 0; }
	88% { rotate: -2.5deg; translate: 0 -1px; }
	90% { rotate: 2deg; translate: 0 0; }
	92% { rotate: -1.4deg; }
	94% { rotate: .7deg; }
	96% { rotate: 0deg; }
}
@keyframes snf-pick { 0%, 87% { opacity: 0; scale: .2; } 88% { opacity: 1; scale: 1.6; } 93%, 100% { opacity: 0; scale: 2.4; } }
@keyframes snf-pfeil-stups { 0%, 89%, 100% { translate: 0 0; } 91% { translate: 6px 0; } 94% { translate: 0 0; } 96% { translate: 3px 0; } }
.snf-knopf-stups .snf-fx-knopf:hover { animation-play-state: paused; }

/* 4 · Magnet: Knopf neigt sich zur Maus, ein Lichtfleck folgt dem Zeiger (nur mit Maus) */
.snf-knopf-magnet .snf-fx-knopf { transition: translate .35s cubic-bezier(.2, .7, .2, 1), background-color .22s, color .22s; }
.snf-licht { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: none; }
.snf-knopf-magnet .snf-licht { display: block; }
.snf-licht::before {
	content: ""; position: absolute; inset: 0; opacity: var(--snf-nah, 0); transition: opacity .3s;
	background: radial-gradient(120px circle at var(--snf-mx, 50%) var(--snf-my, 50%), rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 70%);
}

/* 5 · Kombi (Daniel 14.10.2026): Höhenlinien-Puls; der Magnet in der Nähe ist seit 15.10.2026 aus (Daniel: „zu krass“). */
.snf-knopf-kombi .snf-fx i {
	position: absolute; inset: 0; border-radius: 12px; border: 1px solid var(--snf-ring, rgba(255, 255, 255, .6)); opacity: 0;
	transition: opacity .3s;
}
.snf-knopf-kombi .snf-fx-an:not(.snf-nah) .snf-fx i { animation: snf-hoehe 7s cubic-bezier(.2, .7, .2, 1) var(--snf-versatz, 0s) infinite; }
.snf-knopf-kombi .snf-fx-an:not(.snf-nah) .snf-fx i:nth-child(2) { animation-delay: calc(var(--snf-versatz, 0s) + .5s); }
.snf-knopf-kombi .snf-fx-an:not(.snf-nah) .snf-fx i:nth-child(3) { animation-delay: calc(var(--snf-versatz, 0s) + 1s); }
.snf-knopf-kombi .snf-fx-knopf { transition: translate .45s cubic-bezier(.2, .7, .2, 1), background-color .22s, color .22s; }
.snf-knopf-kombi .snf-fx-knopf.snf-nah { z-index: 30; }

/* Formular-Knopf (WS Form „Absenden“): rote Hausoptik statt Standard-Blau, ohne Bewegung (seit 15.10.2026) */
.snf-knopf .wsf-form .wsf-button.wsf-button-primary {
	background-color: rgb(139, 13, 20); border-color: rgb(139, 13, 20); color: #fff;
	font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .5px;
	height: auto; min-height: 60px; padding: 18px 26px; border-radius: 12px; margin-top: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(17, 17, 17, .18), 0 8px 16px -8px rgba(17, 17, 17, .45);
	transition: translate .35s cubic-bezier(.2, .7, .2, 1), background-color .22s;
}
.snf-knopf .wsf-form .wsf-button.wsf-button-primary:hover,
.snf-knopf .wsf-form .wsf-button.wsf-button-primary:focus-visible { background-color: rgb(112, 10, 16); border-color: rgb(112, 10, 16); }
.snf-knopf .wsf-form .wsf-button.wsf-button-primary::after { content: "→"; display: inline-block; margin-left: 10px; }

/* Nebenknöpfe als Textlinks mit Pfeil (Daniel 15.10.2026): Knöpfe, die nicht zum Kontakt führen, in Hero, Text-,
   Text-Medien-Blöcken und Leistungsteasern (Block 6). Bleiben Knöpfe: Agentur-Verzeichnis, Downloads und PDFs, Kopfzeile.
   Farbe: rot wie alle Textlinks (--linkColor); auf rotem und dunklem Grund weiß (JS setzt .snf-textlink-rot nur auf hellem Grund). */
.snf-knopf :is(.block-1-hero-full-screen, .block-3-text, .block-3a-text-einfach, .block-5-text-media, .block-5a-text-media-einfach, .block-6-teaser)
	a.ctaBtn:not([href$="#kontakt"]):not([href*="/kontakt"]):not([href$=".pdf"]):not([download]) {
	background: none !important; border-color: transparent !important; box-shadow: none !important;
	padding-left: 0; padding-right: 0; min-width: 0;
	color: var(--block-font-color, currentColor) !important;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color .2s, text-decoration-thickness .2s;
}
.snf-knopf :is(.block-1-hero-full-screen, .block-3-text, .block-3a-text-einfach, .block-5-text-media, .block-5a-text-media-einfach, .block-6-teaser)
	a.ctaBtn:not([href$="#kontakt"]):not([href*="/kontakt"]):not([href$=".pdf"]):not([download])::after {
	display: inline-block; transition: translate .25s cubic-bezier(.2, .7, .2, 1);
}
.snf-knopf :is(.block-1-hero-full-screen, .block-3-text, .block-3a-text-einfach, .block-5-text-media, .block-5a-text-media-einfach, .block-6-teaser)
	a.ctaBtn:not([href$="#kontakt"]):not([href*="/kontakt"]):not([href$=".pdf"]):not([download]):is(:hover, :focus-visible) {
	text-decoration-color: currentColor; text-decoration-thickness: 2px;
}
.snf-knopf :is(.block-1-hero-full-screen, .block-3-text, .block-3a-text-einfach, .block-5-text-media, .block-5a-text-media-einfach, .block-6-teaser)
	a.ctaBtn:not([href$="#kontakt"]):not([href*="/kontakt"]):not([href$=".pdf"]):not([download]):is(:hover, :focus-visible)::after {
	translate: 5px 0;
}

.snf-knopf :is(.block-1-hero-full-screen, .block-3-text, .block-3a-text-einfach, .block-5-text-media, .block-5a-text-media-einfach, .block-6-teaser)
	a.ctaBtn.snf-textlink-rot:not([href$="#kontakt"]):not([href*="/kontakt"]):not([href$=".pdf"]):not([download]) { color: var(--linkColor, #8b0d14) !important; }

/* Kopfzeilen-Knopf „Kontakt“ (Daniel 15.10.2026): Schimmer alle 12 Sekunden, Glanz rund eine Sekunde, sonst Ruhe */
.snf-knopf header a.ctaBtn { position: relative; overflow: hidden; isolation: isolate; }
/* Das Theme blendet ::before in der Kopfzeile aus (header.buttonStyle1 .ctaBtn::before { display: none }), daher display: block */
.snf-knopf header a.ctaBtn::before {
	display: block !important; content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 45%; pointer-events: none; z-index: 1;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
	transform: skewX(-20deg); animation: snf-kopf-glanz 12s ease-in-out 3s infinite;
}
@keyframes snf-kopf-glanz { 0% { left: -70%; } 8% { left: 135%; } 100% { left: 135%; } }

@media (prefers-reduced-motion: reduce) {
	.snf-fx, .snf-fx *, .snf-fx::before, .snf-fx-an, .snf-fx-an::after, .snf-knopf header a.ctaBtn::before { animation: none !important; }
	.snf-knopf-magnet .snf-fx-knopf, .snf-knopf-kombi .snf-fx-knopf, .snf-fx-formular { translate: none !important; }
}