/* =========================================================================
   MM Reiter – Aufsatz für Elementors „Nested Tabs"

   Kein eigenes Widget: Elementors Nested Tabs bleibt das Element, dieses
   Paket liefert nur Aussehen und Blätterknöpfe. Eingeschaltet wird es am
   Widget unter „Erweitert → CSS-Klassen":

       mm-tabs mm-tabs--quer      Reiterleiste über dem Inhalt
       mm-tabs mm-tabs--laengs    Reiterleiste neben dem Inhalt

   Die Ausrichtung muss IMMER mitgeschrieben werden – siehe ganz unten,
   warum „mm-tabs" allein absichtlich kaputt aussieht.

   Dazu gehört EINE Widget-Einstellung, die nicht per CSS zu ersetzen ist:
   „Zusätzliche Einstellungen → Breakpoint → None". Damit fällt Elementors
   Umschlag auf Akkordeon weg, den wir hier ohnehin nicht wollen. Wird sie
   vergessen, greift unten das Sicherheitsnetz – aber sauberer ist die
   Einstellung.

   Zuständig ist dieses Paket allein für die Reiterleiste. Was hinter einem
   Reiter steht (Spalten, Bild, Überschrift), baust du mit normalen
   Elementor-Containern im Reiterinhalt.

   --- Spezifität ---------------------------------------------------------
   Elementors eigenes Widget-CSS schreibt durchgehend
   „.elementor-widget-n-tabs .xyz" (0-2-0). Unsere Klasse sitzt auf
   DEMSELBEN Element wie „elementor-widget-n-tabs", „.mm-tabs .xyz" wäre
   also ebenfalls 0-2-0 – ein Gleichstand, den die Ladereihenfolge
   entscheidet, und die ist bei bedarfsweise geladenem Widget-CSS nicht
   verlässlich. Deshalb steht die Klasse hier durchgehend doppelt
   („.mm-tabs.mm-tabs"): gleiche Elemente, 0-3-0, gewinnt unabhängig von
   der Reihenfolge. Dasselbe Mittel wie bei den MM-Widgets gegen die
   Kit-Typografie.

   --- Stellschrauben -----------------------------------------------------
   Farben zeigen bewusst auf Elementors Globals: ändert sich im Kit die
   Hausfarbe, zieht die Aktivlinie mit. Der Wert hinter dem Komma ist nur
   der Rückfall, falls dieses Paket je ohne dieses Kit läuft.

     --mm-tabs-farbe / -hover / -aktiv           Schriftfarbe der Reiter
     --mm-tabs-linie-farbe / -breite / -abstand  Aktivlinie unter dem Wort
     --mm-tabs-grundlinie-farbe / -breite        durchgehende Linie (quer)
     --mm-tabs-trennlinie-farbe / -breite        Linie Leiste↔Inhalt (längs)
     --mm-tabs-reiter-abstand                    Mindestabstand der Reiter
     --mm-tabs-blaettern-*                       Blätterknöpfe (quer)
     --mm-tabs-uebergang                         Dauer der Einblendung
   ========================================================================= */

