/*
 * Header-Entwurf ?entwurf=header (Alex 08.11.2026: "menü: wir bauen den header etwas um. wir tauschen die position. der
 * menü button kommt nach rechts. der button boatmodels kommt nach links. dann übernehmen wir das menü aus deinem vorschalg
 * ide 4. bitte erhöhe den abstand zum rand und baue einem kreative animation von burger menü button zur karte. bitte mache
 * aber eine entwurfsseite."). Gilt nur mit der Klasse waka-header-entwurf am body (waka-skripte.php), Ablauf der Karte in
 * header-entwurf.min.js (Quelle website/skripte/header-entwurf.js).
 * Drei Fassungen des Headers (Vorlage 14): feste Leiste der Unterseiten d3d6b65, großer Kopf der Startseite 29978f8 und
 * ihre Leiste ab 60 px 311b659. Je drei Spalten: Menüknopf, Schriftzug oder Logo, BOAT MODELS (am Handy ausgeblendet).
 */

/* Menüknopf rechts, BOAT MODELS links */
body.waka-header-entwurf .elementor-location-header :is(.elementor-element-d3d6b65, .elementor-element-29978f8, .elementor-element-311b659) {
	flex-direction: row-reverse;
}
/* Abstand zum Rand wie die Inhalte der Seiten: ab Tablet 50 px vom Fensterrand (10 Rahmen und 40), am Handy 30 wie bisher */
@media (min-width: 768px) {
	body.waka-header-entwurf .elementor-location-header :is(.elementor-element-d3d6b65, .elementor-element-29978f8, .elementor-element-311b659) {
		--padding-left: 40px;
		--padding-right: 40px;
	}
}
body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-957d14c, .elementor-element-c66a664, .elementor-element-b363c9e) {
	align-self: flex-end;
}
body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-54b256d, .elementor-element-87483cd, .elementor-element-7b3476f) {
	align-self: flex-start;
}
/* Ab Tablet (Alex 08.11.2026 abends: "bitte bringe im header den button boat modells wieder nach rechts mit einem dem
   seitenverhältnis angepassten abstend. für links benötige ich eine idee? seiten titel?"): die drei Spalten als Raster
   gleicher Breite wie vorher, Schriftzug oder Logo bleibt genau in der Mitte. BOAT MODELS steht rechts vor dem Menüknopf
   (40 px breit), der Abstand wächst mit der Fensterbreite: 20 px bei 768, 30 px ab 1152, im goldenen Schnitt zum
   Randabstand von 50 px. Bei 768 passt BOAT MODELS so neben Knopf und Schriftzug, ohne umzubrechen. Links die Rubrik der
   Seite (.waka-rubrik, angelegt von header-entwurf.min.js) */
@media (min-width: 768px) {
	body.waka-header-entwurf .elementor-location-header :is(.elementor-element-d3d6b65, .elementor-element-29978f8, .elementor-element-311b659) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	body.waka-header-entwurf .elementor-location-header :is(.elementor-element-d3d6b65, .elementor-element-29978f8, .elementor-element-311b659) > .e-con {
		grid-row: 1;
		width: auto !important;
		max-width: none;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-a7197c5, .elementor-element-8d3e369, .elementor-element-29ee3f4) {
		grid-column: 3;
		justify-self: end;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-d8d3417, .elementor-element-d5a5a57, .elementor-element-898353e) {
		grid-column: 2;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-215b963, .elementor-element-4b82bd9, .elementor-element-4ac795f) {
		grid-column: 3;
		justify-self: end;
		width: max-content !important;
		margin-right: calc(40px + clamp(20px, 2.604vw, 30px));
	}
}
/* Schriftzug links statt in der Mitte (Alex 09.11.2026: "ich habe eine lösung für links oben. bitte rutsche den text im
   header WAKA KAYAKS welcher mittig steht nach links. bei der startseite müsste er dann weiss sein. das signe in der mitte
   bei der startseite bleibt."). In den Leisten wandert die mittlere Spalte nach links. Im großen Kopf der Startseite
   bleibt das Zeichen in der Mitte, der weiße Schriftzug daneben (bisher nur am Handy zu sehen) steht links, die Mitte
   seiner Versalien auf der von BOAT MODELS und Menüknopf (49,5 px, Zeile 26 px ab 37 px). Am Handy steht er schon links */
