/***
 * Yavi Demo — Farbumschalter
 *
 * Bewusst reines CSS, kein SCSS: die SCSS-Kompilierung von bootstrap_package
 * gehoert dem Theme. Eine Demo-Beigabe soll sich dort nicht einhaengen, sonst
 * waere sie doch wieder Teil des Theme-Builds — und genau das soll sie nicht
 * sein. Alle Werte stehen als Custom Properties am Widget selbst.
 ***/

.colorswitcher-scrim,
.colorswitcher,
.colorswitcher-trigger {
  --cs-zindex: var(--overlay-zindex, 1045);
  --cs-width: 340px;
  --cs-trigger-inset: 22px;
  --cs-duration: 0.45s;
  --cs-easing: cubic-bezier(0.22, 1, 0.3, 1);
  --cs-bg: #01193f;
  --cs-text: #ffffff;
  --cs-muted: rgba(255, 255, 255, 0.55);
  --cs-muted-strong: rgba(255, 255, 255, 0.82);
  --cs-border: rgba(255, 255, 255, 0.14);
  --cs-hover: rgba(255, 255, 255, 0.05);
  --cs-hover-strong: rgba(255, 255, 255, 0.1);
  --cs-scrim: rgba(1, 25, 63, 0.45);
}

/* Ausloeser: Kreis unten rechts, schiebt sich mit dem Panel mit.
   --cs-trigger-bottom und --cs-trigger-right setzt colorswitcher.js, wenn ein
   fixes Element des Themes (Stickybar, Nach-oben-Knopf) denselben Platz
   beansprucht. Ist dort frei, bleibt es bei --cs-trigger-inset. */
.colorswitcher-trigger {
  position: fixed;
  bottom: var(--cs-trigger-bottom, var(--cs-trigger-inset));
  right: var(--cs-trigger-right, var(--cs-trigger-inset));
  z-index: var(--cs-zindex);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--theme-primary, #0d2a5c);
  color: var(--theme-secondary, #dea54e);
  box-shadow: 0 6px 22px rgba(10, 26, 52, 0.28);
  transition: right var(--cs-duration) var(--cs-easing), background 0.3s ease;
}

.colorswitcher-trigger svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Neben das offene Panel, nicht darauf. min() statt --cs-width, weil das
   Panel selbst bei 88vw gedeckelt ist — sonst schoebe sich der Kreis auf
   schmalen Geraeten aus dem Bild. */
body.colorswitcher-open .colorswitcher-trigger {
  right: calc(min(var(--cs-width), 88vw) + var(--cs-trigger-inset));
}

.colorswitcher-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cs-zindex) - 10);
  /* background: var(--cs-scrim); */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

body.colorswitcher-open .colorswitcher-scrim {
  opacity: 1;
  pointer-events: auto;
}

.colorswitcher {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--cs-zindex);
  display: flex;
  flex-direction: column;
  width: var(--cs-width);
  max-width: 88vw;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background: var(--cs-bg);
  color: var(--cs-text);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.3);

  /* Geschlossen zusaetzlich per visibility ausblenden, nicht nur
     wegtransformieren: sonst blieben alle Bedienelemente im Tab-Fokus,
     waehrend das Panel unsichtbar ist (WCAG 4.1.2). Die Umschaltung wird
     beim Schliessen um die Transformdauer verzoegert, sonst verschwindet
     das Panel schlagartig statt herauszugleiten. */
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform var(--cs-duration) var(--cs-easing),
    visibility 0s var(--cs-duration);
}

body.colorswitcher-open .colorswitcher {
  visibility: visible;
  transform: translateX(0);
  transition:
    transform var(--cs-duration) var(--cs-easing),
    visibility 0s;
}

.colorswitcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--cs-border);
}

.colorswitcher-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.colorswitcher-subtitle {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--cs-muted);
}

.colorswitcher-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--cs-border);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s ease;
}

.colorswitcher-close svg {
  width: 14px;
  height: 14px;
}

.colorswitcher-close:hover {
  background: var(--cs-hover);
}

