/* Schwebender Beratungs-Knopf — seit 0.17.0 im Plugin (vorher Raw-HTML im
   Footer von glattt.com). Verhalten: auf Standortseiten direkter Sprung zu
   #termin mit nächstem freien Termin als zweiter Zeile, sonst Standortwahl;
   erscheint erst nach dem ersten Scroll und verschwindet, sobald das
   Buchungswidget im Bild ist. Markup/JS: includes/cta.php, assets/js/cta.js. */
.glattt-cta {
  /* ── Stellschrauben ────────────────────────────────────────────── */
  --gcta-abstand-rechts: 1.75rem;
  /* Höher als der Rand: Salients „Nach oben“-Pfeil (#to-top) sitzt 15 px über
     der Unterkante und ist 29 px hoch — darunter würden sich beide ins Gehege
     kommen. 3.75rem = 60 px lässt ihn frei. */
  --gcta-abstand-unten:  1.75rem;
  --gcta-mint:      #BCEEE2;
  --gcta-mint-hell: #CDF3EA;
  --gcta-tief:      #10312B;

  /* ── Der Knopf selbst ──────────────────────────────────────────────
     Türkis als Fläche, weil es auf glattt.com die Handlungsfarbe ist.
     Für sich genommen trennt es sich kaum vom Untergrund (1,28:1 auf
     Weiß, 1,16:1 auf Creme) — die Trennung übernimmt deshalb die
     2-px-Kontur in Dark Grey (#111111, 18,9:1). Die Kontur ist hier
     also nicht Zierde, sondern trägt die Kontur des Knopfs.
     Beschriftung ebenfalls Dark Grey: 14,8:1.

     Alternativen aus der Palette (im Umschalter der Demo-Seite):
     Dark Grey als Fläche mit türkiser Schrift (18,9:1) oder
     Brown #9B5930 mit Weiß (5,4:1).

     Die Kontur ist ein dunkles Mint (#14544A) statt Schwarz: Sie trennt
     mit 8,8:1 immer noch deutlich, trägt den Markenfarbton aber sichtbar
     mit. Schrift und Symbol laufen in derselben Farbe (6,9:1 auf Türkis). */
  --gcta-knopf-bg:       #BCEEE2;
  --gcta-knopf-bg-hover: #CDF3EA;
  --gcta-knopf-text:     #14544A;
  --gcta-knopf-rand:     #14544A;
  --gcta-ring:           rgba(20, 84, 74, 0.45);
  /* Eine Quelle für die Form: Knopf UND Puls-Ring lesen denselben Wert.
     Am Handy wird daraus eine rechts gerade abschließende Lasche. */
  --gcta-knopf-radius:   999px;
  --gcta-flaeche:   #FFFCF4;
  --gcta-gold:      #E1B520;
  --gcta-gold-tief: #9A7A12;
  --gcta-text:      #1A1712;
  --gcta-schwach:   #6D6555;
  --gcta-linie:     #F0E7D0;
  --gcta-titel:     inherit;        /* wird per JS mit der Theme-Überschrift gefüllt */

  position: fixed;
  right: var(--gcta-abstand-rechts);
  bottom: var(--gcta-abstand-unten);
  z-index: 9995;                    /* über Salients #to-top (9994), unter Cookie-Bannern */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: inherit;
  line-height: 1.45;
  transition: opacity 0.35s ease, transform 0.35s ease;

  /* Der Rahmen fängt KEINE Klicks ab — nur Knopf und Auswahl tun das.
     Grund: Die geschlossene Auswahl steht auf `visibility: hidden` und ist
     damit unsichtbar, belegt aber weiter ihren Platz im Layout. Der Rahmen ist
     dadurch gut 260 px hoch, am Handy zusätzlich über die volle Breite
     (`left` im Mobil-Block) — eine unsichtbare Platte auf z-index 9995, die
     jeden Tipp darunter geschluckt hat. */
  pointer-events: none;
}
.glattt-cta .gcta-knopf,
.glattt-cta .gcta-panel { pointer-events: auto; }
.glattt-cta *,
.glattt-cta *::before,
.glattt-cta *::after { box-sizing: border-box; }

/* Blendet sich aus, sobald das Buchungsformular selbst im Bild ist —
   zwei konkurrierende CTAs auf einem Bildschirm helfen niemandem. */