@media (min-width: 768px) {
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-d8d3417, .elementor-element-898353e) {
		grid-column: 1;
		justify-self: start;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element.elementor-element-d5a5a57 {
		display: contents;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element.elementor-element-551d00d {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element.elementor-element-87e5278 {
		display: block !important;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		margin: 7px 0 0 !important;
	}
}
/* Spruch links, je Seite ein eigener (Alex 08.11.2026: "links im header einen coolen text, der der sprache entspricht",
   davor die Rubrik der Seite): Schrift von BOAT MODELS, etwas größer, schwarz wie Schriftzug und Menüknopf, auf dem Video der Startseite weiß wie dort der
   Menüknopf. Am Handy steht links der Schriftzug, der Spruch fällt weg. Die Regeln für a.waka-rubrik (Link mit Unterlinie
   der Textlinks) stammen aus der Rubrik und bleiben für den Fall, dass er wieder verlinkt */
.waka-rubrik {
	display: none;
}
@media (min-width: 768px) {
	body.waka-header-entwurf .elementor-location-header .waka-rubrik {
		display: block;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		/* in den Leisten 1 px tiefer: Mitte der Versalien auf der von Schriftzug, BOAT MODELS und Menüknopf (34,5 px) */
		position: relative;
		top: 1px;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-bottom: 2px;
		/* 16 statt 14 px wie BOAT MODELS (Alex 08.11.2026 abends: "typo oben links etwas grösser"), dann 700 statt 500
		   ("kannst du den seitentitel bitte etwas kräftiger mache"), dann 22 px und 400 (Alex 08.11.2026 23:22: "den titel
		   links oben bitte auf 22px nd 400 stellen"), Stärke gleich danach 600 ("font header bitte auf 600"). Mitte der
		   Versalien weiter auf 34,5 px wie der Schriftzug */
		font: 600 22px/26px "DM Sans", sans-serif;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #000;
	}
}
/* iPad hochkant bis 819 px: 19 px, sonst würde der längste Spruch (CARNAGE COVERED) gekürzt und rückte bis 13 px an den
   Schriftzug, so bleiben mindestens 42 px. Ein halbes Pixel tiefer hält die Mitte der Versalien auf 34,5 px */
@media (min-width: 768px) and (max-width: 819px) {
	body.waka-header-entwurf .elementor-location-header .waka-rubrik {
		font-size: 19px;
		top: 1.5px;
	}
}
/* Ideen für oben links, nur mit ?entwurf=links1 oder links2 (Alex 09.11.2026: "hast du noch eine idee für oben links? ich
   bin mit dem titel nicht ganz sicher."). links1: Uhrzeit in Okere Falls, die Zeit leichter (400) und mit gleich breiten
   Ziffern, damit nichts springt. links2: kleine Zeile unter dem Spruch wie die Kategorie der Kacheln (11 px, 500,
   Versalien, Sperrung .12em, #777), blendet beim Überfahren ein und gleitet 4 px herunter */
.waka-glosse {
	display: none;
}
@media (min-width: 768px) {
	body.waka-header-entwurf .elementor-location-header .waka-rubrik .waka-zeit {
		font-weight: 400;
		font-variant-numeric: tabular-nums;
	}
	body.waka-header-entwurf .elementor-location-header .waka-glosse {
		display: block;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		position: relative;
		/* ganz in der Leiste (endet bei 60 px), Versalien 6 px unter der Grundlinie des Spruchs */
		top: 17px;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font: 500 11px/14px "DM Sans", sans-serif;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: #777;
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity var(--waka-dauer) var(--waka-kurve), transform var(--waka-dauer) var(--waka-kurve);
		pointer-events: none;
	}
	body.waka-header-entwurf .elementor-location-header .waka-rubrik:hover + .waka-glosse {
		opacity: 1;
		transform: none;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element-29978f8 > .waka-glosse {
		align-self: start;
		top: 0;
		margin-top: 30px;
		color: rgba(255, 255, 255, .75);
	}
}
/* ohne Maus kein Überfahren, also keine Zeile */
@media (hover: none) {
	body.waka-header-entwurf .elementor-location-header .waka-glosse {
		display: none;
	}
}
@media (min-width: 768px) {
	body.waka-header-entwurf .elementor-location-header a.waka-rubrik {
		text-decoration: none;
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-size: 0% 1px;
		background-position: 100% 100%;
		transition: background-size var(--waka-dauer) var(--waka-kurve);
	}
	body.waka-header-entwurf .elementor-location-header a.waka-rubrik:is(:hover, :focus-visible) {
		background-size: 100% 1px;
		background-position: 0 100%;
	}
	/* großer Kopf der Startseite: Spalten oben bündig, Mitte der Menüknopf-Linien bei 20 px unter seiner Oberkante. Spruch
	   und BOAT MODELS auf diese Mitte (BOAT MODELS stand 8 px tiefer, neben dem Knopf fiele das auf) */
	body.waka-header-entwurf .elementor-location-header .elementor-element-29978f8 > .waka-rubrik {
		align-self: start;
		top: 0;
		/* 7 px bei 22/26 px (10 px bei 16/20 px): Mitte der Versalien 49,5 px wie BOAT MODELS und Menüknopf */
		margin-top: 7px;
		color: #fff;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element.elementor-element-87483cd {
		position: relative;
		top: -8px;
	}
}
/* Menüknopf in den Leisten 2 px tiefer: Mitte seiner Linien auf der Mitte von BOAT MODELS und Schriftzug (gemessen 32,5
   gegen 34,5 und 34 px) */
body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-957d14c, .elementor-element-b363c9e) {
	position: relative;
	top: 2px;
}
/* Handy: Schriftzug links statt rechts */
@media (max-width: 767px) {
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-d8d3417, .elementor-element-d5a5a57, .elementor-element-898353e) {
		align-items: flex-start;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-477f02f, .elementor-element-87e5278, .elementor-element-b670754),
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-477f02f, .elementor-element-87e5278, .elementor-element-b670754) .elementor-heading-title {
		text-align: start;
	}
	body.waka-header-entwurf .elementor-location-header .elementor-element:is(.elementor-element-477f02f, .elementor-element-87e5278, .elementor-element-b670754) {
		align-self: flex-start;
	}
}

