/*
 * Bewegung. Alles hier läuft nur bei prefers-reduced-motion: no-preference.
 * Dauerschleifen (Wabennetz, Zoom des Kopfbilds) hält der Schalter „Bewegung anhalten“ an (WCAG 2.2.2).
 * Ohne JavaScript bleibt jeder Inhalt sichtbar: Einblenden beim Scrollen setzt die Klasse
 * .zeigen-bereit voraus, die erst das Skript an <html> hängt.
 */

/* Schalter im Kopfbereich */
.bewegung-schalter {
	position: absolute;
	right: max(var(--tl-rand-r), env(safe-area-inset-right, 0px));
	bottom: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(0, 7, 14, 0.55);
	color: #d7e0ea;
	font-size: 0.75rem;
	cursor: pointer;
}

.bewegung-schalter[hidden] {
	display: none;
}

.bewegung-schalter .icon {
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

.bewegung-schalter .icon--play {
	display: none;
	fill: currentColor;
}

.bewegung-aus .bewegung-schalter .icon--play {
	display: block;
}

.bewegung-aus .bewegung-schalter .icon--pause {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* ---------- Auftritt im Kopfbereich ---------- */
	.held__auftritt {
		animation: tl-auf 0.9s var(--tl-ease) both;
	}

	.held__auftritt--1 { animation-delay: 0.1s; }
	.held__auftritt--3 { animation-delay: 0.6s; }
	.held__auftritt--4 { animation-delay: 0.75s; }
	.held__auftritt--5 { animation-delay: 0.95s; }

	.held__zeile-innen {
		animation: tl-zeile 1s var(--tl-ease) both;
	}

	.held__zeile:nth-child(1) .held__zeile-innen { animation-delay: 0.18s; }
	.held__zeile:nth-child(2) .held__zeile-innen { animation-delay: 0.3s; }
	.held__zeile:nth-child(3) .held__zeile-innen { animation-delay: 0.42s; }

	.held__strich {
		animation: tl-strich 0.9s var(--tl-ease) 0.55s both;
	}

	/*
	 * Foto fährt ein und zoomt danach langsam, Bildschirme und Lichter darüber gehen mit. Eigene Eigenschaften
	 * translate und scale, damit sich beides nicht stört; transform bleibt frei für die Maus-Tiefe (main.js).
	 * Mindestens 2 % Zoom als Puffer, damit beim Verschieben keine Kante sichtbar wird.
	 */
	.held__bild-innen {
		transform-origin: 62% 58%;
		animation: tl-foto 1.6s var(--tl-ease) 0.2s both, tl-zoom 24s ease-in-out 1.8s infinite alternate both;
	}

	/* Dashboard auf dem Laptop baut sich auf, danach wechseln die Ereignisse (main.js) */
	.kopfbild-lebt .dash__balken i {
		transform-origin: bottom;
		animation: tl-balken 1s var(--tl-ease) both;
	}

	.dash__balken i:nth-child(1) { animation-delay: 1.4s; }
	.dash__balken i:nth-child(2) { animation-delay: 1.46s; }
	.dash__balken i:nth-child(3) { animation-delay: 1.52s; }
	.dash__balken i:nth-child(4) { animation-delay: 1.58s; }
	.dash__balken i:nth-child(5) { animation-delay: 1.64s; }
	.dash__balken i:nth-child(6) { animation-delay: 1.7s; }
	.dash__balken i:nth-child(7) { animation-delay: 1.76s; }

	.kopfbild-lebt .dash__kurve {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: tl-linie 1.8s ease 1.6s forwards;
	}

	.kopfbild-lebt .dash__kurve--hell {
		animation-delay: 1.9s;
	}

	.kopfbild-lebt .dash__flaeche {
		animation: tl-blende 1.2s ease 2.4s both;
	}

	.kopfbild-lebt .dash__funke {
		animation: tl-blende 1s ease 1.5s both;
	}

	.dash__liste li.ist-neu,
	.handy__liste li.ist-neu {
		animation: tl-neu 0.7s var(--tl-ease) both;
	}

	.dash__liste li.ist-neu b {
		animation: tl-blinken 1.4s ease 0.4s 2;
	}

	/* Push-Meldung auf dem Handy fährt ein und wieder aus */
	.kopfbild-lebt .handy__meldung {
		animation: tl-meldung 7s var(--tl-ease) 2.6s infinite both;
	}

	/* Lichter im Wabennetz: Knoten pulsieren versetzt, ein Lichtlauf zieht über die Linien */
	.held__knoten-licht {
		transform-box: fill-box;
		transform-origin: center;
		animation: tl-knoten 3.4s ease-in-out infinite;
	}

	.held__knoten-licht:nth-of-type(3n + 1) { animation-delay: -1.1s; }
	.held__knoten-licht:nth-of-type(3n + 2) { animation-delay: -2.3s; animation-duration: 4.2s; }
	.held__knoten-licht:nth-of-type(4n) { animation-duration: 2.8s; }

	.held__linien {
		-webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 42%, #000 50%, transparent 58%, transparent 100%);
		mask-image: linear-gradient(115deg, transparent 0%, transparent 42%, #000 50%, transparent 58%, transparent 100%);
		-webkit-mask-size: 300% 100%;
		mask-size: 300% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		animation: tl-lichtlauf 7s ease-in-out 2s infinite both;
	}

	/*
	 * Branchenseiten, einmal und kein Dauerlauf: Das Fahrzeug kommt aus dem Fluchtpunkt der Straße heran,
	 * erst langsam in der Ferne, dann schnell, und bremst. Die Scheinwerfer leuchten in der Ferne hell.
	 * Danach blendet die Umgebung ein.
	 */
	.seitenkopf--anfahrt .seitenkopf__fahrzeug {
		animation: tl-anfahrt 2.6s cubic-bezier(0.55, 0, 0.2, 1) 0.2s both;
	}

	.seitenkopf--anfahrt .seitenkopf__licht {
		animation: tl-scheinwerfer 3.2s ease-out 0.2s both;
	}

	.seitenkopf--anfahrt .seitenkopf__foto {
		animation: tl-umgebung 1.1s ease-out 2.3s both;
	}

	/*
	 * Bildschirme und Netz der Branchenseiten: je ein Ablauf von unter 5 s, danach steht der Endzustand
	 * (WCAG 2.2.2 verlangt erst ab 5 s einen Halt). Handwerk: Anfrage füllt sich, wird zum Angebotsentwurf.
	 */
	.schirm {
		animation: tl-schirm 0.9s var(--tl-ease) 0.1s both;
	}

	.sk__zeile {
		animation: tl-zeile 0.45s var(--tl-ease) both;
	}

	.sk__zeile:nth-child(1) { animation-delay: 0.5s; }
	.sk__zeile:nth-child(2) { animation-delay: 0.75s; }
	.sk__zeile:nth-child(3) { animation-delay: 1s; }
	.sk__zeile:nth-child(4) { animation-delay: 1.25s; }

	.sk__zeile .sk__haken {
		animation: tl-haken 0.4s var(--tl-ease) both;
	}

	.sk__zeile:nth-child(1) .sk__haken { animation-delay: 0.75s; }
	.sk__zeile:nth-child(2) .sk__haken { animation-delay: 1s; }
	.sk__zeile:nth-child(3) .sk__haken { animation-delay: 1.25s; }
	.sk__zeile:nth-child(4) .sk__haken { animation-delay: 1.5s; }

	.sk__fuss {
		animation: tl-zeile 0.45s var(--tl-ease) 1.7s both;
	}

	.sk--anfrage {
		animation: tl-zurueck 0.6s var(--tl-ease) 2.3s both;
	}

	.sk--angebot {
		animation: tl-karte 0.65s var(--tl-ease) 2.35s both;
	}

	.sk__posten i {
		animation: tl-balken-quer 0.5s var(--tl-ease) both;
	}

	.sk__posten li:nth-child(1) i { animation-delay: 2.8s; }
	.sk__posten li:nth-child(2) i { animation-delay: 2.95s; }
	.sk__posten li:nth-child(3) i { animation-delay: 3.1s; }

	.sk__knopf {
		animation: tl-knopf 0.7s ease-in-out 3.4s both;
	}

	.sk__hinweis {
		animation: tl-zeile 0.45s var(--tl-ease) 3.7s both;
	}

	/* Praxen: Termine füllen den Kalender, einer wird frei, Rückruf kommt herein */
	.kal__spalte {
		animation: tl-termin 0.4s var(--tl-ease) both;
	}

	.kal__spalte:nth-child(8) { animation-delay: 0.5s; }
	.kal__spalte:nth-child(9) { animation-delay: 0.62s; }
	.kal__spalte:nth-child(10) { animation-delay: 0.74s; }
	.kal__spalte:nth-child(11) { animation-delay: 0.86s; }
	.kal__spalte:nth-child(12) { animation-delay: 0.98s; }
	.kal__spalte:nth-child(14) { animation-delay: 1.1s; }
	.kal__spalte:nth-child(15) { animation-delay: 1.22s; }
	.kal__spalte:nth-child(16) { animation-delay: 1.34s; }
	.kal__spalte:nth-child(17) { animation-delay: 1.46s; }
	.kal__spalte:nth-child(18) { animation-delay: 1.58s; }

	/* Der frei gewordene Termin war vorher belegt: Abdeckung blendet aus */
	.kal__termin--wieder::before {
		content: "Kontrolle";
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		border-left: 0.25em solid #1a8fe0;
		border-radius: inherit;
		background: #e3f1fd;
		color: #0b4f8c;
		animation: tl-ausblenden 0.5s ease 2.3s both;
	}

	.kal__meldung {
		animation: tl-meldung-ein 0.6s var(--tl-ease) 2.8s both;
	}

	.kal__kopf .schirm__chip {
		animation: tl-zeile 0.45s var(--tl-ease) 3.4s both;
	}

	/* KMU: Programme erscheinen, werden verbunden, Daten wandern über die Mitte (Reihenfolge der Kinder im SVG:
	   Linien, sechs Programme, Mitte, drei Frachten) */
	.netz__mitte {
		animation: tl-wabe-plopp 0.6s var(--tl-ease) 0.1s both;
	}

	.netz__system {
		animation: tl-wabe-plopp 0.5s var(--tl-ease) both;
	}

	.netz__system:nth-child(2) { animation-delay: 0.3s; }
	.netz__system:nth-child(3) { animation-delay: 0.42s; }
	.netz__system:nth-child(4) { animation-delay: 0.54s; }
	.netz__system:nth-child(5) { animation-delay: 0.66s; }
	.netz__system:nth-child(6) { animation-delay: 0.78s; }
	.netz__system:nth-child(7) { animation-delay: 0.9s; }

	.netz__linie {
		animation: tl-linie-zeichnen 0.5s ease-out both;
	}

	.netz__linie:nth-child(1) { animation-delay: 1s; }
	.netz__linie:nth-child(2) { animation-delay: 1.08s; }
	.netz__linie:nth-child(3) { animation-delay: 1.16s; }
	.netz__linie:nth-child(4) { animation-delay: 1.24s; }
	.netz__linie:nth-child(5) { animation-delay: 1.32s; }
	.netz__linie:nth-child(6) { animation-delay: 1.4s; }

	.netz__fracht:nth-child(9) { animation: tl-fracht-1 1.3s ease-in-out 1.6s both; }
	.netz__fracht:nth-child(10) { animation: tl-fracht-2 1.3s ease-in-out 2.35s both; }
	.netz__fracht:nth-child(11) { animation: tl-fracht-3 1.3s ease-in-out 3.1s both; }

	/* Dauerschleifen */
	.waben__knoten {
		animation: tl-puls 3.2s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	.waben__knoten:nth-of-type(3n + 1) { animation-delay: -0.8s; }
	.waben__knoten:nth-of-type(3n + 2) { animation-delay: -1.9s; }
	.waben__knoten:nth-of-type(4n) { animation-duration: 4.1s; }

	.waben__lauf {
		animation: tl-lauf 6s linear infinite;
	}

	.waben__lauf:nth-of-type(2n) { animation-delay: -2s; animation-duration: 7.5s; }
	.waben__lauf:nth-of-type(3n) { animation-delay: -4.2s; animation-duration: 8.5s; }

	.bewegung-aus .waben__knoten,
	.bewegung-aus .waben__lauf {
		animation: none;
	}

	.bewegung-aus .held__bild-innen,
	.bewegung-aus .held__knoten-licht,
	.bewegung-aus .held__linien,
	.bewegung-aus .handy__meldung,
	.bewegung-aus .dash__liste li.ist-neu b {
		animation-play-state: paused;
	}

	.bewegung-aus .waben__lauf {
		opacity: 0;
	}

	/* ---------- Einblenden beim Scrollen ---------- */
	.zeigen-bereit [data-zeigen] {
		transition: opacity 0.8s var(--tl-ease), transform 0.8s var(--tl-ease);
	}

	.zeigen-bereit [data-zeigen]:not(.ist-sichtbar) {
		opacity: 0;
		transform: translateY(26px);
	}

	.zeigen-bereit .karte[data-zeigen]:nth-child(2) { transition-delay: 0.08s; }
	.zeigen-bereit .karte[data-zeigen]:nth-child(3) { transition-delay: 0.16s; }
	.zeigen-bereit .karte[data-zeigen]:nth-child(4) { transition-delay: 0.24s; }
	.zeigen-bereit .kennzahl[data-zeigen]:nth-child(2) { transition-delay: 0.1s; }
	.zeigen-bereit .kennzahl[data-zeigen]:nth-child(3) { transition-delay: 0.2s; }
	.zeigen-bereit .kennzahl[data-zeigen]:nth-child(4) { transition-delay: 0.3s; }

	/* Schritte: Nummern springen nacheinander auf, Pfeile ziehen sich */
	.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__nummer,
	.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__icon,
	.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__titel,
	.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__text {
		opacity: 0;
	}

	.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__pfeil {
		clip-path: inset(0 100% 0 0);
	}

	.schritte.ist-sichtbar .schritt__nummer {
		animation: tl-plopp 0.7s var(--tl-ease) both;
	}

	.schritte.ist-sichtbar .schritt__icon,
	.schritte.ist-sichtbar .schritt__titel,
	.schritte.ist-sichtbar .schritt__text {
		animation: tl-auf 0.8s var(--tl-ease) both;
	}

	.schritte.ist-sichtbar .schritt__pfeil {
		animation: tl-ziehen 0.7s var(--tl-ease) both;
	}

	.schritte.ist-sichtbar .schritt:nth-child(1) > * { animation-delay: 0.05s; }
	.schritte.ist-sichtbar .schritt:nth-child(1) .schritt__pfeil { animation-delay: 0.45s; }
	.schritte.ist-sichtbar .schritt:nth-child(2) > * { animation-delay: 0.55s; }
	.schritte.ist-sichtbar .schritt:nth-child(2) .schritt__pfeil { animation-delay: 0.95s; }
	.schritte.ist-sichtbar .schritt:nth-child(3) > * { animation-delay: 1.05s; }
	.schritte.ist-sichtbar .schritt:nth-child(3) .schritt__pfeil { animation-delay: 1.45s; }
	.schritte.ist-sichtbar .schritt:nth-child(4) > * { animation-delay: 1.55s; }

	.schritt:hover .schritt__nummer {
		background: var(--tl-blau);
		border-color: var(--tl-blau);
		transition: background-color 0.25s ease;
	}

	.schritt:hover .schritt__icon {
		transform: translateY(-3px);
		transition: transform 0.35s var(--tl-ease);
	}

	/* ---------- Kleine Bewegungen beim Überfahren ---------- */
	.merkmal .merkmal__icon {
		transition: transform 0.6s var(--tl-ease);
	}

	.merkmal:hover .icon--zahnrad {
		transform: rotate(90deg);
	}

	.merkmal:hover .icon--uhr .zeiger,
	.held__merkmale.ist-aktiv .icon--uhr .zeiger {
		transform-box: view-box;
		transform-origin: 12px 12px;
		animation: tl-zeiger 1.2s var(--tl-ease) both;
	}

	.merkmal:hover .icon--diagramm .pfeil {
		animation: tl-anstieg 0.8s var(--tl-ease) both;
	}

	.merkmal:hover .icon--haken-kreis .haken {
		stroke-dasharray: 16;
		animation: tl-haken 0.6s ease both;
	}

	.knopf--glanz:hover::after,
	.knopf--glanz:focus-visible::after {
		transform: translateX(120%);
		transition: transform 0.9s var(--tl-ease);
	}

	.karte:hover .illu__balken rect,
	.karte:focus-within .illu__balken rect {
		transform-box: fill-box;
		transform-origin: bottom;
		animation: tl-balken 0.7s var(--tl-ease) both;
	}

	.karte:hover .illu__balken rect:nth-child(2) { animation-delay: 0.05s; }
	.karte:hover .illu__balken rect:nth-child(3) { animation-delay: 0.1s; }
	.karte:hover .illu__balken rect:nth-child(4) { animation-delay: 0.15s; }
	.karte:hover .illu__balken rect:nth-child(5) { animation-delay: 0.2s; }

	.karte:hover .illu__kurve,
	.karte:focus-within .illu__kurve {
		stroke-dasharray: 1;
		animation: tl-linie-neu 0.9s ease both;
	}

	.karte:hover .illu__blasen rect,
	.karte:focus-within .illu__blasen rect {
		animation: tl-blase 0.5s var(--tl-ease) both;
		transform-box: fill-box;
		transform-origin: left center;
	}

	.karte:hover .illu__blasen rect:nth-child(2) { animation-delay: 0.12s; }
	.karte:hover .illu__blasen rect:nth-child(3) { animation-delay: 0.24s; }
	.karte:hover .illu__blasen rect:nth-child(4) { animation-delay: 0.36s; }
	.karte:hover .illu__blasen rect:nth-child(5) { animation-delay: 0.48s; }

	.karte:hover .illu__tippen circle {
		animation: tl-tippen 0.9s ease-in-out infinite;
	}

	.karte:hover .illu__tippen circle:nth-child(2) { animation-delay: 0.15s; }
	.karte:hover .illu__tippen circle:nth-child(3) { animation-delay: 0.3s; }

	.illu__pulse path {
		stroke-dasharray: 0.12 1;
		stroke-dashoffset: 1.12;
		opacity: 0;
	}

	.karte:hover .illu__pulse path,
	.karte:focus-within .illu__pulse path {
		opacity: 1;
		animation: tl-impuls 1.4s linear infinite;
	}

	.karte:hover .illu__pulse path:nth-child(2) { animation-delay: 0.45s; }
	.karte:hover .illu__pulse path:nth-child(3) { animation-delay: 0.9s; }

	.karte:hover .illu__stift {
		animation: tl-schreiben 1.6s ease-in-out infinite;
	}

	/* Dialoge */
	.ablauf-dialog[open] {
		animation: tl-dialog 0.45s var(--tl-ease) both;
	}

	.menue[open] .menue__flaeche {
		animation: tl-menue 0.45s var(--tl-ease) both;
	}

	/* Menüknopf: beim Öffnen werden die Striche zum Hexagon, beim Schließen zurück (main.js setzt .ist-zurueck) */
	.menue[open] .menue__zu .menue-zeichen__linie {
		animation: tl-striche-weg 0.3s var(--tl-ease) both;
	}

	.menue[open] .menue__zu .menue-zeichen__linie--2 { animation-delay: 0.05s; }
	.menue[open] .menue__zu .menue-zeichen__linie--3 { animation-delay: 0.1s; }

	.menue[open] .menue__zu .menue-zeichen__wabe {
		animation: tl-wabe-auf 0.6s var(--tl-ease) 0.1s both;
	}

	.kopf__menueknopf.ist-zurueck .menue-zeichen__wabe {
		animation: tl-wabe-zu 0.4s ease-in both;
	}

	.kopf__menueknopf.ist-zurueck .menue-zeichen__linie {
		animation: tl-striche-auf 0.35s var(--tl-ease) 0.2s both;
	}

	.kopf__menueknopf.ist-zurueck .menue-zeichen__linie--2 { animation-delay: 0.26s; }
	.kopf__menueknopf.ist-zurueck .menue-zeichen__linie--3 { animation-delay: 0.32s; }

	.folie.ist-aktiv .folie__ring {
		animation: tl-ring 4s ease-in-out infinite;
	}

	.folie.ist-aktiv .folie__icon {
		animation: tl-plopp 0.7s var(--tl-ease) both;
	}

	.folie.ist-aktiv .folie__text > * {
		animation: tl-auf 0.7s var(--tl-ease) both;
	}

	.folie.ist-aktiv .folie__titel { animation-delay: 0.08s; }
	.folie.ist-aktiv .folie__beschreibung { animation-delay: 0.16s; }

	.praesentation.laeuft .praesentation__punkt[aria-current="step"] .praesentation__fuellung {
		animation: tl-fuellen var(--tl-folie-dauer, 5s) linear both;
	}
}

@keyframes tl-auf {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

@keyframes tl-zeile {
	from { transform: translateY(105%); }
	to { transform: none; }
}

@keyframes tl-strich {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes tl-foto {
	from { opacity: 0; translate: 48px 18px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes tl-blende {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes tl-neu {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

@keyframes tl-blinken {
	50% { background: #1a8fe0; color: #ffffff; }
}

@keyframes tl-meldung {
	0%, 6% { opacity: 0; transform: translateY(8px); }
	12%, 52% { opacity: 1; transform: none; }
	60%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes tl-knoten {
	0%, 100% { opacity: 0.25; transform: scale(0.75); }
	50% { opacity: 0.95; transform: scale(1.25); }
}

@keyframes tl-lichtlauf {
	0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	70%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

@keyframes tl-anfahrt {
	from { scale: 0.16; opacity: 0; filter: brightness(0.5) blur(1.5px); }
	12% { opacity: 1; }
	75% { filter: brightness(0.95) blur(0); }
	to { scale: 1; opacity: 1; filter: none; }
}

@keyframes tl-scheinwerfer {
	0% { scale: 1.8; opacity: 1; }
	70% { scale: 1.1; opacity: 1; }
	80% { scale: 1.35; opacity: 1; }
	100% { scale: 1; opacity: 0.4; }
}

@keyframes tl-umgebung {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes tl-schirm {
	from { opacity: 0; translate: 0 24px; scale: 0.96; }
	to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes tl-zeile {
	from { opacity: 0; translate: -0.8em 0; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes tl-haken {
	from { opacity: 0; scale: 0.3; }
	70% { opacity: 1; scale: 1.2; }
	to { opacity: 1; scale: 1; }
}

@keyframes tl-zurueck {
	from { opacity: 1; scale: 1; translate: 0 0; }
	to { opacity: 0.7; scale: 0.97; translate: 0 -2%; }
}

@keyframes tl-karte {
	from { opacity: 0; translate: 0 40%; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes tl-balken-quer {
	from { scale: 0 1; }
	to { scale: 1 1; }
}

@keyframes tl-knopf {
	0%, 100% { scale: 1; box-shadow: 0 0 0 0 rgba(0, 167, 254, 0); }
	50% { scale: 1.06; box-shadow: 0 0 0 0.5em rgba(0, 167, 254, 0.25); }
}

@keyframes tl-termin {
	from { opacity: 0; scale: 0.85; }
	to { opacity: 1; scale: 1; }
}

@keyframes tl-ausblenden {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes tl-meldung-ein {
	from { opacity: 0; translate: 120% 0; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes tl-wabe-plopp {
	from { opacity: 0; scale: 0.55; }
	to { opacity: 1; scale: 1; }
}

@keyframes tl-linie-zeichnen {
	from { stroke-dashoffset: 50; }
	to { stroke-dashoffset: 0; }
}

/* Daten von einem Programm über die Mitte ins gegenüberliegende (Lage wie in template-parts/branchen/kmu-dienstleister.php) */
@keyframes tl-fracht-1 {
	from { opacity: 0; translate: 100px 180px; }
	12% { opacity: 1; }
	50% { translate: 240px 180px; }
	88% { opacity: 1; }
	to { opacity: 0; translate: 380px 180px; }
}

@keyframes tl-fracht-2 {
	from { opacity: 0; translate: 170px 58.8px; }
	12% { opacity: 1; }
	50% { translate: 240px 180px; }
	88% { opacity: 1; }
	to { opacity: 0; translate: 310px 58.8px; }
}

@keyframes tl-fracht-3 {
	from { opacity: 0; translate: 170px 301.2px; }
	12% { opacity: 1; }
	50% { translate: 240px 180px; }
	88% { opacity: 1; }
	to { opacity: 0; translate: 310px 301.2px; }
}

@keyframes tl-zoom {
	from { scale: 1.02; }
	to { scale: 1.06; }
}

@keyframes tl-balken {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes tl-linie {
	to { stroke-dashoffset: 0; }
}

@keyframes tl-linie-neu {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes tl-puls {
	0%, 100% { opacity: 0.55; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.35); }
}

@keyframes tl-lauf {
	0% { opacity: 0; stroke-dashoffset: 360; }
	10% { opacity: 0.9; }
	60% { opacity: 0.9; }
	75%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes tl-plopp {
	0% { opacity: 0; transform: scale(0.4); }
	70% { opacity: 1; transform: scale(1.08); }
	100% { opacity: 1; transform: none; }
}

@keyframes tl-ziehen {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes tl-zeiger {
	from { transform: rotate(-360deg); }
	to { transform: rotate(0); }
}

@keyframes tl-anstieg {
	0% { transform: translate(-2px, 2px); opacity: 0.4; }
	100% { transform: none; opacity: 1; }
}

@keyframes tl-haken {
	from { stroke-dashoffset: 16; }
	to { stroke-dashoffset: 0; }
}

@keyframes tl-blase {
	from { opacity: 0; transform: scaleX(0.3); }
	to { opacity: 1; transform: none; }
}

@keyframes tl-tippen {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

@keyframes tl-impuls {
	from { stroke-dashoffset: 1.12; }
	to { stroke-dashoffset: 0; }
}

@keyframes tl-schreiben {
	0%, 100% { transform: translate(0, 0); }
	30% { transform: translate(-6px, 4px); }
	60% { transform: translate(4px, 2px); }
}

@keyframes tl-dialog {
	from { opacity: 0; transform: translateY(24px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@keyframes tl-menue {
	from { transform: translateX(100%); }
	to { transform: none; }
}

@keyframes tl-striche-weg {
	from { opacity: 1; scale: 1 1; }
	to { opacity: 0; scale: 0 1; }
}

@keyframes tl-striche-auf {
	from { opacity: 0; scale: 0 1; }
	to { opacity: 1; scale: 1 1; }
}

@keyframes tl-wabe-auf {
	from { opacity: 0; stroke-dashoffset: 64; rotate: -60deg; }
	15% { opacity: 1; }
	to { opacity: 1; stroke-dashoffset: 0; rotate: 0deg; }
}

@keyframes tl-wabe-zu {
	from { opacity: 1; stroke-dashoffset: 0; rotate: 0deg; }
	85% { opacity: 1; }
	to { opacity: 0; stroke-dashoffset: -64; rotate: 60deg; }
}

@keyframes tl-ring {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50% { transform: scale(1.05); opacity: 1; }
}

@keyframes tl-fuellen {
	from { transform: translateY(-50%) scaleX(0); }
	to { transform: translateY(-50%) scaleX(1); }
}