.mm-tabs.mm-tabs {
	--mm-tabs-farbe: var( --e-global-color-text, #1c1c1e );
	--mm-tabs-farbe-hover: var( --e-global-color-text, #1c1c1e );
	--mm-tabs-farbe-aktiv: var( --e-global-color-text, #1c1c1e );

	--mm-tabs-linie-farbe: var( --e-global-color-accent, #d51130 );
	--mm-tabs-linie-breite: 2px;
	--mm-tabs-linie-abstand: 10px;

	--mm-tabs-grundlinie-farbe: #d9d9d9;
	--mm-tabs-grundlinie-breite: 2px;

	--mm-tabs-trennlinie-farbe: #d9d9d9;
	--mm-tabs-trennlinie-breite: 1px;

	--mm-tabs-reiter-abstand: 24px;

	--mm-tabs-blaettern-farbe: var( --e-global-color-text, #1c1c1e );
	--mm-tabs-blaettern-farbe-hover: var( --e-global-color-accent, #d51130 );
	--mm-tabs-blaettern-groesse: 18px;
	--mm-tabs-blaettern-abstand: 16px;

	--mm-tabs-uebergang: 0.25s;
}

/* --- Reiter als reiner Text, ohne Kästen --------------------------------
   Elementor gibt den Reitern von Haus aus einen grauen Hintergrund, im
   Aktiv- und Hover-Zustand einen in der Akzentfarbe – dazu weiße Schrift.
   Auf dem hellen Kasten ist die weiße Schrift unlesbar, und die Aktivlinie
   verschwände auf dem farbigen Kasten. Beides hier weg. Wer die Farben
   lieber über die Elementor-Controls steuert: diesen Block löschen, dann
   greifen wieder Stil → Titel → Normal/Hover/Aktiv. */
.mm-tabs.mm-tabs .e-n-tabs {
	--n-tabs-title-background-color: transparent;
	--n-tabs-title-background-color-hover: transparent;
	--n-tabs-title-background-color-active: transparent;
	--n-tabs-title-color: var( --mm-tabs-farbe );
	--n-tabs-title-color-hover: var( --mm-tabs-farbe-hover );
	--n-tabs-title-color-active: var( --mm-tabs-farbe-aktiv );
	--n-tabs-title-gap: var( --mm-tabs-reiter-abstand );
}

/* --- Aktivlinie: eng am Wort -------------------------------------------
   Bewusst am inneren <span>, nicht am <button>: Der Knopf ist so breit wie
   sein Platz in der Leiste, jede Rahmenlinie an ihm liefe über die volle
   Knopfbreite. Der span ist genau so breit wie das Wort.

   Elementor gibt dem span „display: flex" – hier auf inline-block gesetzt,
   damit er wortbreit bleibt und das ::after unten als Block darunter
   passt statt als zweites Flex-Element daneben. */
.mm-tabs.mm-tabs .e-n-tab-title-text {
	display: inline-block;
	border-block-end: var( --mm-tabs-linie-breite ) solid transparent;
	padding-block-end: var( --mm-tabs-linie-abstand );
}

.mm-tabs.mm-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
	border-block-end-color: var( --mm-tabs-linie-farbe );
	font-weight: 700;
}

/* --- Kein Zittern beim Fettwerden --------------------------------------
   Der aktive Reiter wird fett, fette Schrift ist breiter – bei verteilter
   Leiste (quer) verschieben sich dadurch bei JEDEM Wechsel alle anderen
   Reiter ein Stück. Deshalb hält jeder span von vornherein die Breite
   seiner fetten Fassung frei: ein unsichtbares, null Pixel hohes ::after
   mit demselben Text in 700. Den Text dafür schreibt mm-tabs.js als
   data-mm-titel an den span.

   Ohne JavaScript fehlt das Attribut, attr() liefert dann nichts – die
   Leiste zittert wie gehabt, bricht aber nicht. */
.mm-tabs.mm-tabs .e-n-tab-title-text::after {
	content: attr( data-mm-titel );
	display: block;
	block-size: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	font-weight: 700;
}

/* =========================================================================
   Quere Ausrichtung – Leiste über dem Inhalt
   ========================================================================= */

/* --- Leiste und Blätterknöpfe in eine Zeile ----------------------------
   Statt die Knöpfe in die Leiste zu hängen (dort würden sie mitscrollen
   und sich an der Verteilung beteiligen), wird „.e-n-tabs" zum Raster:
   Zeile 1 trägt Leiste und Knöpfe nebeneinander, Zeile 2 den Inhalt über
   die volle Breite. Das kommt ohne jedes Umhängen im DOM aus – mm-tabs.js
   fügt die Knöpfe schlicht als letztes Kind an.

   „column-gap: 0", weil die graue Grundlinie sonst zwischen Leiste und
   Knöpfen eine Lücke hätte; der Abstand sitzt stattdessen als Innenabstand
   an den Knöpfen. */
.mm-tabs--quer.mm-tabs .e-n-tabs {
	--n-tabs-display: grid;
	--n-tabs-heading-display: flex;
	--n-tabs-heading-width: auto;
	--n-tabs-heading-justify-content: space-around;
	--n-tabs-heading-overflow-x: auto;
	--n-tabs-heading-wrap: nowrap;
	--n-tabs-title-white-space: nowrap;

	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: stretch;
	column-gap: 0;
	row-gap: var( --n-tabs-gap, 10px );
}

.mm-tabs--quer.mm-tabs .e-n-tabs-heading {
	grid-column: 1;
	grid-row: 1;
}

.mm-tabs--quer.mm-tabs .mm-tabs__blaettern {
	grid-column: 2;
	grid-row: 1;
}

.mm-tabs--quer.mm-tabs .e-n-tabs-content {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* --- Grundlinie ---------------------------------------------------------
   Als Hintergrundbild, nicht als Rahmen: Die Leiste ist waagerecht
   scrollbar, ein unten liegender Rahmen säße am Rahmenkasten und die
   Aktivlinie käme nie auf gleiche Höhe – wir bekämen zwei Linien
   übereinander statt einer.

   Ein Hintergrund dagegen liegt am Polsterkasten, scrollt nicht mit
   (Vorgabe „background-attachment: scroll" heißt beim Scrollcontainer
   genau das) und endet exakt dort, wo unten die Aktivlinie des Reiters
   sitzt. Rahmen werden über Hintergründen gezeichnet – die rote Linie
   überdeckt die graue also von selbst, ohne z-index und ohne negative
   Abstände.

   Dieselbe Linie liegt an den Blätterknöpfen, damit sie über die volle
   Breite durchläuft. */
.mm-tabs--quer.mm-tabs .e-n-tabs-heading,
.mm-tabs--quer.mm-tabs .mm-tabs__blaettern {
	background-image: linear-gradient( var( --mm-tabs-grundlinie-farbe ), var( --mm-tabs-grundlinie-farbe ) );
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% var( --mm-tabs-grundlinie-breite );
	padding-block-end: 0;
}

/* Der Reiter darf unten kein Polster haben, sonst endet die Aktivlinie
   über der Grundlinie statt auf ihr. Der Abstand Wort↔Linie kommt aus dem
   Polster des span (--mm-tabs-linie-abstand), die Luft nach oben aus dem
   oberen Polster des Knopfes. */
.mm-tabs--quer.mm-tabs .e-n-tabs {
	--n-tabs-title-padding-block-end: 0px;
	--n-tabs-title-align-items: flex-end;
	--n-tabs-title-justify-content: center;
	--n-tabs-title-padding-inline-start: 0px;
	--n-tabs-title-padding-inline-end: 0px;
	--n-tabs-title-flex-shrink: 0;
}

/* --- Verteilung ---------------------------------------------------------
   „space-around" verteilt drei kurze Titel wie im Entwurf über die Breite.
   Reicht der Platz nicht mehr, wird die Leiste scrollbar – dann ist der
   freie Raum negativ und space-around verhält sich von selbst wie
   flex-start, die Reiter stehen also linksbündig mit dem Mindestabstand
   aus --n-tabs-title-gap. Genau das ist gewollt; es braucht keine
   Umschaltung per Breakpoint. */
.mm-tabs--quer.mm-tabs .e-n-tabs-heading {
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.mm-tabs--quer.mm-tabs .e-n-tab-title {
	scroll-snap-align: start;
}

/* --- Blätterknöpfe ------------------------------------------------------ */
.mm-tabs--quer.mm-tabs .mm-tabs__blaettern {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding-inline-start: var( --mm-tabs-blaettern-abstand );
}

.mm-tabs.mm-tabs .mm-tabs__knopf {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: var( --mm-tabs-blaettern-farbe );
	line-height: 0;
	transition: color var( --mm-tabs-uebergang ) ease-in-out;
}

.mm-tabs.mm-tabs .mm-tabs__knopf:hover,
.mm-tabs.mm-tabs .mm-tabs__knopf:focus-visible {
	color: var( --mm-tabs-blaettern-farbe-hover );
}

.mm-tabs.mm-tabs .mm-tabs__knopf svg {
	display: block;
	inline-size: var( --mm-tabs-blaettern-groesse );
	block-size: auto;
}

/* Ein Chevron-Pfad für beide Knöpfe, der zurück-Knopf spiegelt ihn. */
.mm-tabs.mm-tabs .mm-tabs__knopf--zurueck svg {
	transform: scaleX( -1 );
}

/* =========================================================================
   Längse Ausrichtung – Leiste neben dem Inhalt
   ========================================================================= */

.mm-tabs--laengs.mm-tabs .e-n-tabs {
	--n-tabs-title-justify-content: flex-start;
	--n-tabs-title-text-align: start;
	--n-tabs-title-padding-inline-start: 0px;
}

/* Trennlinie zwischen Reiterleiste und Inhalt. */
.mm-tabs--laengs.mm-tabs .e-n-tabs-heading {
	align-items: flex-start;
	border-inline-end: var( --mm-tabs-trennlinie-breite ) solid var( --mm-tabs-trennlinie-farbe );
	padding-inline-end: var( --mm-tabs-reiter-abstand );
}

/* Ab Tablet abwärts: quer scrollbare Leiste statt Akkordeon.
   Elementor schaltet Nested Tabs unterhalb eines Breakpoints auf
   Akkordeon, indem es Leiste und Inhalt auf „display: contents" setzt –
   die Leiste löst sich auf, Titel und Panels verschränken sich. Gesteuert
   wird das über CSS-Variablen, die sich sauber zurücksetzen lassen; kein
   !important nötig. Die Scrollbar blendet Elementor selbst aus. */
@media ( max-width: 1024px ) {
	.mm-tabs--laengs.mm-tabs .e-n-tabs {
		--n-tabs-heading-display: flex;
		--n-tabs-content-display: flex;
		--n-tabs-direction: column;
		--n-tabs-heading-direction: row;
		--n-tabs-heading-width: 100%;
		--n-tabs-heading-overflow-x: auto;
	}

	.mm-tabs--laengs.mm-tabs .e-n-tabs-heading {
		flex-wrap: nowrap;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		border-inline-end: 0;
		border-block-end: var( --mm-tabs-trennlinie-breite ) solid var( --mm-tabs-trennlinie-farbe );
		padding-inline-end: 0;
		padding-block-end: 12px;
	}

	.mm-tabs--laengs.mm-tabs .e-n-tab-title {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* =========================================================================
   Konstante Höhe und Einblendung beim Reiterwechsel
   ========================================================================= */

/* Elementor blendet inaktive Reiterinhalte aus dem Layout aus. Sind die
   Inhalte unterschiedlich lang, ändert sich beim Umschalten die Höhe des
   Elements und alles darunter rutscht – auf dem Board gemessen: 540px
   gegenüber 141px, also 399px Sprung. Bei querer Ausrichtung wiegt das
   schwerer als bei längser, weil die Blätterknöpfe ÜBER dem Inhalt stehen
   und zum schnellen Durchklicken einladen: Der Knopf rutscht dann unter
   dem Finger weg.

   Deshalb liegen alle Reiterinhalte in derselben Rasterzelle übereinander.
   Das Element ist dann immer so hoch wie der längste Reiter, die Höhe
   ändert sich beim Wechsel nicht mehr, und die Einblendung unten wird zur
   echten Überblendung statt zu einem Aufblitzen auf leerem Grund.

   „!important" ist hier ausnahmsweise nötig: Elementor setzt „display:
   none" nicht per Stylesheet, sondern inline per JavaScript direkt am
   Panel – dagegen kommt keine normale Regel an, unabhängig von der
   Spezifität.

   Preis: Das Element ist immer so hoch wie sein längster Reiter. Wenn ein
   Reiter deutlich länger ist als die anderen, entsteht dort Leerraum. Wer
   das nicht will, lässt diesen Block weg und setzt stattdessen eine feste
   Mindesthöhe am Inhaltsbereich. */
.mm-tabs.mm-tabs .e-n-tabs-content {
	display: grid;
	align-items: start;
}

.mm-tabs.mm-tabs .e-n-tabs-content > .e-con {
	grid-column: 1;
	grid-row: 1;
}

.mm-tabs.mm-tabs .e-n-tabs-content > .e-flex:not( .e-active ) {
	display: flex !important;
}

.mm-tabs.mm-tabs .e-n-tabs-content > .e-grid:not( .e-active ) {
	display: grid !important;
}

/* Einblendung: nur Deckkraft, keine Verschiebung. Ein Reiterwechsel ist
   ein Sprung zwischen gleichrangigen Inhalten, keine Bewegung in eine
   Richtung – eine Verschiebung liefe beim Zurückblättern falsch herum.

   „visibility" wird mitgeschaltet, damit der verdeckte Inhalt weder
   fokussierbar noch vorlesbar ist. Beim Ausblenden wartet es die
   Einblenddauer ab (sonst verschwände der Inhalt schlagartig), beim
   Einblenden schaltet es sofort. */
.mm-tabs.mm-tabs .e-n-tabs-content > .e-con {
	opacity: 1;
	visibility: visible;
	transition: opacity var( --mm-tabs-uebergang ) ease-in-out, visibility 0s;
}

.mm-tabs.mm-tabs .e-n-tabs-content > .e-con:not( .e-active ) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var( --mm-tabs-uebergang ) ease-in-out, visibility 0s var( --mm-tabs-uebergang );
}

@media ( prefers-reduced-motion: reduce ) {
	.mm-tabs.mm-tabs .e-n-tabs-content > .e-con,
	.mm-tabs.mm-tabs .e-n-tabs-content > .e-con:not( .e-active ),
	.mm-tabs.mm-tabs .mm-tabs__knopf {
		transition: none;
	}
}

/* =========================================================================
   Sicherheitsnetz gegen Elementors Akkordeon-Umschlag
   =========================================================================

   Unterhalb des im Widget gewählten Breakpoints stellt Elementor Nested
   Tabs auf Akkordeon um. Die Umschaltung selbst („display: contents" an
   Leiste und Inhalt) läuft über Variablen und ist oben schon abgefangen:
   Wir setzen sie an „.e-n-tabs", also näher am Ziel als Elementors
   Vorgabe am Wrapper – bei Variablen entscheidet die Nähe im Baum, nicht
   die Spezifität.

   Zwei Regeln kommen aber nicht als Variable, sondern direkt: senkrechte
   Abstände an den Reitern, die im Akkordeon die Zeilen trennen. In einer
   waagerechten Leiste versetzen sie jeden Reiter außer dem ersten nach
   unten – die Leiste sähe verrutscht aus.

   Elementor schreibt sie mit „.elementor.elementor
   .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title:not(:first-child)"
   – Spezifität 0-6-0. Dagegen käme hier nur eine noch längere Kette an,
   und die wäre in einem Jahr niemandem mehr erklärbar. Deshalb
   ausnahmsweise !important: kurz, lesbar, und der Geltungsbereich ist
   durch .mm-tabs eng begrenzt.

   Nötig ist das nur, wenn am Widget der Breakpoint nicht auf „None" steht
   (siehe Kopf dieser Datei). Es kostet nichts, wenn er richtig steht. */
.mm-tabs.mm-tabs .e-n-tab-title:not( :first-child ) {
	margin-block-start: 0 !important;
}

.mm-tabs.mm-tabs .e-n-tab-title[aria-selected="true"] {
	margin-block-end: 0 !important;
}

/* =========================================================================
   Fehlende Ausrichtung sichtbar machen
   ========================================================================= */

/* „mm-tabs" ohne Ausrichtungsklasse ist kein gültiger Zustand: Farben und
   Aktivlinie greifen, Leiste und Grundlinie nicht – das Ergebnis sähe
   „fast richtig" aus, und ein stiller Halbzustand kostet später mehr Zeit
   als ein offensichtlicher Fehler. Deshalb fällt er auf.

   Ebenso, wenn beide Ausrichtungen gleichzeitig gesetzt sind. */
.mm-tabs:not( .mm-tabs--quer ):not( .mm-tabs--laengs ),
.mm-tabs--quer.mm-tabs--laengs {
	outline: 2px dashed var( --mm-tabs-linie-farbe, #d51130 );
	outline-offset: 6px;
}