/* ═══════════════════════════════════════════════════════════════════════════
   Ohne !important — nachgemessen, nicht geraten

   Gemessen wurde in einem Prüfstand, der die echten Regeln deines Themes und
   des Elementor-Kits in der richtigen Ladereihenfolge mitführt: 18 Widgets
   nebeneinander, vier Bildschirmbreiten, über 40 Eigenschaften je Element.
   Ergebnis für diese Datei: 12 entfernt, alle wirkungslos
   ═══════════════════════════════════════════════════════════════════════════ */

/* ==========================================
   HDM Sticky Kontakt — Seitenrand-Button
   Heller Digital Custom Widgets v1.3
   ========================================== */


/* ======================================
   PAGE-TRANSITION OVERLAY (navigate mode)
   ====================================== */
.hdm-sk-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 99990;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: right center;
}
.hdm-sk-overlay.is-entering {
  pointer-events: auto;
  transform: scaleX(1);
  transition: transform 0.52s cubic-bezier(0.76, 0, 0.24, 1);
}
.hdm-sk-overlay.is-leaving {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.48s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.1s;
}

/* ======================================
   WRAPPER (fixed right edge)
   ====================================== */
.hdm-sk-wrap {
  --hdm-sk-radius: 14px 0 0 14px; /* war nie gesetzt: die Lasche hatte eckige Kanten (AP 22) */
  position: fixed;
  right: 0;
  top: var(--hdm-sk-top);
  transform: translateY(-50%);
  z-index: 9900;
  animation: hdm-sk-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.elementor-editor-active .hdm-sk-wrap {
  position: relative;
  top: 0;
  right: 0;
  transform: none;
  display: inline-block;
  animation: none;
}

body.admin-bar .hdm-sk-wrap { top: calc(var(--hdm-sk-top) + 16px); }

/* ======================================
   BUTTON
   ====================================== */
.hdm-sk-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--hdm-sk-width);
  padding: 18px 0;
  background: linear-gradient(180deg, var(--hdm-sk-color-1) 0%, var(--hdm-sk-color-2) 100%);
  color: var(--hdm-sk-text);
  border-radius: var(--hdm-sk-radius);
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
  box-shadow:
    -4px 0 24px rgba(27, 79, 216, 0.28),
    -2px 0 8px rgba(0, 0, 0, 0.18);
  transition:
    transform var(--hdm-sk-spring),
    box-shadow var(--hdm-sk-ease),
    width var(--hdm-sk-ease);
  overflow: hidden;
  position: relative;
  will-change: transform;
}
.hdm-sk-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.2s ease;
}
.hdm-sk-btn:hover {
  transform: translateX(-4px) scale(1.03);
  box-shadow:
    -8px 0 32px rgba(27, 79, 216, 0.42),
    -2px 0 12px rgba(0, 0, 0, 0.24);
  width: calc(var(--hdm-sk-width) + 4px);
}
.hdm-sk-btn:hover::before { background: rgba(255, 255, 255, 0.06); }
.hdm-sk-btn:active { transform: translateX(-2px) scale(0.97); }

/* ======================================
   RETRACTED: button hides behind screen
   edge; hover slides it out (Schlitz)
   ====================================== */
.hdm-sk-wrap.hdm-sk--retracted .hdm-sk-btn {
  transform: translateX(calc(var(--hdm-sk-width) - 6px));
  width: var(--hdm-sk-width);
  box-shadow: none;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow var(--hdm-sk-ease),
    width var(--hdm-sk-ease);
}
.hdm-sk-wrap.hdm-sk--retracted:hover .hdm-sk-btn {
  transform: translateX(-4px) scale(1.02);
  box-shadow:
    -8px 0 32px rgba(27, 79, 216, 0.42),
    -2px 0 12px rgba(0, 0, 0, 0.24);
  width: calc(var(--hdm-sk-width) + 4px);
}

/* ======================================
   ICON + LABEL
   ====================================== */