/* Menüknopf gespiegelt: die kürzere mittlere Linie hängt jetzt an der Außenkante, beim Überfahren wächst sie nach innen */
body.waka-header-entwurf .elementor-location-header .dce-button-hamburger svg {
	transform: scaleX(-1);
	transition: transform .3s ease;
}
/* obere und untere Linie drehen sich beim Öffnen zum X (um die Mitte), die mittlere fällt als Faden zur Karte */
body.waka-header-entwurf .elementor-location-header #dce_hamburger g:is(:nth-child(1), :nth-child(3)) {
	transform-origin: center !important;
}
html.waka-karte-offen body.waka-header-entwurf .elementor-location-header #dce_hamburger g:nth-child(1) {
	transform: rotate(45deg) translateY(20px) scaleX(.7) !important;
}
html.waka-karte-offen body.waka-header-entwurf .elementor-location-header #dce_hamburger g:nth-child(3) {
	transform: rotate(-45deg) translateY(-20px) scaleX(.7) !important;
}
html.waka-faden-weg body.waka-header-entwurf .elementor-location-header #dce_hamburger g:nth-child(2) {
	opacity: 0;
	transition: none !important;
}
/* X dreht beim Überfahren um 90 Grad wie die anderen X der Seite, rechts herum (Alex 09.11.2026: "den close button bitte
   bei mouse over nach rechts drehen"): der Knopf ist gespiegelt, darum -90 Grad, die nach der Spiegelung rechts herum laufen */
html.waka-karte-offen body.waka-header-entwurf .elementor-location-header .dce-button-hamburger:hover svg {
	transform: scaleX(-1) rotate(-90deg);
}