.glattt-cta.ist-weg {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

/* ══ Der Knopf ══════════════════════════════════════════════════════ */
.glattt-cta .gcta-knopf {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  margin: 0 !important;
  padding: 1.05rem 1.6rem !important;
  border: none !important;
  border-radius: var(--gcta-knopf-radius) !important;  /* Salient rundet Buttons per !important */
  background: var(--gcta-knopf-bg) !important;
  color: var(--gcta-knopf-text) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--gcta-knopf-rand),
              0 8px 22px -6px rgba(16, 49, 43, 0.45),
              0 2px 6px rgba(16, 49, 43, 0.18);
  transition: padding 0.32s cubic-bezier(0.6, 0, 0.3, 1),
              gap 0.32s cubic-bezier(0.6, 0, 0.3, 1),
              background 0.25s ease,
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
}
.glattt-cta .gcta-knopf:hover {
  background: var(--gcta-knopf-bg-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--gcta-knopf-rand),
              0 16px 32px -10px rgba(16, 49, 43, 0.55),
              0 2px 6px rgba(16, 49, 43, 0.18);
}
.glattt-cta .gcta-knopf:active { transform: translateY(0) scale(0.98); }
.glattt-cta .gcta-knopf:focus-visible {
  /* Nicht die Knopffläche nehmen — auf hellem Grund wäre der Fokusring unsichtbar */
  outline: 2px solid var(--gcta-knopf-rand);
  outline-offset: 3px;
}

/* Beschriftung fährt beim Öffnen ein */
.glattt-cta .gcta-text {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.32s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.2s ease;
}
.glattt-cta.ist-faltend .gcta-text {
  max-width: 0;
  opacity: 0;
}
.glattt-cta.ist-faltend .gcta-knopf {
  padding: 1.05rem !important;
  gap: 0 !important;
}

/* Symbol: Kalender ↔ Schließen-Kreuz, überblendet */
.glattt-cta .gcta-symbol {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.glattt-cta .gcta-symbol svg {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.glattt-cta .gcta-zu { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.glattt-cta.ist-faltend .gcta-auf { opacity: 0; transform: rotate(90deg) scale(0.6); }
.glattt-cta.ist-faltend .gcta-zu  { opacity: 1; transform: none; }

/* Aufmerksamkeits-Ring: alle paar Sekunden ein leiser Impuls, nie im
   geöffneten Zustand und nicht beim Überfahren. */
.glattt-cta .gcta-knopf::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dieselbe Form wie der Knopf — sonst pulst am Handy ein rundes Oval um
     eine rechts gerade abschließende Lasche. */
  border-radius: var(--gcta-knopf-radius);
  box-shadow: 0 0 0 0 var(--gcta-ring);
  animation: gctaPuls 6s ease-out 3s infinite;
  pointer-events: none;
}
.glattt-cta.ist-faltend .gcta-knopf::after,
.glattt-cta .gcta-knopf:hover::after { animation: none; }
@keyframes gctaPuls {
  0%   { box-shadow: 0 0 0 0 var(--gcta-ring); }
  12%  { box-shadow: 0 0 0 14px rgba(20, 84, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 84, 74, 0); }
}

/* ══ Die Auswahl ════════════════════════════════════════════════════ */
.glattt-cta .gcta-panel {
  width: 20.5rem;
  max-width: calc(100vw - 2 * var(--gcta-abstand-rechts));
  padding: 1.1rem 1.15rem 0.9rem;
  background: var(--gcta-flaeche);
  border: 1px solid rgba(225, 181, 32, 0.42);
  border-radius: 1.25rem;
  box-shadow: 0 2px 4px rgba(40, 32, 10, 0.06), 0 26px 50px -22px rgba(40, 32, 10, 0.42);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.26s ease,
              transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.36s;
}
.glattt-cta.ist-offen .gcta-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.glattt-cta .gcta-eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gcta-gold-tief);
}
.glattt-cta .gcta-titel {
  display: block;
  margin: 0.3rem 0 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(225, 181, 32, 0.3);
  font-family: var(--gcta-titel);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gcta-text);
}

/* Salient setzt in Fließtext-Listen eigene Aufzählungspunkte (per ::before)
   und einen Einzug — beides muss hier weg, sonst stehen Punkte vor den
   Standorten. */
