/* ==========================================================================
   Schnellzugriffe  |  drei schwebende Buttons am rechten Fensterrand
   --------------------------------------------------------------------------
   Markup und Inhalte: inc/schnellzugriff.php

   AUFBAU
   Die Leiste haengt fix am rechten Rand und steht als Stapel vertikal in der
   Mitte des Fensters; bis 767px wird daraus eine Reihe nebeneinander in der
   unteren linken Ecke. Jeder Button ist ein zweispaltiges Grid:

       +--------+---------------------+
       |  Icon  |     Beschriftung    |
       +--------+---------------------+
        --sz-size          0fr / 1fr

   Die linke Spalte ist immer --sz-size breit und quadratisch, die rechte
   Spalte ist im Ruhezustand 0 und faehrt beim Hover auf. Der Trick dahinter:
   in einem Container, der sich nach seinem Inhalt richtet, wird eine Spalte
   mit 0fr genau 0 breit und eine mit 1fr genau so breit wie ihr Inhalt.
   Damit passt sich jeder Button von allein an die Laenge seiner Beschriftung
   an - "Barrierefrei" wird breiter als "FAQ", ohne dass irgendwo eine feste
   Breite gepflegt werden muss.

   Ausgefahren wird immer zur Fenstermitte hin: am rechten Rand bleibt die
   rechte Kante der Buttons stehen und die Beschriftung waechst nach links,
   in der unteren linken Ecke ist es umgekehrt.

   Browser ohne animierbares grid-template-columns (aeltere Fassungen von
   Safari und Firefox) zeigen die Beschriftung ohne Uebergang - die Funktion
   bleibt also erhalten, nur die Bewegung fehlt.

   BEDIENUNG
   Hover greift nur auf Geraeten mit echtem Zeiger (@media (hover: hover)).
   Auf Touchscreens wuerde sonst der erste Tipp nur die Beschriftung zeigen
   statt dem Link zu folgen. Fuer die Tastatur uebernimmt :focus-visible
   dieselbe Darstellung, damit auch dort zu sehen ist, wohin der Button
   fuehrt.

   TELEFON
   Zwei Buttons stehen im Markup, sichtbar ist immer nur einer: bis 767px der
   Link auf die Rufnummer, darueber der Link auf die Kontaktseite. Die
   Umschaltung ueber display sorgt dafuer, dass Screenreader ebenfalls nur den
   gerade gueltigen Button vorfinden.
   ========================================================================== */


/* ==========================================================================
   1) Stellschrauben - hier und nur hier werden Groessen geaendert
   ========================================================================== */

.sww-schnellzugriff {
    /* ---- Groessen ---- */
    --sz-size: 56px;            /* Kantenlaenge im Ruhezustand */
    --sz-icon: 30px;            /* Zeichnung im Button */
    --sz-radius: 5px;
    --sz-gap: 8px;              /* Abstand zwischen den Buttons */
    --sz-offset: 12px;          /* Abstand zum Fensterrand */
    --sz-label-pad: 18px;       /* Luft rechts neben der Beschriftung */

    /* ---- Bewegung ---- */
    --sz-speed: .28s;
    --sz-ease: cubic-bezier(.25, .8, .3, 1);

    /* ---- Farben ---- */
    --sz-icon-color: var(--e-global-color-secondary);
    --sz-label-color: var(--e-global-color-ffffff);
    --sz-shadow: 0 3px 6px rgba(0, 0, 0, .16);

    /* ---- Ebene ----
       Ueber dem Seiteninhalt, aber unter Popups und Overlays. */
    --sz-z: 9990;
}

