/*
 * DKS Share Buttons (TEIL P) — Frontend-CSS
 *
 * Render-Modi: .dks-share--inline | .dks-share--floating | .dks-share--mobile
 * Form-Varianten: .dks-form--rounded | .dks-form--square | .dks-form--pill
 * Größen: .dks-size--small (32px) | --medium (40px) | --large (48px) | --xlarge (56px)
 *
 * Keine externen Abhängigkeiten — lokales CSS, Icons als Inline-SVG aus PHP.
 */

/* === Gemeinsame Basis =================================================== */
.dks-share {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
}
.dks-share *, .dks-share *::before, .dks-share *::after { box-sizing: border-box; }
.dks-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	text-decoration: none !important;
	font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	color: #fff !important;
	cursor: pointer;
	transition: filter .15s ease;
	white-space: nowrap;
	position: relative;
}
/* Themes ueberschreiben oft a:visited / a:active / a:focus mit Brand-Farben.
   Hier alle Link-States explizit forcieren, sonst werden Icons nach dem
   ersten Klick pink/orange (Theme-Color erbt sich ueber currentColor in SVG). */
.dks-share__btn:link,
.dks-share__btn:visited,
.dks-share__btn:hover,
.dks-share__btn:focus,
.dks-share__btn:focus-visible,
.dks-share__btn:active {
	color: #fff !important;
	text-decoration: none !important;
}
.dks-share__btn:hover { filter: brightness(.9); }
.dks-share__btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Hover-Animation: Icon skaliert leicht hoch (1.15x).
   Astra macht das automatisch fuer <button>-Tags, aber nicht fuer <a>-Tags —
   damit alle Buttons konsistent reagieren, hier explizit fuer SVG UND FA-
   Icons UND auf allen Render-Targets. Spezifitaet mit `html body .dks-share`
   so hoch, dass Theme-Override-Versuche keinen Effekt mehr haben. */
html body .dks-share .dks-share__btn svg,
html body .dks-share .dks-share__btn i.fa-solid,
html body .dks-share .dks-share__btn i.fa-regular,
html body .dks-share .dks-share__btn i.fa-brands,
html body .dks-share .dks-share__btn i.fa-light {
	transition: transform .15s ease;
}
html body .dks-share .dks-share__btn:hover svg,
html body .dks-share .dks-share__btn:focus-visible svg,
html body .dks-share .dks-share__btn:hover i.fa-solid,
html body .dks-share .dks-share__btn:hover i.fa-regular,
html body .dks-share .dks-share__btn:hover i.fa-brands,
html body .dks-share .dks-share__btn:hover i.fa-light,
html body .dks-share .dks-share__btn:focus-visible i.fa-solid,
html body .dks-share .dks-share__btn:focus-visible i.fa-regular,
html body .dks-share .dks-share__btn:focus-visible i.fa-brands,
html body .dks-share .dks-share__btn:focus-visible i.fa-light {
	transform: scale(1.15);
}
/* Wenn User prefers-reduced-motion eingestellt hat, keine Skalierung —
   barrierearm + verhindert Motion Sickness */
@media (prefers-reduced-motion: reduce) {
	html body .dks-share .dks-share__btn svg,
	html body .dks-share .dks-share__btn i { transition: none; }
	html body .dks-share .dks-share__btn:hover svg,
	html body .dks-share .dks-share__btn:hover i { transform: none; }
}
/* SVG-Icons:
   - Stroke-Icons (Print, Copy, E-Mail, Web-Share, Built-In-Lucides) haben
     `fill="none" stroke="currentColor"` in den Attributen.
   - Filled-Icons (Facebook, WhatsApp, LinkedIn, X) haben `fill="currentColor"`.
   In BEIDEN Faellen reicht es, `color: #fff` zu erzwingen — currentColor erbt
   dann ueberall korrekt. CSS NICHT pauschal `fill:` setzen, sonst werden die
   Stroke-Icons ungewollt weiss ausgefuellt (Bug von 1.17.2).

   Wichtig: `color` MUSS direkt auf das SVG-Element gesetzt werden (nicht nur
   auf den Button-Wrapper). Sonst kann ein Theme-Selektor wie
   `button:hover svg { color: <brand> !important }` durchschlagen, weil er
   das SVG direkt anvisiert waehrend unser Button-Color nur ueber Vererbung
   wirkt. Bei !important-Konflikten gewinnt der Selektor mit dem direkten
   Match, nicht der vererbende. (Bug auf Astra-Sites in 1.17.4: Print, Copy,
   Web-Share wurden bei Hover braun.) */