/* Karte aus Idee 4: schwarz, 8 px Ecken, die feine helle Kante zeigt sie auch über schwarzen Bereichen (Waka TV).
   Lage setzt das Skript: rechts bündig mit dem Menüknopf, unter dem Header */
.waka-karte {
	position: fixed;
	z-index: 2002;
	top: 90px;
	right: 50px;
	width: 350px;
	box-sizing: border-box;
	/* seitlich 40: der Pfeil vor BACK und der Punkt beim Überfahren stehen links vor dem Text */
	padding: 30px 40px;
	overflow: auto;
	overscroll-behavior: contain;
	background: #000;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 8px;
	display: none;
}
.waka-karte.da {
	display: block;
}
.waka-faden {
	position: fixed;
	z-index: 2003;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	transform-origin: 0 0;
	display: none;
	background: #000;
	pointer-events: none;
}
/* Ring der Welle (?entwurf=welle, header-entwurf.min.js): Kreis um die Mitte des Menüknopfs, wird groß und verebbt, unter
   der Karte */
.waka-ring {
	position: fixed;
	z-index: 2001;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border: 1px solid #000;
	border-radius: 50%;
	display: none;
	pointer-events: none;
}
/* Icons näher am Menü als im Offcanvas (Alex 08.11.2026: "bitte die social media buttons näher an das menü. dann sparen
   wir platz."): von der Grundlinie des letzten Punkts 40 px bis zu den Icons, so viel Luft wie die Karte innen oben und
   seitlich hat (vorher 72 px am Desktop, 63 am Handy, im Offcanvas eine Menüzeile). Ohne die Außenabstände der Vorlage */
.waka-karte .dce-template-after {
	margin-top: 30px;
}
.waka-karte .dce-template-after .e-con.e-parent {
	margin: 0 !important;
	--margin-top: 0px;
	--margin-bottom: 0px;
}
/* Slide-Menü so breit wie der Inhalt der Karte (im Offcanvas mindestens 315 px, 25 px nach links für Punkt und Pfeil
   vor dem Text): die Pfeile der Untermenüs stehen rechts so weit vom Rand wie der Text links */
.waka-karte .elementor-element-a71c3f2 {
	align-self: stretch;
	width: 100% !important;
	max-width: none;
	/* ohne den Abstand darunter (9 px, nur am Desktop): Icons in allen Breiten gleich weit vom Menü */
	margin-bottom: 0 !important;
}
.waka-karte .pp-slide-menu {
	/* block statt inline-block: ohne die Zeilenlücke von 7 px darunter */
	display: block;
	min-width: 0 !important;
	width: calc(100% + 25px) !important;
}
/* Back klein über der Ebene statt wie ein Menüpunkt (Alex 08.11.2026: "mir gefällt der back button nicht. hast du eine
   idee? kleiner oder weiter eingeruckt nach links?"): Versalien 11 px wie die kleinen Zeilen der Seite (Kategorie der
   Kacheln, Tabellenköpfe), der Pfeil in der Flucht der Punkte statt 15 px vor der Kartenkante. Die ganze Zeile führt
   zurück, beim Überfahren werden Pfeil und Wort weiß. Im Offcanvas (ohne Entwurf) bleibt Back, wie es ist */
.waka-karte .pp-slide-menu .pp-slide-menu-back {
	margin-inline-start: 0 !important;
	cursor: pointer;
}
.waka-karte .pp-slide-menu-back .pp-slide-menu-arrow {
	width: auto !important;
	height: auto !important;
	/* Spitze des Pfeils genau über dem ersten Buchstaben der Punkte (Glyphe hat 2 px Vorlauf, das W 1 px; gemessen in
	   Firefox und WebKit bei 1440 und 390, Chrome zeichnet das W am Handy 1 px weiter links) */
	margin-inline-start: -1px !important;
	margin-inline-end: 5px !important;
	padding: 0 !important;
}
.waka-karte .pp-slide-menu-back .pp-slide-menu-arrow i {
	width: auto !important;
	height: auto !important;
	font-size: 10px !important;
}
.waka-karte .pp-slide-menu-back .pp-menu-sub-item-back {
	font-size: 11px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	letter-spacing: .12em !important;
}
.waka-karte .pp-slide-menu-back:is(:hover, .waka-unter) :is(.pp-menu-sub-item-back, .pp-slide-menu-arrow i) {
	color: #fff !important;
}
/* der ganze Balken gehört zu seinem Punkt (Alex 09.11.2026: "mach bitte die gesamte fläche des balkens klickbar. auch der
   text soll seine farbe ändern wenn die mouse nicht direkt über dem text ist"): Schrift und Pfeil weiß, solange die Fläche
   wegen Maus oder Fokus auf dem Punkt liegt, Zeiger als Hand über der ganzen Fläche (Klassen setzt das Skript) */
