/* =========================================================
Musikschule Cuxhaven — „Teilen“-Button (eigenständiges Modul)
Einbinden (zwei Zeilen, sonst nichts):
Der Button wird von share.js selbst erzeugt — eigenes Markup ist
optional (siehe Kopf von share.js).
Stellschrauben (in :root oder pro Seite überschreibbar):
--ms-share-top Abstand von oben
--ms-share-right Abstand vom rechten Rand
Beide setzt share.js zur Laufzeit so, dass der Button
buendig unter dem Theme-Umschalter (.theme-fab) steht.
Mit gelten allein die Werte
aus dieser Datei.
--ms-share-size Durchmesser
========================================================= */
:root{
--ms-share-top: 132px;
--ms-share-right: 20px;
--ms-share-size: 46px;
}
/* ---------- Button ---------- */
.ms-share{
position: fixed;
top: var(--ms-share-top);
right: var(--ms-share-right);
z-index: 80;
width: var(--ms-share-size);
height: var(--ms-share-size);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line, #DDCDB6);
border-radius: 50%;
background: var(--paper, #F6EFE4);
color: var(--brick, #A6432B);
cursor: pointer;
box-shadow: 0 6px 18px rgba(42,33,27,.16);
transition: background-color .2s ease, color .2s ease,
border-color .2s ease, transform .15s ease,
opacity .2s ease, visibility .2s ease;
}
.ms-share:hover{
background: var(--brick, #A6432B);
color: var(--paper, #F6EFE4);
border-color: var(--brick, #A6432B);
}
.ms-share:focus-visible{
outline: 2px solid var(--brick, #A6432B);
outline-offset: 3px;
}
.ms-share:active{ transform: scale(.94); }
.ms-share svg{ width: 21px; height: 21px; display: block; }
/* kurze Rückmeldung direkt am Button, wenn kopiert wurde */
.ms-share.is-done{
background: var(--brick, #A6432B);
color: var(--paper, #F6EFE4);
border-color: var(--brick, #A6432B);
}
/* ---------- Bestätigung („Link kopiert!“) ---------- */
.ms-share-toast{
position: fixed;
top: calc(var(--ms-share-top) + var(--ms-share-size) + 10px);
right: var(--ms-share-right);
z-index: 80;
max-width: min(72vw, 18rem);
padding: .45rem .8rem;
border: 1px solid var(--line, #DDCDB6);
border-radius: 999px;
background: var(--paper-2, #EFE4D2);
color: var(--ink, #2A211B);
font-family: "Mulish", system-ui, -apple-system, sans-serif;
font-size: var(--fs-small, .92rem);
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(42,33,27,.16);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
pointer-events: none;
}
.ms-share-toast.show{ opacity: 1; visibility: visible; transform: none; }
/* ---------- Dunkelmodus ---------- */
[data-theme="dark"] .ms-share{ box-shadow: 0 6px 18px rgba(0,0,0,.45); }
[data-theme="dark"] .ms-share-toast{ box-shadow: 0 6px 18px rgba(0,0,0,.45); }
/* ---------- Mobil ---------- */
@media (max-width: 480px){
:root{ --ms-share-right: 14px; --ms-share-size: 42px; }
.ms-share svg{ width: 19px; height: 19px; }
}
/* Bei geöffnetem Mobil-Menü ausblenden, damit nichts überlappt.
Browser ohne :has() zeigen den Button weiter — unkritisch. */
@media (max-width: 860px){
body:has(.site-header.nav-open) .ms-share,
body:has(.site-header.nav-open) .ms-share-toast{
opacity: 0; visibility: hidden;
}
}
/* ---------- Barrierefreiheit ---------- */
@media (prefers-reduced-motion: reduce){
.ms-share, .ms-share-toast{ transition: opacity .2s, visibility .2s; }
.ms-share:active{ transform: none; }
}
@media print{ .ms-share, .ms-share-toast{ display: none !important; } }