.dks-share__btn svg,
.dks-share__btn:link svg,
.dks-share__btn:visited svg,
.dks-share__btn:hover svg,
.dks-share__btn:focus svg,
.dks-share__btn:focus-visible svg,
.dks-share__btn:active svg,
button.dks-share__btn svg,
button.dks-share__btn:hover svg,
button.dks-share__btn:focus svg,
button.dks-share__btn:focus-visible svg,
button.dks-share__btn:active svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #fff !important;
}
/* Belt-and-Suspenders: falls Astra fill/stroke direkt auf die Pfade setzt
   (z.B. `button:hover svg path { fill: brand }`), forcieren wir per Attribute-
   Selector. SVG mit `stroke="currentColor"` → stroke #fff. Pfade mit
   `fill="currentColor"` → fill #fff. Pfade ohne explizites fill bleiben
   unbehelligt (z.B. die Stroke-Icons mit `fill="none"` am Parent-SVG). */
.dks-share__btn svg[stroke="currentColor"],
.dks-share__btn:hover svg[stroke="currentColor"],
.dks-share__btn:focus svg[stroke="currentColor"],
.dks-share__btn:active svg[stroke="currentColor"] { stroke: #fff !important; }

.dks-share__btn svg [fill="currentColor"],
.dks-share__btn:hover svg [fill="currentColor"],
.dks-share__btn:focus svg [fill="currentColor"],
.dks-share__btn:active svg [fill="currentColor"] { fill: #fff !important; }
.dks-share__btn i.fa-solid,
.dks-share__btn i.fa-regular,
.dks-share__btn i.fa-brands,
.dks-share__btn i.fa-light {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	color: #fff !important;
}
.dks-share__btn--custom { background: var(--c, #495057); }

/* Button-Element-Reset (Print, Copy, Web-Share sind <button> statt <a>):
   Themes (besonders Astra) setzen aggressives Styling auf <button> — Border,
   Box-Shadow und Outline. Bisherige Specificity `button.dks-share__btn` (0.0.2.1)
   war noch nicht hoch genug — Astra hat oft `.site-content button:hover`
   (0.0.3.1). Hier mit Anker-Prefix `html body .dks-share` (0.0.3.0) + Element
   und Klasse arbeiten, damit wir bei allen Properties klar gewinnen. */
html body .dks-share button.dks-share__btn,
html body .dks-share button.dks-share__btn:hover,
html body .dks-share button.dks-share__btn:focus,
html body .dks-share button.dks-share__btn:focus-visible,
html body .dks-share button.dks-share__btn:active,
html body .dks-share button.dks-share__btn:visited {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border: 0 none transparent !important;
	border-width: 0 !important;
	border-color: transparent !important;
	border-style: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	text-shadow: none !important;
	outline: 0 !important;
	outline-width: 0 !important;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	background-image: none !important;
}
/* Tastatur-Focus: eigener Outline-Indicator (innenliegend) */
html body .dks-share button.dks-share__btn:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: -3px !important;
}

/* Background-Color per Network — fuer ALLE States explizit, sonst kann ein
   Theme-Regel `button:hover { background: brand !important }` unsere Farbe
   im Hover-State schlucken. Spezifitaet: `html body .dks-share` (3 Klassen
   + 2 Tags) + Network-Klasse + State-Pseudo = 0.0.3.2, schlaegt alles. */
html body .dks-share .dks-share__btn--facebook,
html body .dks-share .dks-share__btn--facebook:hover,
html body .dks-share .dks-share__btn--facebook:focus,
html body .dks-share .dks-share__btn--facebook:focus-visible,
html body .dks-share .dks-share__btn--facebook:active,
html body .dks-share .dks-share__btn--facebook:visited { background-color: #1877F2 !important; }

html body .dks-share .dks-share__btn--x,
html body .dks-share .dks-share__btn--x:hover,
html body .dks-share .dks-share__btn--x:focus,
html body .dks-share .dks-share__btn--x:focus-visible,
html body .dks-share .dks-share__btn--x:active,
html body .dks-share .dks-share__btn--x:visited { background-color: #000000 !important; }

html body .dks-share .dks-share__btn--whatsapp,
html body .dks-share .dks-share__btn--whatsapp:hover,
html body .dks-share .dks-share__btn--whatsapp:focus,
html body .dks-share .dks-share__btn--whatsapp:focus-visible,
html body .dks-share .dks-share__btn--whatsapp:active,
html body .dks-share .dks-share__btn--whatsapp:visited { background-color: #25D366 !important; }

html body .dks-share .dks-share__btn--linkedin,
html body .dks-share .dks-share__btn--linkedin:hover,
html body .dks-share .dks-share__btn--linkedin:focus,
html body .dks-share .dks-share__btn--linkedin:focus-visible,
html body .dks-share .dks-share__btn--linkedin:active,
html body .dks-share .dks-share__btn--linkedin:visited { background-color: #0A66C2 !important; }

html body .dks-share .dks-share__btn--email,
html body .dks-share .dks-share__btn--email:hover,
html body .dks-share .dks-share__btn--email:focus,
html body .dks-share .dks-share__btn--email:focus-visible,
html body .dks-share .dks-share__btn--email:active,
html body .dks-share .dks-share__btn--email:visited { background-color: #6c757d !important; }

html body .dks-share .dks-share__btn--print,
html body .dks-share .dks-share__btn--print:hover,
html body .dks-share .dks-share__btn--print:focus,
html body .dks-share .dks-share__btn--print:focus-visible,
html body .dks-share .dks-share__btn--print:active { background-color: #6c757d !important; }

html body .dks-share .dks-share__btn--copy,
html body .dks-share .dks-share__btn--copy:hover,
html body .dks-share .dks-share__btn--copy:focus,
html body .dks-share .dks-share__btn--copy:focus-visible,
html body .dks-share .dks-share__btn--copy:active { background-color: #495057 !important; }

html body .dks-share .dks-share__btn--more,
html body .dks-share .dks-share__btn--more:hover,
html body .dks-share .dks-share__btn--more:focus,
html body .dks-share .dks-share__btn--more:focus-visible,
html body .dks-share .dks-share__btn--more:active { background-color: #495057 !important; }

/* Form-Varianten */
.dks-form--rounded .dks-share__btn { border-radius: 4px; }
.dks-form--square  .dks-share__btn { border-radius: 0; }
.dks-form--pill    .dks-share__btn { border-radius: 999px; }

/* Größen */
.dks-size--small  .dks-share__btn { height: 32px; padding: 0 10px; font-size: 13px; }
.dks-size--small  .dks-share__btn svg { width: 16px; height: 16px; }
.dks-size--medium .dks-share__btn { height: 40px; padding: 0 14px; font-size: 14px; }
.dks-size--medium .dks-share__btn svg { width: 18px; height: 18px; }
.dks-size--large  .dks-share__btn { height: 48px; padding: 0 16px; font-size: 15px; }
.dks-size--large  .dks-share__btn svg { width: 20px; height: 20px; }
.dks-size--xlarge .dks-share__btn { height: 56px; padding: 0 18px; font-size: 16px; }
.dks-size--xlarge .dks-share__btn svg { width: 22px; height: 22px; }

/* === Inline (unter Content) ============================================= */
.dks-share--inline {
	flex-wrap: wrap;
	margin: 32px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #e5e5e5;
}
.dks-share--inline .dks-share__label {
	font-size: 13px;
	color: #6c757d;
	font-weight: 600;
	margin-right: 4px;
}
/* Icon-only inline (wenn show_labels aus): Buttons quadratisch */
.dks-share--inline.is-icon-only .dks-share__btn {
	width: 40px; padding: 0;
}
.dks-size--small.dks-share--inline.is-icon-only  .dks-share__btn { width: 32px; }
.dks-size--large.dks-share--inline.is-icon-only  .dks-share__btn { width: 48px; }
.dks-size--xlarge.dks-share--inline.is-icon-only .dks-share__btn { width: 56px; }

/* === Floating Sidebar (Desktop) =========================================
   Glassmorphism-Look: semi-transparenter Background mit Backdrop-Blur, sodass
   man den darunter liegenden Content "schwimmend" durchsieht. Kompromiss
   zwischen "kein Kontrast" (komplett transparent) und "wuchtiger weisser
   Block" (deckend weiss). Auf Browsern ohne backdrop-filter (alte Firefox <103)
   fallback auf etwas hoeher deckendes weiss via @supports. */
.dks-share--floating {
	position: fixed;
	/* top + edge wird per inline-style aus PHP gesetzt.
	   `translateY(-50%)` zentriert die Bar VERTIKAL um den Top-%-Wert
	   (statt obere Kante). Dadurch sitzt der Pull-Anker (der ebenfalls
	   `translateY(-50%)` hat) auf derselben Linie wie die Bar-Mitte. */
	z-index: 9990;
	flex-direction: column;
	gap: 4px;
	background: rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	padding: 3px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: opacity .25s ease, transform .25s ease;
	opacity: 0;
	transform: translate(20px, -50%);
	pointer-events: none;
	/* Reiter-Look: nur die Seite zum Viewport-Rand offen, andere Seite rund.
	   Sidebar rechts → linke Seite abgerundet, rechte Seite kantig & ohne
	   Border (sieht aus als sitze sie buendig am Bildschirmrand). */
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-right: 0;
	border-radius: 8px 0 0 8px;
}
.dks-share--floating.is-left {
	/* Spiegelverkehrt — Sidebar links → rechte Seite abgerundet, linke Seite
	   buendig zum linken Viewport-Rand */
	border-left: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0 8px 8px 0;
}
/* Fallback fuer Browser ohne backdrop-filter — deckender, damit Icons lesbar
   bleiben (sonst stuende man auf reinem Page-Background) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dks-share--floating {
		background: rgba(255, 255, 255, 0.85);
	}
}
.dks-share--floating.is-left { transform: translate(-20px, -50%); }
.dks-share--floating.is-visible {
	opacity: 1;
	transform: translate(0, -50%);
	pointer-events: auto;
}
.dks-share--floating.is-left.is-visible {
	transform: translate(0, -50%);
}
.dks-share--floating .dks-share__btn {
	width: 40px; height: 40px; padding: 0; border-radius: 6px;
}
.dks-size--small  .dks-share--floating .dks-share__btn,
.dks-share--floating.dks-size--small  .dks-share__btn { width: 32px; height: 32px; }
.dks-size--large  .dks-share--floating .dks-share__btn,
.dks-share--floating.dks-size--large  .dks-share__btn { width: 48px; height: 48px; }
.dks-size--xlarge .dks-share--floating .dks-share__btn,
.dks-share--floating.dks-size--xlarge .dks-share__btn { width: 56px; height: 56px; }
.dks-share--floating .dks-share__btn .dks-share__lbl { display: none; }

/* === Mobile Bottom-Bar ==================================================
   Full-Width Bottom-Bar (iOS/Android Tab-Bar Standard) — klebt unten am
   Viewport, nutzt die volle Breite. Reiter-Look: nur oben abgerundet, unten
   und seitlich gerade. iOS-Notch wird ueber padding-bottom + env() abge-
   fangen, damit der Home-Indicator-Bereich nicht ueberlappt.

   Auto-Shrink: Buttons sind `flex: 1` mit min/max-width — bei vielen Buttons
   schrumpfen sie statt aus der Bar rauszulaufen (Bug von 1.17.0–1.17.2:
   `flex: 0 0 44px` verbot Shrink, ab 7+ Buttons floss der letzte Button raus).
   Plus Glaseffekt wie Floating-Sidebar. */
.dks-share--mobile {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9991;
	display: none;
	justify-content: space-around;
	align-items: center;
	background: rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	/* env() bewusst NICHT in der base-padding - Firefox Android setzt
	   env(safe-area-inset-bottom) dynamisch waehrend die URL-Bar einfaehrt
	   (~20 px), was die Bar visuell aufpumpt. iOS Safari kriegt env() unten
	   via @supports (-webkit-touch-callout: none) zurueck fuer den Home-Indicator. */
	padding: 6px;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
	gap: 4px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dks-share--mobile { background: rgba(255, 255, 255, 0.9); }
}
.dks-share--mobile .dks-share__btn {
	flex: 1 1 0;
	min-width: 36px;
	max-width: 52px;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 0;
	border-radius: 6px;
}
/* Fallback fuer aeltere Browser ohne aspect-ratio (Safari <15.4) */
@supports not (aspect-ratio: 1) {
	.dks-share--mobile .dks-share__btn { height: 44px; }
}
.dks-share--mobile .dks-share__btn .dks-share__lbl { display: none; }
/* Bei sehr vielen Buttons (>9) wrappen statt zu sehr schrumpfen */
.dks-share--mobile.is-wrap { flex-wrap: wrap; }
.dks-share--mobile.is-wrap .dks-share__btn { flex: 0 1 calc(20% - 4px); }

/* Schmale Viewports (<=400 px, i.E. Phones im Portrait) — garantiert dass auch
   bei 8 Buttons + 14 px Collapse-Knopf alles in die Bar passt, ohne dass der
   Collapse-Knopf rechts angeschnitten wird.
   Rechnung 320 px (iPhone SE): 8 * 28 (min) + 7 * 3 gap + 14 collapse + 8
   padding + 2 border = 269 px -> 51 px Luft. */
@media (max-width: 400px) {
    .dks-share--mobile {
        gap: 3px;
        padding: 6px 4px;
    }
    .dks-share--mobile .dks-share__btn { min-width: 28px; max-width: 44px; }
}


/* Responsive-Switch: ≤Mobile-Breakpoint → Mobile-Bar ein, Floating aus.
   Breakpoint wird im JS gesetzt (matchMedia mit dynamischer Schwelle).
   Per Default versteckt; .is-mobile-active wird via JS am <body> gesetzt. */
body.dks-mobile-active .dks-share--mobile   { display: flex; }
body.dks-mobile-active .dks-share--floating { display: none; }

/* Bewusst KEIN body-padding-bottom mehr (entfernt in 1.18.6) — bisher fuegten
   wir 68px Padding hinzu damit die Mobile-Bar nicht den letzten Pixel ueber-
   deckt. Aber: wenn Body-Background eine andere Farbe als der Footer hat,
   wurde der Padding-Bereich als heller/dunkler Streifen unter dem Footer
   sichtbar. Standard-UX wie iOS/Android Tab-Bars: Bar ueberdeckt halt den
   letzten Pixel — User merkt das nicht beim Scrollen. */

/* === Tooltips (Desktop) — Floating-Sidebar ============================== */
.dks-share--floating .dks-share__btn[data-tooltip]:hover::after,
.dks-share--floating .dks-share__btn[data-tooltip]:focus-visible::after {
	content: attr(data-tooltip);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #1a1a1a;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10000;
	animation: dks-tt-in .12s ease-out;
}
.dks-share--floating .dks-share__btn[data-tooltip]:hover::before,
.dks-share--floating .dks-share__btn[data-tooltip]:focus-visible::before {
	content: '';
	position: absolute;
	right: calc(100% + 4px);
	top: 50%;
	transform: translateY(-50%);
	border: 6px solid transparent;
	border-left-color: #1a1a1a;
	pointer-events: none;
	z-index: 10000;
}
.dks-share--floating.is-left .dks-share__btn[data-tooltip]:hover::after,
.dks-share--floating.is-left .dks-share__btn[data-tooltip]:focus-visible::after {
	right: auto;
	left: calc(100% + 10px);
}
.dks-share--floating.is-left .dks-share__btn[data-tooltip]:hover::before,
.dks-share--floating.is-left .dks-share__btn[data-tooltip]:focus-visible::before {
	right: auto;
	left: calc(100% + 4px);
	border-left-color: transparent;
	border-right-color: #1a1a1a;
}
@keyframes dks-tt-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Inline-Tooltip (nur wenn Label aus) — oberhalb des Buttons */
.dks-share--inline.is-icon-only .dks-share__btn[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #1a1a1a;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10000;
}

/* === Copy-Toast ========================================================= */
.dks-share__toast {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1a1a1a;
	color: #fff;
	padding: 10px 20px;
	border-radius: 6px;
	font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 10001;
}
.dks-share__toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* === Collapse-Feature (Floating-Sidebar + Mobile-Bar einklappbar) =========
   - Collapse-Knopf in der ausgeklappten Bar: Desktop oben (12 px hoch, volle
     Bar-Breite), Mobile rechts (14 px breit per order:99, Pfeil nach unten).
   - Pull-Anker im eingeklappten Zustand: Desktop 14×30 px rechts mittig,
     Mobile 30×14 px unten mittig. Default unsichtbar (display:none), wird
     erst sichtbar wenn die Bar .is-collapsed bekommt.
   - Bar-Slide: translateX(100%) Desktop / translateY(100%) Mobile,
     350 ms cubic-bezier.
   - localStorage-Memory: dks_share_collapsed_desktop / _mobile (per JS).
   ======================================================================== */

/* Collapse-Knopf in der ausgeklappten Bar — refactored in 1.18.5.
   Layout-Properties (Hoehe, Padding, Margin, transform, border, …) sind hier
   OHNE State-Pseudos definiert → Mobile-Override (.dks-share--mobile .…)
   gewinnt im Mobile-Kontext durch hoehere Spezifitaet (0,2,2 vs 0,1,2).
   Color/Background-Properties separat MIT allen States — damit Theme-
   Hover-Override (z.B. Hello/Elementor `button:hover { color/background:
   brand }`) nicht durchschlaegt.

   transform/padding-block/padding-inline explizit auf 0/none — sonst kann
   ein Theme-Hover wie `button:hover { transform: scale(.95) }` einen
   visuellen Hover-Loop triggern (Button schrumpft → Cursor outside →
   Hover weg → Button wieder gross → Cursor in → Hover an → …).
*/

/* === Layout (ohne State-Pseudos, damit Mobile-Override gewinnen kann) === */
html body .dks-share__collapse-btn,
html body button.dks-share__collapse-btn {
	align-self: stretch;
	height: 14px;
	min-height: 14px;
	margin: 0 0 3px 0;
	padding: 0 !important;
	padding-block: 0 !important;
	padding-inline: 0 !important;
	border: 0 none transparent !important;
	border-width: 0 !important;
	border-color: transparent !important;
	border-radius: 4px;
	box-sizing: border-box !important;
	font-size: 9px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	text-shadow: none !important;
	outline: 0 !important;
	transform: none !important;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* === Color/Background/transform-Lock fuer ALLE States ===
   Hier mit !important durch alle Pseudo-Klassen — schuetzt vor Theme-
   Hover-Overrides (color/background/transform). */
html body .dks-share__collapse-btn,
html body .dks-share__collapse-btn:link,
html body .dks-share__collapse-btn:visited,
html body .dks-share__collapse-btn:hover,
html body .dks-share__collapse-btn:focus,
html body .dks-share__collapse-btn:focus-visible,
html body .dks-share__collapse-btn:active,
html body button.dks-share__collapse-btn,
html body button.dks-share__collapse-btn:hover,
html body button.dks-share__collapse-btn:focus,
html body button.dks-share__collapse-btn:focus-visible,
html body button.dks-share__collapse-btn:active {
	color: rgba(0, 0, 0, 0.7) !important;
	background-color: rgba(0, 0, 0, 0.10) !important;
	background-image: none !important;
	transform: none !important;
}

/* === Hover-Unterschied: nur Background etwas dunkler === */
html body .dks-share__collapse-btn:hover,
html body .dks-share__collapse-btn:focus,
html body .dks-share__collapse-btn:focus-visible,
html body button.dks-share__collapse-btn:hover,
html body button.dks-share__collapse-btn:focus,
html body button.dks-share__collapse-btn:focus-visible {
	background-color: rgba(0, 0, 0, 0.18) !important;
}

/* === SVG: Color forcieren + KEIN transform === */
html body .dks-share__collapse-btn svg,
html body .dks-share__collapse-btn:hover svg,
html body .dks-share__collapse-btn:focus svg,
html body .dks-share__collapse-btn:focus-visible svg,
html body .dks-share__collapse-btn:active svg {
	width: 12px !important;
	height: 12px !important;
	color: rgba(0, 0, 0, 0.7) !important;
	transform: none !important;
}
/* Belt-and-Suspenders: SVG mit `stroke="currentColor"` hart auf dunkelgrau */
html body .dks-share__collapse-btn svg[stroke="currentColor"],
html body .dks-share__collapse-btn:hover svg[stroke="currentColor"],
html body .dks-share__collapse-btn:focus svg[stroke="currentColor"],
html body .dks-share__collapse-btn:active svg[stroke="currentColor"] {
	stroke: rgba(0, 0, 0, 0.7) !important;
}

/* Auf Mobile-Bar: Collapse-Knopf RECHTS (order:99) statt links neben den Icons */
html body .dks-share--mobile .dks-share__collapse-btn {
	width: 14px !important;
	min-width: 14px !important;
	max-width: 14px !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	align-self: auto !important;
	margin: 0 !important;
	border-radius: 4px !important;
	flex-shrink: 0;
	order: 99;
}

/* Slide-Animation der Bar */
.dks-share--floating {
	transition: opacity .25s ease, transform .35s cubic-bezier(.45, .05, .55, .95);
	will-change: transform;
}
.dks-share--floating.is-collapsed {
	/* Bar komplett aus dem Viewport raus, Pull-Anker erscheint.
	   Y-Zentrierung (translateY(-50%)) muss erhalten bleiben. */
	transform: translate(100%, -50%);
	pointer-events: none;
}
.dks-share--floating.is-left.is-collapsed {
	/* Wenn Sidebar links angepinnt ist, faehrt sie nach links raus */
	transform: translate(-100%, -50%);
}
.dks-share--mobile {
	transition: transform .35s cubic-bezier(.45, .05, .55, .95);
	will-change: transform;
}
.dks-share--mobile.is-collapsed {
	transform: translateY(100%);
	pointer-events: none;
}

/* Pull-Anker: Default unsichtbar.
   Theme-Reset mit hoher Spezifitaet (html body als Anker) + !important auf
   display und Groessen-Properties — Elementor/Hello/Astra setzen oft
   `button { min-width: 50px }` etc., das wuerde unsere kompakten 14×30
   bzw. 30×14 Pull-Anker aufpumpen. */
html body .dks-share__pull,
html body button.dks-share__pull {
	position: fixed;
	z-index: 9992;
	display: none !important;
	border: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.55) !important;
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
	-webkit-appearance: none !important;
	appearance: none !important;
}
html body .dks-share__pull::after {
	/* Erweiterte Hitbox (15 px Luft drumherum) fuer komfortablen Touch/Klick */
	content: '';
	position: absolute;
	inset: -15px;
}
html body .dks-share__pull:hover,
html body .dks-share__pull:focus,
html body .dks-share__pull:focus-visible { background: rgba(255, 255, 255, 0.85) !important; }
html body .dks-share__pull svg {
	width: 14px !important;
	height: 14px !important;
	color: rgba(0, 0, 0, 0.7) !important;
	pointer-events: none;
}

/* Desktop-Pull: rechte Kante, 14×60 px (Hoehe verdoppelt vs. 1.18.1).
   `top` wird inline aus PHP gesetzt (matched die User-Setting der Bar) —
   daher KEIN top: 50% mehr im CSS. transform: translateY(-50%) bleibt
   damit der Anker auf der angegebenen Top-Linie zentriert sitzt. */
html body .dks-share__pull--desktop,
html body button.dks-share__pull--desktop {
	right: 0 !important;
	left: auto !important;
	transform: translateY(-50%);
	width: 14px !important;
	height: 60px !important;
	min-width: 14px !important;
	max-width: 14px !important;
	min-height: 60px !important;
	max-height: 60px !important;
	border-radius: 6px 0 0 6px !important;
}
/* Wenn Sidebar links angepinnt ist, Pull-Anker spiegeln */
html body .dks-share__pull--desktop.is-left {
	right: auto !important;
	left: 0 !important;
	border-radius: 0 6px 6px 0 !important;
}

/* Mobile-Pull: untere Kante, 60×14 px (Breite verdoppelt vs. 1.18.1) */
html body .dks-share__pull--mobile,
html body button.dks-share__pull--mobile {
	bottom: 0 !important;
	top: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	width: 60px !important;
	height: 14px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	min-height: 14px !important;
	max-height: 14px !important;
	border-radius: 6px 6px 0 0 !important;
	/* env() bewusst NICHT in margin-bottom - dasselbe Firefox-Android-Problem
	   wie bei der Bar-Padding: env() ist auf Firefox Android dynamisch
	   waehrend URL-Bar-Transitionen, was den Pull-Anker zeitweise nach oben
	   verschiebt. iOS-Home-Indicator-Spacing kommt im @supports
	   (-webkit-touch-callout: none)-Block unten zurueck. */
}

/* Pull-Anker sichtbar machen wenn Bar eingeklappt. !important MUSS hier auch
   stehen weil das `display: none` oben auch !important ist. */
html body .dks-share--floating.is-visible.is-collapsed + .dks-share__pull--desktop,
html body.dks-mobile-active .dks-share--mobile.is-collapsed + .dks-share__pull--mobile {
	display: flex !important;
	animation: dks-pull-fadein .25s ease-out .25s both;
}

/* Im Mobile-Mode: Desktop-Pull-Anker IMMER ausblenden (egal welcher State).
   Spiegelbild: im Desktop-Mode keine Mobile-Pulls — das passiert aber
   automatisch weil der Mobile-Pull-Selector body.dks-mobile-active braucht. */
html body.dks-mobile-active .dks-share__pull--desktop {
	display: none !important;
}
@keyframes dks-pull-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Bewegungsreduktion: Animationen abschalten */
@media (prefers-reduced-motion: reduce) {
	.dks-share--floating,
	.dks-share--mobile,
	.dks-share__pull,
	.dks-share__collapse-btn { transition: none; }
	.dks-share--floating.is-collapsed + .dks-share__pull--desktop,
	.dks-share--mobile.is-collapsed + .dks-share__pull--mobile { animation: none; }
}

/* iOS-Safari-only: env()-basierte Bottom-Spacings fuer Home-Indicator wieder
   rein. Auf iOS ist env(safe-area-inset-bottom) STATISCH (Home-Indicator-Hoehe,
   aendert sich nie waehrend Page-Navigation), also safe zu verwenden.
   -webkit-touch-callout ist iOS-/WebKit-spezifisch und schliesst Firefox/Chrome
   Android sauber aus - die haben das dynamische env-Bug-Problem das wir damit
   umgehen. */
@supports (-webkit-touch-callout: none) {
	.dks-share--mobile {
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
	}
	@media (max-width: 400px) {
		.dks-share--mobile {
			padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		}
	}
	html body .dks-share__pull--mobile,
	html body button.dks-share__pull--mobile {
		margin-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* Print: alle Share-Buttons ausblenden */
@media print {
	.dks-share,
	.dks-share__pull { display: none !important; }
}