/* Modul schwebeknoepfe — Handy zuerst, mit Rueckfallwerten fuer jedes Design */
.sk-oben {
  position: fixed; right: 26px; bottom: 84px; z-index: 60;
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--sk-pfeil, #163339); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.sk-oben.sk-sichtbar { opacity: 1; visibility: visible; }
.sk-oben:hover { filter: brightness(1.25); }
.sk-kontakt { position: fixed; right: 14px; bottom: 14px; z-index: 61; }
.sk-kontakt summary {
  list-style: none; cursor: pointer;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sk-knopf, #3b5fe0); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.sk-kontakt summary::-webkit-details-marker { display: none; }
.sk-kontakt .sk-zu { display: none; }
.sk-kontakt[open] .sk-zu { display: block; }
.sk-kontakt[open] .sk-offen { display: none; }
.sk-kontakt:not([open]) .sk-wahl { display: none; }
.sk-wahl { position: absolute; right: 0; bottom: 68px; display: flex; flex-direction: column; gap: 12px; }
.sk-kanal {
  width: 56px; height: 56px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.sk-kanal:hover { filter: brightness(1.1); }
.sk-telefon { background: #2f7d18; }
.sk-whatsapp { background: #1c8a38; }
.sk-mail { background: #3f6ad0; }
.sk-kontakt summary:focus-visible, .sk-kanal:focus-visible, .sk-oben:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #163339;
}
@media (min-width: 601px) {
  .sk-kontakt { right: 20px; bottom: 20px; }
  .sk-oben { right: 32px; bottom: 96px; }
}
@media (prefers-color-scheme: dark) {
  /* eigene Variablen fuer den Dunkelmodus: setzt eine Website nur --sk-pfeil (dunkel), bleibt der Pfeil sonst unsichtbar (dunkel auf dunkel) */
  .sk-oben { background: var(--sk-pfeil-dunkel, #e6edee); color: var(--sk-pfeil-text-dunkel, #10181a); }
  .sk-kontakt summary, .sk-kanal { box-shadow: 0 3px 10px rgba(0, 0, 0, .6); }
  .sk-kontakt summary:focus-visible, .sk-kanal:focus-visible, .sk-oben:focus-visible { box-shadow: 0 0 0 6px #000; }
}
@media (prefers-reduced-motion: reduce) { .sk-oben { transition: none; } }