.hdm-sk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  transition: transform var(--hdm-sk-spring);
}
.hdm-sk-btn:hover .hdm-sk-icon { transform: scale(1.15); }
.hdm-sk-icon svg,
.hdm-sk-icon i { width: 18px; height: 18px; font-size: 16px; color: var(--hdm-sk-text); fill: var(--hdm-sk-text); }

.hdm-sk-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hdm-sk-text);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* ======================================
   FLOATING PARTICLES (brand squares)
   Canvas is wider than the button so
   particles drift beyond its bounds.
   ====================================== */
.hdm-sk-particles {
  position: absolute;
  inset: -80px;
  pointer-events: none;
  overflow: visible;
}
.hdm-sk-p {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--p-sz, 8px);
  height: var(--p-sz, 8px);
  margin-top: calc(-0.5 * var(--p-sz, 8px));
  margin-left: calc(-0.5 * var(--p-sz, 8px));
  border-radius: 3px;
  background: linear-gradient(135deg, var(--p-c1, #1B4FD8), var(--p-c2, #0A1628));
  opacity: 0;
  animation: hdm-sk-p-drift var(--p-dur, 5.5s) ease-in-out var(--p-del, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes hdm-sk-p-drift {
  0%   { opacity: 0;               transform: translate(0, 0) rotate(var(--p-r0, 0deg)) scale(0.5); }
  20%  { opacity: var(--p-a, 0.15); transform: translate(var(--p-dx1, -8px), var(--p-dy1, -8px)) scale(1); }
  80%  { opacity: var(--p-a, 0.15); }
  100% { opacity: 0;               transform: translate(var(--p-dx2, -35px), var(--p-dy2, -30px)) rotate(var(--p-r1, 15deg)) scale(0.4); }
}

/* ======================================
   ENTRANCE ANIMATION
   ====================================== */
@keyframes hdm-sk-in {
  from { opacity: 0; transform: translateY(-50%) translateX(100%); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ======================================
   BACKDROP
   ====================================== */
.hdm-sk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 40, 0.52);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hdm-sk-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================
   CONTACT PANEL DRAWER
   ====================================== */
.hdm-sk-panel {
  --hdm-sk-dur: 820ms;
  --hdm-sk-pad-x: 22px;
  --hdm-sk-head-pad: 20px;
  --hdm-sk-body-pad: 22px;
  --hdm-sk-foot-pad: 24px;
  --hdm-sk-gap: 10px;
  --hdm-sk-accent: #0067ff;
  --hdm-sk-ink: #0a1628;
  --hdm-sk-ink2: rgba(10, 22, 40, 0.70);
  --hdm-sk-ink3: rgba(10, 22, 40, 0.62);
  --hdm-sk-line: rgba(10, 22, 40, 0.13);
  --hdm-sk-line2: rgba(10, 22, 40, 0.07);

  position: fixed;
  top: 0; right: 0;
  width: 420px; max-width: 100vw;
  height: 100%;
  background: #fff;
  z-index: 99999;
  transform: translateX(100%);
  transform-origin: right center;
  will-change: transform;
  /* Schließen läuft über die Transition — Öffnen über die Keyframes unten */
  transition: transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 80px rgba(10, 22, 40, 0.28);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.hdm-sk-panel.is-open { transform: translateX(0); }
/* Runde Ecken zur Seite hin, am Bildschirmrand gerade (AP 22). Am Handy füllt das Fenster die ganze Breite. */
@media (min-width: 480px) { .hdm-sk-panel { border-radius: 26px 0 0 26px; } }

/* ---- Öffnen-Animationen ----------------------------------------------
   Keyframe-Positionen tragen das Easing (Timing bleibt linear) — so
   entsteht eine echte gedämpfte Schwingung statt eines simplen Bounce. */

/* Feder: schwingt über und pendelt sich aus */
@keyframes hdm-sk-spring {
  0%   { transform: translateX(100%); }
  8%   { transform: translateX(58%); }
  16%  { transform: translateX(28%); }
  24%  { transform: translateX(8%); }
  32%  { transform: translateX(-3.2%); }
  40%  { transform: translateX(-5.4%); }
  50%  { transform: translateX(-2.6%); }
  58%  { transform: translateX(0.6%); }
  66%  { transform: translateX(2.1%); }
  74%  { transform: translateX(1.1%); }
  82%  { transform: translateX(-0.4%); }
  88%  { transform: translateX(-0.8%); }
  94%  { transform: translateX(-0.2%); }
  100% { transform: translateX(0); }
}

/* Gummi: staucht und dehnt sich gegen die rechte Kante */
@keyframes hdm-sk-jelly {
  0%   { transform: translateX(100%) scaleX(1.10); }
  10%  { transform: translateX(56%)   scaleX(1.07); }
  20%  { transform: translateX(24%)   scaleX(1.03); }
  30%  { transform: translateX(2%)    scaleX(0.93); }
  40%  { transform: translateX(-4.2%) scaleX(0.95); }
  50%  { transform: translateX(-1.6%) scaleX(1.04); }
  60%  { transform: translateX(1.6%)  scaleX(1.02); }
  70%  { transform: translateX(0.6%)  scaleX(0.98); }
  80%  { transform: translateX(-0.6%) scaleX(1.01); }
  90%  { transform: translateX(-0.2%) scaleX(0.995); }
  100% { transform: translateX(0)     scaleX(1); }
}

/* Zug: holt erst aus (Anticipation), dann schnellt es herein */
@keyframes hdm-sk-pull {
  0%   { transform: translateX(100%); }
  10%  { transform: translateX(105%); }
  18%  { transform: translateX(103%); }
  30%  { transform: translateX(46%); }
  40%  { transform: translateX(12%); }
  48%  { transform: translateX(-5.6%); }
  58%  { transform: translateX(-2.2%); }
  67%  { transform: translateX(1.9%); }
  76%  { transform: translateX(0.7%); }
  85%  { transform: translateX(-0.6%); }
  93%  { transform: translateX(0.2%); }
  100% { transform: translateX(0); }
}

/* Sanft: ohne Überschwingen */
@keyframes hdm-sk-smooth {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

/* Die Keyframes laufen nur während des Öffnens (.is-opening) — der Ruhezustand
   kommt aus .is-open. So bleibt die Transition fürs Schließen zuverlässig. */
.hdm-sk-anim-spring.is-opening { animation: hdm-sk-spring var(--hdm-sk-dur) linear both; }
.hdm-sk-anim-jelly.is-opening  { animation: hdm-sk-jelly  var(--hdm-sk-dur) linear both; }
.hdm-sk-anim-pull.is-opening   { animation: hdm-sk-pull   var(--hdm-sk-dur) linear both; }
.hdm-sk-anim-smooth.is-opening { animation: hdm-sk-smooth var(--hdm-sk-dur) cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── Partikel hinter dem Panel ─────────────────────────────────────────────
   Eigene Ebene über dem Backdrop, aber UNTER dem Panel (99998 < 99999).
   Die Teilchen starten im Bereich hinter dem Panel und driften nach links —
   sichtbar werden sie erst, sobald sie unter der Panelkante hervorkommen. */
.hdm-sk-panel-particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hdm-sk-panel-particles.is-open { opacity: 1; }

.hdm-sk-pp {
  position: absolute;
  right: var(--pr, 100px);
  top: var(--py, 50%);
  width: var(--psz, 10px);
  height: var(--psz, 10px);
  margin-top: calc(-0.5 * var(--psz, 10px));
  border-radius: var(--prad, 3px);
  background: linear-gradient(135deg, var(--pc1, #0067ff), var(--pc2, #7c5cff));
  opacity: 0;
  animation: hdm-sk-pp-float var(--pdur, 8s) ease-in-out var(--pdel, 0s) infinite;
  animation-play-state: paused;
  will-change: transform, opacity;
}
/* Erst laufen lassen, wenn das Panel wirklich draußen ist */
.hdm-sk-panel-particles.is-open .hdm-sk-pp { animation-play-state: running; }

@keyframes hdm-sk-pp-float {
  0%   { opacity: 0;               transform: translate(0, 0) rotate(var(--pr0, 0deg)) scale(0.4); }
  18%  { opacity: var(--pa, 0.35); transform: translate(calc(var(--pdx, 0px) * 0.22), calc(var(--pdy, -60px) * 0.22)) scale(1); }
  82%  { opacity: var(--pa, 0.35); }
  100% { opacity: 0;               transform: translate(var(--pdx, 0px), var(--pdy, -60px)) rotate(var(--pr1, 40deg)) scale(var(--ps1, 0.7)); }
}

/* ── Schreibmaschine in der Überschrift ── */
.hdm-sk-tw { white-space: nowrap; }
.hdm-sk-tw-cursor {
  display: inline-block;
  vertical-align: baseline;
  background: currentColor;
  margin-left: 0.06em;
  animation: hdm-sk-tw-blink 1.05s steps(1) infinite;
}
@keyframes hdm-sk-tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hdm-sk-tw-cur-bar   .hdm-sk-tw-cursor { width: 0.06em;  height: 0.82em; }
.hdm-sk-tw-cur-block .hdm-sk-tw-cursor { width: 0.46em;  height: 0.82em; opacity: 0.85; }
.hdm-sk-tw-cur-under .hdm-sk-tw-cursor { width: 0.52em;  height: 0.08em; margin-bottom: -0.02em; }
/* Während des Tippens nicht blinken — sonst wirkt es unruhig */
.hdm-sk-tw.is-typing .hdm-sk-tw-cursor { animation: none; opacity: 1; }

/* ---- Inhalt zeitversetzt einblenden ---- */
.hdm-sk-reveal {
  opacity: 0;
  transform: translateY(16px);
}
.hdm-sk-panel.is-open .hdm-sk-reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease,
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ======================================
   PANEL — KOPF
   ====================================== */
.hdm-sk-panel-head {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

/* Heller Kopf (Standard) */
.hdm-sk-head-light .hdm-sk-panel-head {
  background: #fff;
  border-bottom: 1px solid var(--hdm-sk-line2);
}

/* Farbiger Kopf mit Verlauf */
.hdm-sk-head-gradient .hdm-sk-panel-head {
  background: linear-gradient(
    var(--hdm-sk-head-angle, 135deg),
    var(--hdm-sk-color-1) 0%,
    var(--hdm-sk-color-2) 100%);
}
.hdm-sk-head-gradient .hdm-sk-panel-head::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  right: -90px; top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.11) 0%, transparent 70%);
  pointer-events: none;
}

.hdm-sk-panel-head-inner {
  position: relative;
  z-index: 1;
  padding: 16px var(--hdm-sk-pad-x) var(--hdm-sk-head-pad);
}

.hdm-sk-panel-head-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.hdm-sk-panel-close {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.24s cubic-bezier(0.34,1.56,0.64,1);
}
.hdm-sk-panel-close:hover { transform: rotate(90deg); }
.hdm-sk-panel-close svg {
  width: 15px; height: 15px;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

.hdm-sk-head-light .hdm-sk-panel-close {
  background: rgba(10, 22, 40, 0.05);
  border: 1px solid var(--hdm-sk-line2);
}
.hdm-sk-head-light .hdm-sk-panel-close:hover { background: rgba(10, 22, 40, 0.09); }
.hdm-sk-head-light .hdm-sk-panel-close svg { stroke: var(--hdm-sk-ink); }

.hdm-sk-head-gradient .hdm-sk-panel-close {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255,255,255,0.18);
}
.hdm-sk-head-gradient .hdm-sk-panel-close:hover { background: rgba(255, 255, 255, 0.24); }
.hdm-sk-head-gradient .hdm-sk-panel-close svg { stroke: #fff; }

.hdm-sk-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 9px;
}
.hdm-sk-panel-eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.hdm-sk-head-light .hdm-sk-panel-eyebrow    { color: var(--hdm-sk-accent); }
.hdm-sk-head-gradient .hdm-sk-panel-eyebrow { color: rgba(255,255,255,0.72); }

.hdm-sk-panel .hdm-sk-panel-headline {
  font-size: var(--hdm-sk-h-size, 56px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin: 0 0 8px;
}

/* Begrüßung mit Farbverlauf.
   .hdm-sk-panel davor, sonst gewinnt die später notierte Kopf-Textfarbe
   (.hdm-sk-head-light …) bei gleicher Spezifität. */
.hdm-sk-panel.hdm-sk-h-grad .hdm-sk-panel-headline {
  background: linear-gradient(
    var(--hdm-sk-h-angle, 120deg),
    var(--hdm-sk-h-c1, #0a1628),
    var(--hdm-sk-h-c2, #0067ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Der Cursor erbt sonst die transparente Textfarbe und verschwindet */
.hdm-sk-panel.hdm-sk-h-grad .hdm-sk-tw-cursor {
  background: var(--hdm-sk-h-c2, #0067ff);
}

/* Satz unter dem wechselnden Gruß */
.hdm-sk-panel .hdm-sk-panel-line {
  font-size: var(--hdm-sk-line-size, 17px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.hdm-sk-head-light .hdm-sk-panel-line    { color: var(--hdm-sk-ink2); }
.hdm-sk-head-gradient .hdm-sk-panel-line { color: rgba(255, 255, 255, 0.82); }
.hdm-sk-head-light .hdm-sk-panel-headline    { color: var(--hdm-sk-ink); }
.hdm-sk-head-gradient .hdm-sk-panel-headline { color: #fff; }

.hdm-sk-panel .hdm-sk-panel-subtitle {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.hdm-sk-head-light .hdm-sk-panel-subtitle    { color: var(--hdm-sk-ink2); }
.hdm-sk-head-gradient .hdm-sk-panel-subtitle { color: rgba(255,255,255,0.70); }

/* Vertrauen-Chips */
.hdm-sk-trust-list {
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.hdm-sk-trust-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 99px;
}
.hdm-sk-head-light .hdm-sk-trust-list li {
  color: var(--hdm-sk-ink2);
  background: rgba(10, 22, 40, 0.045);
  border: 1px solid var(--hdm-sk-line2);
}
.hdm-sk-head-gradient .hdm-sk-trust-list li {
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
}
.hdm-sk-trust-check {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 900;
}
.hdm-sk-head-light .hdm-sk-trust-check    { background: var(--hdm-sk-accent); color: #fff; }
.hdm-sk-head-gradient .hdm-sk-trust-check { background: rgba(255,255,255,0.22); color: #fff; }

/* ======================================
   PANEL — FORMULAR
   ====================================== */
.hdm-sk-panel-body {
  flex: 0 0 auto;
  padding: var(--hdm-sk-body-pad) var(--hdm-sk-pad-x);
}

.hdm-sk-form-body-intro {
  font-size: 13px;
  line-height: 1.6;
  color: var(--hdm-sk-ink2);
  margin: 0 0 16px;
}

.hdm-sk-form {
  display: flex;
  flex-direction: column;
  gap: var(--hdm-sk-gap);
}

/* Schwebende Labels */
.hdm-sk-form-row { position: relative; }

/* Kurze Felder paarweise nebeneinander */
.hdm-sk-form-grid { display: grid; gap: var(--hdm-sk-gap); }
.hdm-sk-form-grid.is-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) {
  .hdm-sk-form-grid.is-two { grid-template-columns: 1fr; }
}

/* Auswahlfelder — Label steht fest oben, ein <select> ist nie „leer" */
.hdm-sk-form select {
  width: 100%;
  padding: 21px 15px 8px;
  border: 1.5px solid var(--hdm-sk-line);
  border-radius: 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--hdm-sk-ink);
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  /* Pfeil als Inline-SVG, damit keine externe Datei nötig ist */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230a1628' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 38px;
}
.hdm-sk-form select:focus {
  border-color: var(--hdm-sk-accent);
  box-shadow: 0 0 0 4px rgba(0, 103, 255, 0.09);
}
.hdm-sk-form-row--select > label {
  transform: translateY(-8px) scale(0.74);
  color: var(--hdm-sk-ink3);
}
.hdm-sk-form-row--select:focus-within > label { color: var(--hdm-sk-accent); }

.hdm-sk-form input,
.hdm-sk-form textarea {
  width: 100%;
  padding: 21px 15px 8px;
  border: 1.5px solid var(--hdm-sk-line);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--hdm-sk-ink);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.hdm-sk-form textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.55;
  padding-top: 24px;
}
.hdm-sk-form input::placeholder,
.hdm-sk-form textarea::placeholder { color: transparent; }

.hdm-sk-form label {
  position: absolute;
  left: 16px;
  top: 15px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(10, 22, 40, 0.50);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

.hdm-sk-form input:focus,
.hdm-sk-form textarea:focus {
  border-color: var(--hdm-sk-accent);
  box-shadow: 0 0 0 4px rgba(0, 103, 255, 0.09);
}
.hdm-sk-form input:focus + label,
.hdm-sk-form input:not(:placeholder-shown) + label,
.hdm-sk-form textarea:focus + label,
.hdm-sk-form textarea:not(:placeholder-shown) + label {
  transform: translateY(-8px) scale(0.74);
  color: var(--hdm-sk-accent);
}

.hdm-sk-form-submit {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 22px;
  background: var(--hdm-sk-accent);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  box-shadow: 0 6px 18px rgba(0, 103, 255, 0.26);
  transition:
    gap 0.22s ease,
    transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}
.hdm-sk-form-submit:hover {
  gap: 12px;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 103, 255, 0.36);
}
.hdm-sk-form-submit:active { transform: scale(0.985); }

.hdm-sk-form-privacy {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--hdm-sk-ink3);
  line-height: 1.45;
}
.hdm-sk-form-privacy svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ======================================
   PANEL — UNTERER BEREICH
   ====================================== */
.hdm-sk-panel-foot {
  flex: 1 0 auto;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* „Direkt unter dem Formular": der Block wächst nicht mit, dadurch
   entsteht oben keine Lücke und unten wird nichts angedrückt. */
.hdm-sk-panel-foot--flow {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* „Verteilt": füllt den Rest der Panelhöhe und verteilt die eigenen Blöcke
   darin gleichmäßig. Damit endet der Inhalt bündig am unteren Bildschirmrand,
   ohne dass sich der freie Platz an einer Stelle als große Lücke sammelt. */
.hdm-sk-panel-foot--stretch {
  flex: 1 0 auto;
  justify-content: space-between;
  gap: var(--hdm-sk-foot-gap, 18px);
}

/* ---- Vertrauen ---- */
.hdm-sk-foot-trust {
  padding: var(--hdm-sk-foot-pad) 0 var(--hdm-sk-foot-bot, 34px);
  background: linear-gradient(180deg, #fff 0%, var(--hdm-sk-foot-bg, #f2f6fd) 28%);
}

.hdm-sk-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 var(--hdm-sk-pad-x);
  margin-bottom: 14px;
}
.hdm-sk-stars { display: flex; gap: 2px; }
.hdm-sk-stars svg { width: 15px; height: 15px; fill: var(--hdm-sk-star, #ffb020); }
.hdm-sk-rating b { font-size: 13.5px; color: var(--hdm-sk-ink); }
.hdm-sk-rating span { font-size: 12px; color: var(--hdm-sk-ink3); }

.hdm-sk-testi {
  margin: 0 var(--hdm-sk-pad-x) 16px;
  padding: 15px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--hdm-sk-line2);
  box-shadow: 0 1px 2px rgba(21,71,156,.05), 0 6px 16px rgba(21,71,156,.05);
}
.hdm-sk-testi q {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hdm-sk-ink2);
  margin-bottom: 10px;
}
.hdm-sk-testi footer { display: flex; align-items: center; gap: 9px; }
.hdm-sk-testi-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--hdm-sk-color-2, #0b5cf5), var(--hdm-sk-color-1, #7c5cff));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 800;
  overflow: hidden;
}
.hdm-sk-testi-av img { width: 100%; height: 100%; object-fit: cover; }
.hdm-sk-testi-name { font-size: 12.5px; font-weight: 700; color: var(--hdm-sk-ink); display: block; }
.hdm-sk-testi-role { font-size: 11.5px; color: var(--hdm-sk-ink3); display: block; }

.hdm-sk-logolab {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hdm-sk-ink3);
  padding: 0 var(--hdm-sk-pad-x);
  margin: 0 0 9px;
}
.hdm-sk-logos {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hdm-sk-logos-in {
  display: flex;
  gap: 26px;
  width: max-content;
  align-items: center;
  animation: hdm-sk-logos var(--hdm-sk-logo-speed, 18s) linear infinite;
}
@keyframes hdm-sk-logos { to { transform: translateX(-50%); } }
.hdm-sk-logo {
  font-size: var(--hdm-sk-logo-size, 18px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(10, 22, 40, 0.30);
  white-space: nowrap;
}
.hdm-sk-logo img {
  height: calc(var(--hdm-sk-logo-size, 18px) * 1.35);
  width: auto;
  opacity: 0.42;
  display: block;
}

/* ---- Wellen ---- */
.hdm-sk-foot-waves { justify-content: flex-end; }
.hdm-sk-waves {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hdm-sk-wave-h, 330px);
  overflow: hidden;
  pointer-events: none;
}
.hdm-sk-waves svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 200%;
  height: 100%;
}
.hdm-sk-wave-1 { animation: hdm-sk-wave var(--hdm-sk-wave-s1, 14s) linear infinite; opacity: 0.20; }
.hdm-sk-wave-2 { animation: hdm-sk-wave var(--hdm-sk-wave-s2, 9s)  linear infinite reverse; opacity: 0.32; }
.hdm-sk-wave-3 { animation: hdm-sk-wave var(--hdm-sk-wave-s3, 20s) linear infinite; }
@keyframes hdm-sk-wave { to { transform: translateX(-50%); } }

.hdm-sk-wave-text {
  position: relative;
  z-index: 2;
  padding: 0 var(--hdm-sk-pad-x) 26px;
  color: #fff;
}
.hdm-sk-wave-text b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.hdm-sk-wave-text > span {
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.hdm-sk-wave-badges { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.hdm-sk-wave-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.20);
}

/* ---- Aurora ---- */
.hdm-sk-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hdm-sk-blob { position: absolute; border-radius: 50%; filter: blur(58px); opacity: 0.62; }
.hdm-sk-blob-1 {
  width: 300px; height: 300px; left: -90px; bottom: -70px;
  background: var(--hdm-sk-aur-1, #9cc4ff);
  animation: hdm-sk-aur1 15s ease-in-out infinite;
}
.hdm-sk-blob-2 {
  width: 250px; height: 250px; right: -70px; bottom: 40px;
  background: var(--hdm-sk-aur-2, #d3bcff);
  animation: hdm-sk-aur2 19s ease-in-out infinite;
}
.hdm-sk-blob-3 {
  width: 210px; height: 210px; left: 120px; bottom: -60px;
  background: var(--hdm-sk-aur-3, #a5ecdc);
  animation: hdm-sk-aur3 13s ease-in-out infinite;
}
@keyframes hdm-sk-aur1 { 50% { transform: translate(70px,-50px) scale(1.2); } }
@keyframes hdm-sk-aur2 { 50% { transform: translate(-60px,40px) scale(1.14); } }
@keyframes hdm-sk-aur3 { 50% { transform: translate(-50px,-60px) scale(.85); } }
.hdm-sk-aurora::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 20%, transparent 52%);
}

.hdm-sk-stats {
  position: relative;
  z-index: 2;
  padding: 0 var(--hdm-sk-pad-x) 24px;
  display: flex;
  gap: 10px;
}
.hdm-sk-stat {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 13px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 10px rgba(21,71,156,.06);
}
.hdm-sk-stat b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hdm-sk-ink);
}
.hdm-sk-stat span {
  display: block;
  font-size: 11px;
  color: var(--hdm-sk-ink3);
  margin-top: 2px;
  line-height: 1.35;
}

/* ---- Foto ---- */
.hdm-sk-photo { position: absolute; inset: 0; overflow: hidden; }
.hdm-sk-photo-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  animation: hdm-sk-kenburns 22s ease-in-out infinite alternate;
}
@keyframes hdm-sk-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.13) translate(-2%, -3%); }
}
.hdm-sk-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.86) 14%, transparent 46%);
}
/* Scrim sichert Lesbarkeit — unabhängig davon wie hell das Foto ist */
.hdm-sk-photo-cap {
  position: relative;
  z-index: 2;
  padding: 64px var(--hdm-sk-pad-x) 22px;
  color: #fff;
  background: linear-gradient(0deg, rgba(6,18,40,.86) 0%, rgba(6,18,40,.62) 45%, transparent 100%);
}
.hdm-sk-photo-cap q {
  display: block;
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.hdm-sk-photo-cap small { font-size: 12px; color: rgba(255,255,255,0.72); }

/* ======================================
   MOBILE & TABLET
   ====================================== */
@media (max-width: 768px) {
  /* Kein :root für --hdm-sk-width mehr: Elementor schreibt die Variable auf
     .hdm-sk-wrap, also auf ein näheres Element. Von :root aus kommt man da
     nie an. Die Handy-Breite steht jetzt als eigener Regler im Panel. */

  /* Die Lasche ist auf dem Handy nur noch gut 40px breit. Senkrechter Text
     müsste dafür auf 8px schrumpfen und wäre nicht mehr zu lesen — deshalb
     bleibt hier nur das Symbol stehen. Der Name steht ohnehin im Panel. */
  .hdm-sk-label { display: none; }
  .hdm-sk-btn { padding: 16px 0; min-height: 56px; }
  .hdm-sk-icon svg,
  .hdm-sk-icon i { width: 20px; height: 20px; font-size: 18px; }
  .hdm-sk-panel {
    width: calc(100vw - var(--hdm-sbw, 0px));
  }
  .hdm-sk-panel .hdm-sk-panel-headline { font-size: 20px; }
  .hdm-sk-panel .hdm-sk-panel-subtitle { font-size: 13px; }
  .hdm-sk-waves { height: 260px; }
}
@media (max-width: 480px) {
  .hdm-sk-panel .hdm-sk-panel-headline { font-size: 19px; }
  .hdm-sk-trust-list { gap: 6px; }
  .hdm-sk-trust-list li { font-size: 12px; padding: 5px 9px; }
  .hdm-sk-form-submit { font-size: 14px; padding: 14px 20px; }
  .hdm-sk-stats { gap: 7px; }
  .hdm-sk-stat { padding: 11px; }
  .hdm-sk-stat b { font-size: 18px; }
}

/* ======================================
   REDUZIERTE BEWEGUNG
   ====================================== */
@media (prefers-reduced-motion: reduce) {
  .hdm-sk-anim-spring.is-opening,
  .hdm-sk-anim-jelly.is-opening,
  .hdm-sk-anim-pull.is-opening,
  .hdm-sk-anim-smooth.is-opening { animation: hdm-sk-smooth 0.2s ease both; }
  .hdm-sk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hdm-sk-logos-in,
  .hdm-sk-wave-1, .hdm-sk-wave-2, .hdm-sk-wave-3,
  .hdm-sk-blob, .hdm-sk-photo-img { animation: none !important; }
  .hdm-sk-panel-particles { display: none !important; }
  .hdm-sk-tw-cursor { animation: none !important; }
}

/* 3.1.0: Bestätigung / Fehler nach dem Senden */
.hdm-sk-panel-body .hdm-form-meldung{padding:16px 18px;border-radius:14px;margin:0 0 16px;line-height:1.5;font-size:.95rem}
.hdm-sk-panel-body .hdm-form-meldung.ist-ok{background:#e8f5ec;color:#14532d}
.hdm-sk-panel-body .hdm-form-meldung.ist-fehler{background:#fdecec;color:#7f1d1d}

/* 4.14.0: Ersatz-Symbol nur dort, wo der Text ausgeblendet ist */
.hdm-sk-icon--handy { display: none; }
.hdm-sk-icon--handy svg { fill: none !important; stroke: var(--hdm-sk-text, #fff); }
@media (max-width: 768px) { .hdm-sk-icon--handy { display: inline-flex; } }