/**
 * Teilen-Menü (KS-Standard, Vorlage Mediathek).
 *
 * CI-Farben literal, keine fremden Variablen (mehrere Plugins definieren
 * `--ks-primary` unterschiedlich und faerben sich sonst gegenseitig um).
 * Dark Mode ueber die gemeinsamen `--ks-*`-Tokens mit hellen Rueckfallwerten.
 */

.ksk-share{position:relative;display:inline-block}

/* ---- Der eine Knopf ---- */
.ksk-share__btn{
	display:inline-flex;align-items:center;gap:8px;
	font-family:'Yantramanav Regular','Yantramanav Light','Yantramanav',sans-serif;
	font-size:14.5px;line-height:1;
	padding:11px 18px;border-radius:11px;cursor:pointer;
	border:1px solid var(--ks-line,#dcd6ca) !important;
	background:transparent !important;
	color:var(--ks-text-muted,#6f7c86) !important;
	transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.ksk-share__btn svg{
	width:17px;height:17px;flex:0 0 auto;
	fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ksk-share__btn:hover,.ksk-share__btn:focus-visible{
	background:#326569 !important;color:#fff !important;border-color:#326569 !important}
.ksk-share.is-offen .ksk-share__btn{
	background:#253d54 !important;color:#fff !important;border-color:#253d54 !important}

/* ---- Die Liste ---- */
.ksk-share__list{
	position:absolute;z-index:40;min-width:238px;
	top:calc(100% + 8px);left:0;
	background:var(--ks-surface,#fff);
	border:1px solid var(--ks-line,#e4dfd4);
	border-radius:13px;padding:7px;
	box-shadow:0 14px 34px rgba(20,32,40,.17)}

/* 🔴 Ohne diese Zeile schlaegt eine `display`-Regel das `hidden`-Attribut.
   Genau diese Falle hatte das Plugin in 0.6.1 schon einmal. */
.ksk-share__list[hidden]{display:none !important}

/* Nach rechts ausrichten, wenn das Menue sonst aus dem Bild liefe. */
.ksk-share--rechts .ksk-share__list{left:auto;right:0}

.ksk-share__item{
	display:flex;align-items:center;gap:11px;width:100%;
	padding:10px 12px;border-radius:9px;
	font-family:'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
	font-size:14.5px;line-height:1.3;text-align:left;
	text-decoration:none;cursor:pointer;
	border:0 !important;background:transparent !important;box-shadow:none !important;
	color:var(--ks-text,#253d54) !important;
	transition:background-color .18s ease}
.ksk-share__item svg{
	width:18px;height:18px;flex:0 0 auto;
	fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
	color:var(--ks-text-muted,#6f7c86)}
.ksk-share__item:hover,.ksk-share__item:focus-visible{
	background:var(--ks-surface-raised,#f2efe8) !important;
	color:#253d54 !important}
.ksk-share__item:hover svg,.ksk-share__item:focus-visible svg{color:#326569}

.ksk-share__sep{display:block;height:1px;margin:6px 10px;
	background:var(--ks-line,#e4dfd4)}

/* Rueckmeldung nach dem Kopieren, ersetzt kurz die Beschriftung. */
.ksk-share__item.is-ok{color:#326569 !important}
.ksk-share__item.is-ok svg{color:#326569}

/* ---- In der Kachel: schmaler, damit die Karte nicht auseinanderfaellt ---- */
.ksk-share--card{display:block;margin-top:8px}
.ksk-share--card .ksk-share__btn{width:100%;justify-content:center}
.ksk-share--card .ksk-share__list{left:0;right:0;min-width:0}


/* ---- Touch-Ziele: Geraet ODER schmaler Bildschirm ----
   Beide Bedingungen zusammen, weil jede fuer sich einen blinden Fleck hat:
   `pointer:coarse` verpasst das Tablet mit Maus, die Breite verpasst das
   Tablet im Querformat (Erkenntnis aus dem Austausch mit der Mediathek). */
@media (hover:none) and (pointer:coarse), (max-width:768px){
	.ksk-share__btn{min-height:44px;padding-block:13px}
	.ksk-share__item{min-height:44px;padding-block:12px}
	.ksk-share__list{min-width:0;left:0;right:0}
}

/* Touch hat kein Hover: Fuellung auch beim Antippen zeigen. */
@media (hover:none){
	.ksk-share__item:active{background:var(--ks-surface-raised,#f2efe8) !important}
}

/* ---- Symbol-Wrapper (Struktur wie Mediathek: span.__icon > svg) ---- */
.ksk-share__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ksk-share__btn .ksk-share__icon svg{width:17px;height:17px}
.ksk-share__item .ksk-share__icon svg{width:18px;height:18px}
.ksk-share__icon svg{
	fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ksk-share__item .ksk-share__icon{color:var(--ks-text-muted,#6f7c86)}
.ksk-share__item:hover .ksk-share__icon,
.ksk-share__item:focus-visible .ksk-share__icon{color:#326569}