.waka-karte .pp-slide-menu .pp-slide-menu-item.waka-unter > .pp-slide-menu-item-link,
.waka-karte .pp-slide-menu .pp-slide-menu-item.waka-unter > .pp-slide-menu-arrow,
.waka-karte .pp-slide-menu .pp-slide-menu-item.waka-unter > .pp-slide-menu-arrow i {
	color: #fff !important;
}
.waka-karte.waka-zeigt,
.waka-karte .pp-slide-menu .pp-slide-menu-item {
	cursor: pointer;
}
/* kein Fokusrahmen nach Antippen oder Klick, nur bei Bedienung mit der Tastatur (Klasse zeiger setzt das Skript; Alex
   09.11.2026: "am iphone, hat der menüpunkt back eine umrandung, wenn man die seite öffnet"). Rahmen aus Theme und
   Slide-Menü bei :focus-visible: Linie 2 px und weißer innerer Schatten 4 px */
.waka-karte.zeiger :focus {
	outline: none !important;
	box-shadow: none !important;
}
/* Menüschrift in der Karte etwas kleiner (Alex 08.11.2026 abends: "typo im menü bitte etwas kleiner"): 18 statt 20 px, am
   Handy 16 statt 18, die Zeilenhöhe wächst mit (1,2), Back bleibt bei 11 px. PLASTIC & ENVIRONMENTAL passt so in eine Zeile */
.waka-karte .elementor-element-a71c3f2 .pp-slide-menu .pp-slide-menu-item-link:not(.pp-menu-sub-item-back) {
	font-size: 18px !important;
}
@media (max-width: 767px) {
	.waka-karte .elementor-element-a71c3f2 .pp-slide-menu .pp-slide-menu-item-link:not(.pp-menu-sub-item-back) {
		font-size: 16px !important;
	}
}
/* kompakt: ohne das Logo über dem Menü */
.waka-karte .elementor-element-80a0548 {
	display: none !important;
}
/* Mitwandernder Hintergrund statt Punkt und Einrücken (Alex 08.11.2026: "mir gefällt bei dieser menüführung, dass der
   hintergrund mitwandert. https://www.sybiosme.com/en kannst du bitte bei unserer den punkt und das einrucken entfernen
   und dafür diesen effekt einbauen"). Werte vom Vorbild: Fläche 9 % Weiß, gleitet in 0,24 s mit
   cubic-bezier(0.165, 0.84, 0.44, 1) zum Punkt unter der Maus, blendet in 0,12 s ein und aus. Hier 16 px seitlich um den
   Text wie dort, so hoch wie der Zeilentakt (44 px, die Flächen zweier Punkte stoßen aneinander), Ecken 8 px wie die
   Karte. Die Fläche liegt in der Karte unter dem Menü (das Slide-Menü schneidet seitlich ab), Lage setzt das Skript */