.colorswitcher-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px 24px 40px;
}

.colorswitcher-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.colorswitcher-legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-secondary, #dea54e);
}

.colorswitcher-hint {
  margin-top: -4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.colorswitcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.colorswitcher-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 11px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: var(--cs-hover);
  border: 1.5px solid var(--cs-border);
  color: inherit;
  font: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.colorswitcher-swatch:hover {
  background: var(--cs-hover-strong);
  transform: translateY(-2px);
}

.colorswitcher-swatch.is-active {
  border-color: var(--theme-secondary, #dea54e);
}

.colorswitcher-swatch-colors {
  display: flex;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
}

.colorswitcher-swatch-colors::before,
.colorswitcher-swatch-colors::after {
  content: "";
  display: block;
}

.colorswitcher-swatch-colors::before {
  flex: 1.6;
  background: var(--sw-a);
}

.colorswitcher-swatch-colors::after {
  flex: 1;
  background: var(--sw-b);
}

.colorswitcher-swatch-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cs-muted-strong);
}

.colorswitcher-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--cs-border);
  color: var(--cs-muted-strong);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
}

.colorswitcher-reset svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.colorswitcher-reset:hover {
  background: var(--cs-hover);
  color: var(--cs-text);
}

.colorswitcher-reset.is-active {
  border-color: var(--theme-secondary, #dea54e);
  color: var(--cs-text);
}

/* Eigene Farben */

.colorswitcher-custom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.colorswitcher-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px;
  border-radius: 12px;
  background: var(--cs-hover);
  border: 1.5px solid var(--cs-border);
}

.colorswitcher-field-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.colorswitcher-field-label {
  flex: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cs-muted-strong);
}

.colorswitcher-preview {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  border: 1px solid var(--cs-border);
}

.colorswitcher-hex {
  width: 10ch;
  min-width: 0;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--cs-hover-strong);
  border: 1px solid var(--cs-border);
  color: var(--cs-text);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-transform: lowercase;
}

.colorswitcher-slider {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 9px;
}

.colorswitcher-slider-label {
  font-size: 11px;
  color: var(--cs-muted);
}

/* Der Regler wird komplett selbst gezeichnet, damit die Spur den Verlauf
   zeigen kann. --cs-track setzt colorswitcher.js je nach aktueller Farbe;
   der Farbtonregler behaelt den festen Regenbogen. */
.colorswitcher-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 0;
  background: none;
  cursor: pointer;
}

.colorswitcher-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--cs-track, var(--cs-hover-strong));
  border: 1px solid var(--cs-border);
}

.colorswitcher-slider input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--cs-track, var(--cs-hover-strong));
  border: 1px solid var(--cs-border);
}