.glattt-cta .gcta-liste {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.glattt-cta .gcta-liste li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  text-indent: 0 !important;
}
.glattt-cta .gcta-liste li::before,
.glattt-cta .gcta-liste li::after,
.glattt-cta .gcta-liste li::marker {
  content: none !important;
  display: none !important;
}
.glattt-cta .gcta-ort {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem !important;
  border-radius: 0.7rem;
  color: var(--gcta-text) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  overflow: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.22s ease;
}
.glattt-cta.ist-offen .gcta-ort {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 45ms + 90ms);
}
.glattt-cta .gcta-ort:hover { background: var(--gcta-mint); }
.glattt-cta .gcta-ort:focus-visible {
  outline: 2px solid var(--gcta-gold-tief);
  outline-offset: 1px;
}
.glattt-cta .gcta-ort-text { flex: 1 1 auto; min-width: 0; }
.glattt-cta .gcta-ort-name {
  display: block;
  font-family: var(--gcta-titel);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gcta-text);
}
.glattt-cta .gcta-ort-adresse {
  display: block;
  font-size: 0.78rem;
  color: var(--gcta-schwach);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glattt-cta .gcta-pfeil {
  flex: none;
  font-size: 1.05rem;
  color: var(--gcta-gold-tief);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease;
}
.glattt-cta .gcta-ort:hover .gcta-pfeil {
  transform: translateX(4px);
  color: var(--gcta-tief);
}
/* Der Standort, auf dessen Seite man gerade ist */
.glattt-cta .gcta-ort.ist-hier { background: rgba(188, 238, 226, 0.45); }
.glattt-cta .gcta-ort.ist-hier .gcta-pfeil::after {
  content: 'hier buchen';
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gcta-tief);
}

.glattt-cta .gcta-fuss {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0 !important;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gcta-linie);
  font-size: 0.76rem;
  color: var(--gcta-schwach);
}
.glattt-cta .gcta-fuss svg { width: 13px; height: 13px; flex: none; color: #14544A; }

/* ── Kleine Bildschirme ─────────────────────────────────────────────
   Am Handy sitzt der Knopf bündig am rechten Seitenrand und schließt
   dort gerade ab — die runden Ecken bleiben nur links. Das spart Breite
   und liest sich als angeheftete Lasche statt als schwebende Pille. */
@media (max-width: 480px) {
  .glattt-cta {
    --gcta-abstand-rechts: 0rem;
    --gcta-abstand-unten: 1.5rem;
    left: 0.75rem;                 /* Platz für die Auswahl, Knopf bleibt rechts */
    align-items: flex-end;
  }
  /* Eine Zeile für Knopf UND Puls-Ring — beide lesen --gcta-knopf-radius */
  .glattt-cta { --gcta-knopf-radius: 999px 0 0 999px; }
  .glattt-cta .gcta-knopf {
    font-size: 0.94rem !important;
    padding: 0.95rem 1.2rem 0.95rem 1.4rem !important;
  }
  .glattt-cta.ist-faltend .gcta-knopf { padding: 0.95rem 1.05rem 0.95rem 1.15rem !important; }
  .glattt-cta .gcta-panel {
    width: 100%;
    border-right: none;
    border-radius: 1.25rem 0 0 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glattt-cta,
  .glattt-cta * { transition-duration: 0.001ms !important; animation: none !important; }
}


/* ── Ergänzungen 0.17.0 ─────────────────────────────────────────────── */
/* Erst nach dem ersten Scroll sichtbar — mobil überdeckte die Pille sonst den
   Hero-Knopf der Seite (Website-Audit 13.10.2026). */
.glattt-cta:not(.ist-da) { opacity: 0; pointer-events: none; transform: translateY(12px); }
.glattt-cta.ist-da { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
.glattt-cta.ist-weg { opacity: 0; pointer-events: none; }
/* Direktmodus (Standortseite): Knopf ist ein Link, zwei Zeilen */
.glattt-cta.ist-direkt .gcta-knopf { text-decoration: none; }
.glattt-cta.ist-direkt .gcta-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.glattt-cta.ist-direkt .gcta-termin { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; opacity: 0.85; margin-top: 2px; }
.glattt-cta.ist-direkt .gcta-termin:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .glattt-cta.ist-da { transition: none; }
}