.waka-karte {
	isolation: isolate;
}
/* der schwarze Grund der Menüvorlage (Container 469e462) läge über der Fläche, in der Karte trägt sie selbst das Schwarz */
.waka-karte .elementor-element.elementor-element-469e462 {
	background-color: transparent !important;
}
.waka-flaeche {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-radius: 8px;
	/* 9 % Weiß auf dem Schwarz der Karte, deckend (seit 09.11.2026, vorher rgba(255, 255, 255, .09), gleicher Farbton) */
	background: #171717;
	opacity: 0;
	pointer-events: none;
	transition: transform .24s cubic-bezier(0.165, 0.84, 0.44, 1), height .24s cubic-bezier(0.165, 0.84, 0.44, 1), width .24s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .12s ease-out;
}
.waka-flaeche.da {
	opacity: 1;
}
.waka-flaeche.springt {
	transition: opacity .12s ease-out;
}
/* geöffnete Seite (Alex 09.11.2026: "menü: bitte die aktuelle, eöffnete seite immer grau hinterlegen"): die Fläche ruht
   dort (Skript), die Schrift des Punkts ist weiß wie der Bereich in der ersten Ebene, auch in den Unterebenen, wo Vorlage
   1504 sie sonst grau lässt */
.waka-karte .pp-slide-menu .pp-slide-menu-item.waka-hier > .pp-slide-menu-item-link {
	color: #fff !important;
}
.waka-karte .waka-blob {
	display: none !important;
}
.waka-karte .pp-slide-menu .pp-slide-menu-item-link.waka-rueckt {
	transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.waka-flaeche {
		transition: opacity .12s ease-out;
	}
}
/* Punkte laufen gestaffelt ein wie im Offcanvas (Bewegung aus Vorlage 1504), dann die Icons */
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item,
.waka-karte.ein .dce-template-after {
	animation: waka-menue-ein .7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(1) { animation-delay: .15s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(2) { animation-delay: .2s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(3) { animation-delay: .25s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(4) { animation-delay: .3s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(5) { animation-delay: .35s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(6) { animation-delay: .4s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(7) { animation-delay: .45s; }
.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item:nth-child(8) { animation-delay: .5s; }
.waka-karte.ein .dce-template-after { animation-delay: .55s; }
/* beim Schließen verschwinden die Punkte zuerst, dann rollt die Karte ein */
.waka-karte.da:not(.ein) .pp-slide-menu__menu > .pp-slide-menu-item,
.waka-karte.da:not(.ein) .dce-template-after {
	opacity: 0;
	transition: opacity .15s ease;
}
@media (prefers-reduced-motion: reduce) {
	.waka-karte.ein .pp-slide-menu__menu > .pp-slide-menu-item,
	.waka-karte.ein .dce-template-after {
		animation: none;
	}
}

/* Social-Icons in der Karte als Kacheln (Alex 09.11.2026: "bitte modernisiere noch die social media buttons im menü", aus
   zwei Varianten "bitte b"): die Zeichen auf der grauen Fläche des Menüs (#171717), 40 px groß, Ecken 8 px wie die Karte,
   8 px Abstand, Zeichen 17 px im Grau der Menüpunkte. Beim Überfahren wird die Kachel heller (#262626) und das Zeichen weiß.
   Vorher Kreise mit 1 px heller Linie, 32 px */
.waka-karte .elementor-widget-social-icons {
	--grid-column-gap: 8px !important;
	--grid-row-gap: 0px !important;
}
/* in allen Browsern eine Zeile mit 8 px Lücke (Safari setzte sonst je 4 px Außenabstand dazu, 16 statt 8 px, und schob die
   Zeile mit -4 px aus der Flucht der Menüpunkte) */
.waka-karte .elementor-social-icons-wrapper {
	display: flex !important;
	gap: 8px !important;
	margin: 0 !important;
}
.waka-karte .elementor-social-icons-wrapper > .elementor-grid-item {
	margin: 0 !important;
}
.waka-karte .elementor-social-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #171717 !important;
	transition: background-color var(--waka-dauer) var(--waka-kurve) !important;
}
.waka-karte .elementor-social-icon i {
	font-size: 17px !important;
	color: rgba(255, 255, 255, .59) !important;
	transition: color var(--waka-dauer) var(--waka-kurve);
}
.waka-karte .elementor-social-icon:is(:hover, :focus-visible) {
	background: #262626 !important;
}
.waka-karte .elementor-social-icon:is(:hover, :focus-visible) i {
	color: #fff !important;
}