.colorswitcher-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--cs-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.colorswitcher-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--cs-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.colorswitcher-slider input[data-colorswitcher-axis="hue"] {
  --cs-track: linear-gradient(90deg,
    #ff0000 0%, #ffff00 17%, #00ff00 33%,
    #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.colorswitcher-output {
  min-width: 4ch;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--cs-hover-strong);
  border: 1px solid var(--cs-border);
  color: var(--cs-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Menue aufklappen, solange seine Farbe bearbeitet wird.
 *
 * !important ist hier die richtige Wahl und nicht Bequemlichkeit: das Theme
 * versteckt seine Menues ueber opacity/visibility auf mehreren
 * Verschachtelungsebenen mit hoher Spezifitaet, und die Attribute stehen nur
 * waehrend der Bearbeitung im DOM. Ohne das muesste die Demo Selektoren des
 * Themes nachbauen und braeche beim naechsten Umbau dort.
 *
 * pointer-events: none — das aufgeklappte Menue ist eine Vorschau, kein
 * Bedienelement. Es soll weder Klicks abfangen noch sich schliessen, weil die
 * Maus es verlaesst. */
[data-colorswitcher-peek] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  /* Zugeklappt steht hier scaleY(0) — ohne das bleibt das Menue eine Linie,
     egal wie sichtbar es sonst gemacht wird. Und ohne Uebergang, weil das hier
     eine Vorschau am Regler ist: wer an der Rundung zieht, will das Ergebnis
     sehen und nicht jedes Mal ein Aufklappen abwarten. */
  transform: none !important;
  transition: none !important;
}

[data-colorswitcher-peek] .dropdown-item,
[data-colorswitcher-peek] a {
  opacity: 1 !important;
  transform: none !important;
}

/* Schriften */

.colorswitcher-fonts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* --cs-font setzt das Template je Knopf. Ueber die Custom Property statt
   direkt als font-family, damit das CSS im Stylesheet bleibt und nicht als
   Fluid-Fragment im style-Attribut steht. */
.colorswitcher-font {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: var(--cs-hover);
  border: 1.5px solid var(--cs-border);
  color: inherit;
  font-family: var(--cs-font, inherit);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.colorswitcher-font:hover {
  background: var(--cs-hover-strong);
  transform: translateY(-2px);
}

.colorswitcher-font.is-active {
  border-color: var(--theme-secondary, #dea54e);
}

.colorswitcher-font-name {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--cs-muted-strong);
  /* Der Name darf umbrechen, "Playfair Display" passt sonst nicht in die
     halbe Spalte. Das Aa daneben behaelt seine Breite. */
  min-width: 0;
}

.colorswitcher-font-sample {
  flex: none;
  font-size: 19px;
  line-height: 1;
  color: var(--theme-secondary, #dea54e);
}

/* Schriftstaerke der Ueberschriften */

.colorswitcher-weights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.colorswitcher-weight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: var(--cs-hover);
  border: 1.5px solid var(--cs-border);
  color: inherit;
  font: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.colorswitcher-weight:hover {
  background: var(--cs-hover-strong);
  transform: translateY(-2px);
}

.colorswitcher-weight.is-active {
  border-color: var(--theme-secondary, #dea54e);
}

/* Die Probe zeigt die Ueberschriftenschrift, nicht die des Panels: eine
   Staerke laesst sich nur an der Schrift beurteilen, die sie spaeter traegt. */
.colorswitcher-weight-sample {
  flex: none;
  font-family: var(--font-family, inherit);
  font-weight: var(--cs-weight, 400);
  font-size: 19px;
  line-height: 1;
  color: var(--theme-secondary, #dea54e);
}

.colorswitcher-weight-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cs-muted-strong);
}

/* Buttonstil */

.colorswitcher-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.colorswitcher-choice-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  padding: 11px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: var(--cs-hover);
  border: 1.5px solid var(--cs-border);
  color: inherit;
  font: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.colorswitcher-choice-option:hover {
  background: var(--cs-hover-strong);
  transform: translateY(-2px);
}

.colorswitcher-choice-option.is-active {
  border-color: var(--theme-secondary, #dea54e);
}

/* Die Probe zeigt die Farben dieser Website, nicht Demo-Farben: beide Werte
   haengen an --theme-secondary und rechnen bei jedem Preset mit. */
.colorswitcher-choice-sample {
  display: block;
  height: 30px;
  border-radius: 7px;
}

[data-colorswitcher-buttonstyle="gradient"] .colorswitcher-choice-sample {
  background: linear-gradient(135deg,
    var(--btn-secondary-start, #dea54e) 0%,
    var(--btn-secondary-end, #f0c987) 100%);
}

[data-colorswitcher-buttonstyle="solid"] .colorswitcher-choice-sample {
  background: var(--btn-secondary-start, #dea54e);
}

.colorswitcher-choice-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cs-muted-strong);
}

/* Einfarbige Buttons.
 *
 * Die Klasse sitzt an <html>, nicht an <body>: das Head-Skript gegen FOUC
 * laeuft, bevor es einen body gibt.
 *
 * Bewusst background statt einer Umdefinition von --btn-*-end: yavi_lucerne
 * setzt background-image: var(--btn-gradient-primary), und dieser Verlauf ist
 * an :root bereits ausgerechnet — ein Ueberschreiben von --btn-primary-end am
 * Button selbst kaeme dort zu spaet und der Verlauf bliebe stehen.
 *
 * Die Farbe ist jeweils der Anfang des Verlaufs, den der Betreiber ohnehin
 * gewaehlt hat; auch der Hover behaelt seine eigene. Sonst wuerde "einfarbig"
 * den Hover-Wechsel mit abschalten. */
:root.yavi-buttons-solid .btn-primary,
:root.yavi-buttons-solid .btn-default {
  background: var(--btn-primary-start, var(--theme-primary, #0d2a5c));
}

:root.yavi-buttons-solid .btn-primary:hover,
:root.yavi-buttons-solid .btn-primary.active,
:root.yavi-buttons-solid .btn-default:hover,
:root.yavi-buttons-solid .btn-default.active {
  background: var(--btn-primary-hover-start, var(--theme-primary, #0d2a5c));
}

:root.yavi-buttons-solid .btn-secondary {
  background: var(--btn-secondary-start, var(--theme-secondary, #dea54e));
}

:root.yavi-buttons-solid .btn-secondary:hover,
:root.yavi-buttons-solid .btn-secondary.active {
  background: var(--btn-secondary-hover-start, var(--theme-secondary, #dea54e));
}

:root.yavi-buttons-solid .btn-cta {
  background: var(--btn-cta-start, var(--theme-secondary, #dea54e));
}

:root.yavi-buttons-solid .btn-cta:hover,
:root.yavi-buttons-solid .btn-cta.active {
  background: var(--btn-cta-hover-start, var(--theme-secondary, #dea54e));
}

.colorswitcher-contrast {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cs-muted);
}

.colorswitcher-contrast.is-weak {
  color: #ffb4a8;
  font-weight: 600;
}

.colorswitcher-export {
  width: 100%;
  min-height: 150px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cs-hover-strong);
  border: 1px solid var(--cs-border);
  color: var(--cs-text);
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  /* Kein Umbruch: die Zeilen sind Deklarationen, die beim Kopieren als solche
     erkennbar bleiben sollen. Lieber seitlich scrollen als mittendrin brechen. */
  white-space: pre;
  overflow: auto;
  resize: vertical;
  tab-size: 2;
}

.colorswitcher-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--cs-muted);
}

/* Fokusring auf dunkler Flaeche: heller Kern, dunkler Halo. Das Theme setzt
   diese Tokens, die Demo nutzt sie nur — falls yavi_core sie nicht liefert,
   greifen die Rueckfallwerte. */
.colorswitcher :is(button, a[href], input):focus-visible {
  outline: var(--focus-ring-width, 3px) solid #ffffff;
  outline-offset: var(--focus-ring-offset, 2px);
  box-shadow: 0 0 0 calc(var(--focus-ring-width, 3px) + var(--focus-ring-offset, 2px)) #0d2a5c;
}

@media (prefers-reduced-motion: reduce) {
  .colorswitcher,
  .colorswitcher-trigger,
  .colorswitcher-scrim,
  .colorswitcher-swatch,
  .colorswitcher-choice-option,
  .colorswitcher-font,
  .colorswitcher-weight {
    transition: none;
  }
}

/* Logo folgt der Palette — ausschliesslich hier in der Demo. Im Core waere das
   ein Fehler: das Logo eines Kunden darf sich nicht mit einer Theme-Einstellung
   umfaerben.

   Genutzt werden die abgeleiteten Gold-Token, nicht --theme-secondary direkt.
   Sie entstehen per oklch aus der Sekundaerfarbe und treffen die Farben der
   Zeichnung — bei der Gold-Palette bleibt das Bild damit unveraendert.

   Der Y-Bogen traegt einen Verlauf. Ein fill auf dem Pfad wuerde ihn durch eine
   flache Farbe ersetzen, deshalb laufen hier die beiden stop-color.

   Gebunden an den Inline-Style am <html>: den schreibt der Umschalter erst,
   wenn jemand etwas auswaehlt, und entfernt ihn beim Zuruecksetzen. Ohne diese
   Bedingung faerbte die Demo das Logo auch unberuehrt um — die abgeleiteten
   Token treffen die Zeichnung nah, aber nicht auf den Punkt. */
html[style*="--theme-secondary"] .navbar-brand-logo-normal .logo-text-yavi,
html[style*="--theme-secondary"] .navbar-brand-logo-normal .logo-text-lucerne,
html[style*="--theme-secondary"] .navbar-brand-logo-inverted .logo-text-lucerne {
  fill: var(--color-gold, #d5901e);
}

html[style*="--theme-secondary"] .navbar-brand-logo-normal .logo-stop-light,
html[style*="--theme-secondary"] .navbar-brand-logo-inverted .logo-stop-light {
  stop-color: var(--btn-secondary-end, #e1bb76);
}

html[style*="--theme-secondary"] .navbar-brand-logo-normal .logo-stop-dark,
html[style*="--theme-secondary"] .navbar-brand-logo-inverted .logo-stop-dark {
  stop-color: var(--btn-secondary-start, #d38a12);
}

/* Hinweis am Ausloeser
   ---------------------------------------------------------------------------
   Der Regler sitzt unten rechts und wird uebersehen. Ein Pulsring plus eine
   Sprechblase holen ihn einmal ins Blickfeld — einmal, nicht dauernd: wer das
   Werkzeug kennt, dem waere es ab dem zweiten Besuch nur noch im Weg. Das
   Merken uebernimmt colorswitcher.js.

   Beides haengt an Klassen am Knopf, damit CSS nichts ueber den Zeitpunkt
   entscheidet — der gehoert ins Skript. */

.colorswitcher-nudge {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--theme-primary, #0d2a5c);
  background: var(--theme-secondary, #dea54e);
  box-shadow: 0 8px 22px rgba(10, 26, 52, 0.35);
  opacity: 0;
  transform: translate(10px, -50%);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s var(--cs-easing, ease);
}

/* Spitze zum Knopf */
.colorswitcher-nudge::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  border: 6px solid transparent;
  border-left-color: var(--theme-secondary, #dea54e);
  transform: translateY(-50%);
}

.colorswitcher-trigger.is-nudging .colorswitcher-nudge {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Pulsring: eine Kopie des Knopfes, die nach aussen laeuft und verblasst.
   Liegt hinter dem Inhalt (z-index), damit das Zahnrad scharf bleibt. */
.colorswitcher-trigger.is-nudging::before,
.colorswitcher-trigger.is-pulsing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--theme-secondary, #dea54e);
}

/* Waehrend die Blase steht, laeuft der Ring durch. */
.colorswitcher-trigger.is-nudging::before {
  animation: colorswitcherPulse 2.4s ease-out infinite;
}

/* Danach nur noch in Abstaenden: 3s Puls, 10s Ruhe. Die Pause steckt in den
   Keyframes statt in einem Timer — eine Animation, die der Browser selbst
   taktet, laeuft nicht auseinander und kostet keinen Zeitgeber. 3s von 13s
   sind 23%, den Rest der Runde bleibt der Ring unsichtbar. */
.colorswitcher-trigger.is-pulsing::before {
  animation: colorswitcherPulseCycle 13s ease-out infinite;
}

@keyframes colorswitcherPulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes colorswitcherPulseCycle {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  16%,
  23% {
    opacity: 0;
    transform: scale(1.9);
  }
  23.01%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Waehrend das Panel offen ist, hat der Hinweis seinen Zweck erfuellt. */
body.colorswitcher-open .colorswitcher-trigger.is-nudging::before,
body.colorswitcher-open .colorswitcher-trigger.is-pulsing::before,
body.colorswitcher-open .colorswitcher-nudge {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .colorswitcher-nudge {
    transition: none;
  }

  .colorswitcher-trigger.is-nudging::before,
  .colorswitcher-trigger.is-pulsing::before {
    animation: none;
  }
}

/* Auf schmalen Geraeten reicht der Platz links vom Knopf nicht fuer die
   Blase — dort bleibt der Pulsring als Hinweis. */
@media (max-width: 480px) {
  .colorswitcher-nudge {
    display: none;
  }
}