/* Tablet */
@media (max-width: 1024px) {
    .sww-schnellzugriff {
        --sz-size: 52px;
        --sz-icon: 28px;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .sww-schnellzugriff {
        --sz-size: 48px;
        --sz-icon: 26px;
        --sz-gap: 8px;
        --sz-offset: 12px;
    }
}


/* ==========================================================================
   2) Leiste - Position und Stapel
   ========================================================================== */

/* pointer-events: none, weil die Leiste bei ausgefahrener Beschriftung
   breiter ist als die Buttons selbst - ohne diese Zeile faengt die leere
   Flaeche daneben Klicks ab, die dem Seiteninhalt gelten. Die Links stellen
   das fuer sich wieder an. */
.sww-schnellzugriff {
    position: fixed;
    top: 50%;
    right: var(--sz-offset);
    transform: translateY(-50%);
    z-index: var(--sz-z);
    max-width: calc(100vw - var(--sz-offset) * 2);
    pointer-events: none;
}

.sww-schnellzugriff__liste {
    display: flex;
    flex-direction: column;
    align-items: flex-end;      /* rechte Kante steht, ausgefahren wird nach links */
    gap: var(--sz-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sww-schnellzugriff__item {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.sww-schnellzugriff__item::before,
.sww-schnellzugriff__item::marker {
    content: none;              /* Aufzaehlungszeichen aus Theme-CSS abraeumen */
}

/* ---------- Smartphone: unten links, nebeneinander ----------
   Aus dem Stapel am rechten Rand wird eine Reihe in der unteren linken Ecke.
   Ausgefahren wird nach rechts - das passt zu den Spalten des Buttons, Icon
   links und Text rechts, und laeuft nicht aus dem Bild: drei Buttons plus die
   laengste Beschriftung bleiben auch auf schmalen Geraeten innerhalb der
   Fensterbreite.

   flex: 0 0 auto haelt die Icons quadratisch, falls die Reihe einmal an die
   max-width der Leiste stossen sollte - gestauchte Icons waeren schlimmer als
   eine Beschriftung, die nicht ganz ausfaehrt.

   env(safe-area-inset-*) haelt die Leiste auf Geraeten mit abgerundeten
   Ecken und Gestenbalken frei; ohne solche Bereiche ist der Wert 0. */
@media (max-width: 767px) {
    .sww-schnellzugriff {
        top: auto;
        right: auto;
        bottom: calc(var(--sz-offset) + env(safe-area-inset-bottom, 0px));
        left: calc(var(--sz-offset) + env(safe-area-inset-left, 0px));
        transform: none;
    }

    .sww-schnellzugriff__liste {
        flex-direction: row;
        align-items: flex-end;      /* Unterkanten buendig */
    }

    .sww-schnellzugriff__item {
        flex: 0 0 auto;
    }
}


/* ==========================================================================
   3) Button
   ========================================================================== */

.sww-schnellzugriff__link {
    display: grid;
    grid-template-columns: var(--sz-size) 0fr;
    align-items: center;
    min-height: var(--sz-size);
    border-radius: var(--sz-radius);
    background-color: var(--sz-bg);
    box-shadow: var(--sz-shadow);
    pointer-events: auto;
    transition: grid-template-columns var(--sz-speed) var(--sz-ease);
}

/* Das Kit von Elementor faerbt und unterstreicht Links ueber
   .elementor-kit-<id> a (0-2-0) und jeweils eigene Regeln fuer :hover - das
   schlaegt eine Angabe am Button (0-1-0) und wuerde je nach Zustand eine
   andere Farbe zeigen. Fuer die Unterstreichung hilft nur mehr Spezifitaet,
   weil sie sich an Kindelementen nicht zuruecknehmen laesst.

   Die FARBEN loesen die beiden Regeln weiter unten sauberer: Icon und
   Beschriftung tragen sie selbst. Eine Regel direkt am Element gewinnt immer
   gegen einen geerbten Wert, ganz gleich wie spezifisch dessen Regel ist. */
.sww-schnellzugriff .sww-schnellzugriff__link,
.sww-schnellzugriff .sww-schnellzugriff__link:hover,
.sww-schnellzugriff .sww-schnellzugriff__link:focus,
.sww-schnellzugriff .sww-schnellzugriff__link:active {
    text-decoration: none;
}

/* Farbe der Kachel, gesetzt ueber die Klasse am <li> */
.sww-schnellzugriff__item--farbe-primary {
    --sz-bg: var(--e-global-color-primary);
}

.sww-schnellzugriff__item--farbe-accent {
    --sz-bg: var(--e-global-color-accent);
}

/* ---------- Icon ----------
   color steht hier und nicht am Button, siehe Kommentar in Abschnitt 3:
   so bleibt die Zeichnung in jedem Zustand dunkelgruen, auch wenn das Kit
   den Link darum herum einfaerbt. Die Pfade folgen ueber currentColor. */
.sww-schnellzugriff__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sz-size);
    height: var(--sz-size);
    color: var(--sz-icon-color);
}

.sww-schnellzugriff__icon svg {
    display: block;
    width: var(--sz-icon);
    height: var(--sz-icon);
    fill: currentColor;
}

/* ---------- Beschriftung ----------
   min-width: 0 loest die Mindestbreite, die ein Grid-Element sonst von
   seinem Inhalt bekommt - ohne diese Zeile liesse sich die Spalte nicht auf
   0 zusammenziehen. */
.sww-schnellzugriff__label {
    min-width: 0;
    overflow: hidden;
}

.sww-schnellzugriff__text {
    display: block;
    padding-right: var(--sz-label-pad);
    padding-left: 2px;
    color: var(--sz-label-color);
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    white-space: nowrap;
    opacity: 0;
    transition: opacity calc(var(--sz-speed) * .7) ease;
}


/* ==========================================================================
   4) Ausgefahrener Zustand
   ========================================================================== */

@media (hover: hover) {
    .sww-schnellzugriff__link:hover {
        grid-template-columns: var(--sz-size) 1fr;
    }

    .sww-schnellzugriff__link:hover .sww-schnellzugriff__text {
        opacity: 1;
        transition-delay: calc(var(--sz-speed) * .25);
    }
}

/* Tastatur: dieselbe Darstellung, zusaetzlich ein sichtbarer Rahmen. */
.sww-schnellzugriff__link:focus-visible {
    grid-template-columns: var(--sz-size) 1fr;
    outline: 2px solid var(--e-global-color-secondary);
    outline-offset: 3px;
}

.sww-schnellzugriff__link:focus-visible .sww-schnellzugriff__text {
    opacity: 1;
}


/* ==========================================================================
   5) Telefon-Button: Kontaktseite oder Rufnummer
   ========================================================================== */

.sww-schnellzugriff__item--nur-mobil {
    display: none;
}

@media (max-width: 767px) {
    .sww-schnellzugriff__item--nur-desktop {
        display: none;
    }

    .sww-schnellzugriff__item--nur-mobil {
        display: block;
    }
}


/* ==========================================================================
   6) Sonderfaelle
   ========================================================================== */

/* Bei reduzierter Bewegung erscheint die Beschriftung ohne Uebergang. */
@media (prefers-reduced-motion: reduce) {
    .sww-schnellzugriff__link,
    .sww-schnellzugriff__text {
        transition: none;
    }
}

/* Sehr flache Fenster: die Leiste wuerde den Inhalt zudecken. */
@media (max-height: 420px) {
    .sww-schnellzugriff {
        display: none;
    }
}

@media print {
    .sww-schnellzugriff {
        display: none;
    }
}


/* ==========================================================================
   7) Schwebendes Icon von OneTap ausblenden

   Den Zugang zur Toolbar uebernimmt der dritte Schnellzugriff, das eigene
   Icon des Plugins soll daneben nicht auch noch am Rand stehen.

   Ausgeblendet wird nur .onetap-container-toggle - der Rahmen um das
   schwebende Icon. Die Toolbar selbst ist ein eigenes Element
   (nav.onetap-accessibility) und bleibt unberuehrt, laesst sich also
   weiterhin oeffnen.

   Das Icon bleibt dabei bewusst im Dokument und wird nur unsichtbar. Das ist
   der verlaesslichere Weg: schaltet man die Anzeige stattdessen in den
   Plugin-Einstellungen fuer alle Geraete ab, kann es je nach Fassung sein,
   dass das Plugin den Schalter gar nicht erst ausgibt - und damit unter
   Umstaenden auch die Bruecke fehlt, ueber die "#onetap-toolbar" die Toolbar
   aufruft.

   !important, weil das Plugin seine eigenen Regeln fuer den Schalter
   ebenfalls mit !important ausgibt.

   Sollte eine kuenftige Plugin-Fassung andere Klassen verwenden, faellt das
   sofort auf: das alte Icon steht wieder da. Dann hier den Namen des
   Rahmens nachziehen.
   ========================================================================== */

.onetap-container-toggle {
    display: none !important;
}