/* ===================================
Header & Navigation
=================================== */
header{
  position:sticky;                            /* bleibt oben fixiert */
  top:0;                                      /* am oberen Rand */
  z-index:999;                                /* hohe Priorität */
  /*background:rgba(16,12,24,.9);*/               /* halbtransparenter Hintergrund */
  backdrop-filter:blur(8px);                  /* Weichzeichner-Effekt */
  border-bottom:1px solid rgba(255,255,255,.08); /* dezente Trennlinie */
  width: 100%;
}
header>.inside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0rem 1rem;
    max-width: 1100px;
}
/* Seiten-Header */
.site-header{
                             /* hohe Priorität */
  max-width: 1100px;
}

/* Navigation */
.nav{
  display:flex;                               /* Flexbox */
  align-items:center;                         /* vertikal zentriert */
  justify-content:space-between;              /* Platz zwischen Elementen */
  height:64px;
  max-width: 1100px;/* Höhe der Navigation */
}

/* Markenlogo + Text */
.brand{
  display:flex;                               /* Logo und Text nebeneinander */
  align-items:center;                         /* vertikal zentriert */
  gap:.5rem;                                  /* Abstand zwischen Logo/Text */
  text-decoration:none;                       /* keine Unterstreichung */
  color:inherit;                              /* Textfarbe erben */
}

.brand__logo{
  height:40px;                                /* Höhe Logo */
  width:auto;                                 /* proportionale Breite */
}

.brand__text{
  font-weight:800;                            /* sehr fett */
  font-size:clamp(1.4rem, 2.2vw, 1.9rem);     /* responsive Größe */
  letter-spacing:.06em;                       /* Laufweite */
  color: #502581;                 /* Primärfarbe */
  position:relative;                          /* Positionierung für Effekte */
  display:inline-block;                       /* Inline-Block */
}

/* Glow-Effekte */
.glow{
  position:relative;                          /* für Keyframes */
}

.glow-sweep{
  background:linear-gradient(90deg,
             rgba(255,255,255,0) 0%,
             rgba(255,255,255,.85) 50%,
             rgba(255,255,255,0) 100%) 0 0/200% 100% no-repeat; /* animierter Verlauf */
  -webkit-background-clip:text;               /* Clip für Safari */
  background-clip:text;                       /* Clip auf Text */
  color: #502581;                 /* Grundfarbe */
  text-shadow:0 0 0 rgba(0,0,0,0);            /* neutraler Schatten */
}

/* Animation: Sweep-Effekt */
@media (prefers-reduced-motion:no-preference){
  .glow-sweep{
    animation:text-sweep 3.5s linear infinite; /* animierter Sweep */
  }

  @keyframes text-sweep{
    0%{ background-position:-100% 0; }
    100%{ background-position:200% 0; }
  }
}

/* Animation: Glühen */
@media (prefers-reduced-motion:no-preference){
  .glow{
    animation:glow 2.8s ease-in-out infinite; /* pulsierender Glow */
  }

  @keyframes glow{
    0%,100%{ text-shadow:0 0 0 rgba(80,37,129,0); }
    50%{ text-shadow:0 0 14px rgba(80,37,129,.55); }
  }
}

/* Toggle-Button für Navigation (Mobile) */
.nav__toggle{
  display:inline-grid;                        /* Grid-Layout */
  gap:4px;                                    /* Abstand zwischen Linien */
  background:none;                            /* kein Hintergrund */
  border:0;                                   /* kein Rahmen */
  padding:8px;                                /* Klickfläche */
}

.nav__toggle span{
  width:26px;                                 /* Breite der Linie */
  height:2px;                                 /* Höhe der Linie */
  background: #f2eefb;                      /* Farbe */
  display:block;                              /* Blockelement */
}

/* Navigationslinks */
.nav__links{
  display:none;                               /* standardmäßig versteckt */
  align-items:center;                         /* vertikal zentriert */
  gap: 1.5rem;                                /* Abstand */
}

.nav__links ul{
  display:flex;                               /* horizontale Liste */
  gap: 1.5rem;                                /* Abstand */
  list-style:none;                            /* keine Aufzählungszeichen */
  margin:0;                                   /* kein Außenabstand */
  padding:0;                                  /* kein Innenabstand */
}

.nav__links a{
  color:#fff;                                 /* weiße Schrift */
  text-decoration:none;                       /* keine Unterstreichung */
  font-weight:600;                            /* halbfett */
  opacity:.95;                                /* leicht transparent */
}

.nav__links a:hover{
  opacity:1;                                  /* beim Hover volle Deckkraft */
}

/* Responsive: Desktop-Navigation */
@media (min-width:960px){
  .nav__toggle{
    display:none;                             /* Toggle-Button ausblenden */
  }
  .nav__links{
    display:flex;                             /* Links einblenden */
  }
}

/* Drawer (Mobile-Menü) */
.drawer[hidden]{
  display:none;                               /* versteckt, wenn [hidden] */
}

.drawer{
  position:fixed;                             /* fixiert */
  inset:0;                                    /* über gesamte Fläche */
  z-index:1000;                               /* ganz oben */
}

.drawer__backdrop{
  background:rgba(0,0,0,.6);                  /* dunkler Overlay */
}

.drawer__inner{
  background:#130f1b;                         /* Hintergrundfarbe */
  color:#fff;                                 /* weiße Schrift */
  padding: 0 0 1.5rem 0;
}

.drawer__close{
  align-self:flex-end;                        /* am Ende ausrichten */
  font-size:2rem;                             /* größere Schrift */
  background:none;                            /* kein Hintergrund */
  border:0;                                   /* kein Rahmen */
  color:white;                                /* weiße Schrift */
}

.drawer__menu{
  list-style:none;                            /* keine Punkte */
  margin:1.5 rem 0 0;                  /* oben Abstand */
  padding:0;                                  /* kein Innenabstand */
  display:flex;                               /* Flexbox */
  flex-direction:column;                      /* untereinander */
  gap:1rem;                                   /* Abstand */
  text-align:center;                          /* Text zentriert */
}

.drawer__menu a{
  color:#fff;                                 /* weiße Schrift */
}

.drawer__menu .btn--contact{
  display:inline-flex;                        /* Flex-Button */
  justify-content:center;                     /* zentriert */
  width:auto;                                 /* automatische Breite */
  padding:.7rem 1.2rem;                       /* Innenabstände */
}

/* Full-Width-Helfer */
.full{
  display:block;                              /* Blockelement */
  text-align:center;                          /* zentriert */
}

/* === Mobil: CTA links neben Burger, Desktop unverändert === */
.header__actions--mobile{
  display:none;                 /* Desktop: unsichtbar */
  align-items:center;
  gap:.5rem;
  margin-left:auto;             /* schiebt die Gruppe nach rechts */
}

.header__cta--mobile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.42rem .7rem;
  line-height:1;
  border-radius:999px;          /* Pill */
  white-space:nowrap;
}

/* Breakpoint analog zu deiner Desktop-Navigation (min-width:960px) */
@media (max-width:959.98px){
  .header__actions--mobile{ display:inline-flex; }  /* mobil sichtbar */
  /* .nav__links ist bei dir mobil bereits display:none -> Desktop bleibt unverändert */
}

/* Optional hart entfernen, falls die Drawer-Zeile mal stehen bleibt */
.drawer__menu .btn--contact.full{ display:none !important; }


:root{
  --btn-glow: #ffffff;      /* Farbe des Leuchtpunkts */
  --dot-size: 10px;          /* Größe des führenden Punkts */
  --orbit-speed: 2.2s;      /* Dauer für eine komplette Runde */
  --trail-gap: -0.015s;        /* Zeitversatz zwischen den Spurenpunkten */
  --trail-scale-step: .1;   /* wie stark jeder Folgedot schrumpft */
  --trail-opacity-step: .06;/* wie stark jeder Folgedot verblasst */
}

/* Kontakt-Button (spezielle Variante) */
.btn--contact{
  position:relative;
  display:inline-block;
  background: #502581;
  color:#fff;
  border-radius:999px;      /* Pillenform */
  padding:.75rem 1.15rem;
  border:1px solid transparent;
  isolation:isolate;
  overflow:visible;
}

/* Orbit-Container deckungsgleich mit Button */
.btn--contact .btn-orbit{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* Grundstil für ALLE Punkte */
.btn--contact .btn-dot{
  position:absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius:50%;
  background: var(--btn-glow);
  box-shadow:
    0 0 6px 2px color-mix(in srgb, var(--btn-glow) 70%, transparent),
    0 0 16px 4px color-mix(in srgb, var(--btn-glow) 50%, transparent),
    0 0 32px 10px color-mix(in srgb, var(--btn-glow) 35%, transparent);

  /* Motion Path: entlang der Button-Umrandung (Pille) */
  offset-path: inset(0 round 999px);
  -webkit-offset-path: inset(0 round 999px);
  offset-rotate: 0deg;
  -webkit-offset-rotate: 0deg;

  animation: dot-run var(--orbit-speed) linear infinite both;
}

/* Leader (erster Dot) */
.btn--contact .btn-dot:nth-child(1){
  transform: none;
  opacity: 1;
}

/* Trail-Dots mit Delay, kleiner und transparenter */
.btn--contact .btn-dot:nth-child(2){ animation-delay: calc(-1 * var(--trail-gap) * 1); transform: scale(calc(1 - var(--trail-scale-step)*1)); opacity: calc(1 - var(--trail-opacity-step)*1); }
.btn--contact .btn-dot:nth-child(3){ animation-delay: calc(-1 * var(--trail-gap) * 2); transform: scale(calc(1 - var(--trail-scale-step)*2)); opacity: calc(1 - var(--trail-opacity-step)*2); }
.btn--contact .btn-dot:nth-child(4){ animation-delay: calc(-1 * var(--trail-gap) * 3); transform: scale(calc(1 - var(--trail-scale-step)*3)); opacity: calc(1 - var(--trail-opacity-step)*3); }
.btn--contact .btn-dot:nth-child(5){ animation-delay: calc(-1 * var(--trail-gap) * 4); transform: scale(calc(1 - var(--trail-scale-step)*4)); opacity: calc(1 - var(--trail-opacity-step)*4); }
.btn--contact .btn-dot:nth-child(6){ animation-delay: calc(-1 * var(--trail-gap) * 5); transform: scale(calc(1 - var(--trail-scale-step)*5)); opacity: calc(1 - var(--trail-opacity-step)*5); }
.btn--contact .btn-dot:nth-child(7){ animation-delay: calc(-1 * var(--trail-gap) * 6); transform: scale(calc(1 - var(--trail-scale-step)*6)); opacity: calc(1 - var(--trail-opacity-step)*6); }
.btn--contact .btn-dot:nth-child(8){ animation-delay: calc(-1 * var(--trail-gap) * 7); transform: scale(calc(1 - var(--trail-scale-step)*7)); opacity: calc(1 - var(--trail-opacity-step)*7); }
.btn--contact .btn-dot:nth-child(9){ animation-delay: calc(-1 * var(--trail-gap) * 8); transform: scale(calc(1 - var(--trail-scale-step)*8)); opacity: calc(1 - var(--trail-opacity-step)*8); }
.btn--contact .btn-dot:nth-child(10){ animation-delay: calc(-1 * var(--trail-gap) * 9); transform: scale(calc(1 - var(--trail-scale-step)*9)); opacity: calc(1 - var(--trail-opacity-step)*9); }
.btn--contact .btn-dot:nth-child(11){ animation-delay: calc(-1 * var(--trail-gap) * 10); transform: scale(calc(1 - var(--trail-scale-step)*10)); opacity: calc(1 - var(--trail-opacity-step)*10); }
.btn--contact .btn-dot:nth-child(12){ animation-delay: calc(-1 * var(--trail-gap) * 11); transform: scale(calc(1 - var(--trail-scale-step)*11)); opacity: calc(1 - var(--trail-opacity-step)*11); }
.btn--contact .btn-dot:nth-child(13){ animation-delay: calc(-1 * var(--trail-gap) * 12); transform: scale(calc(1 - var(--trail-scale-step)*12)); opacity: calc(1 - var(--trail-opacity-step)*12); }

/* Keyframes: laufen entlang des Pfads */
@keyframes dot-run {
  to { offset-distance: 100%; -webkit-offset-distance: 100%; }
}

/* Hover: Beschleunigung */
.btn--contact:hover .btn-dot{
  animation-duration: calc(var(--orbit-speed) * 0.5);
}

/* Bewegungs-Reduktion */
@media (prefers-reduced-motion: reduce){
  .btn--contact .btn-dot{ animation: none !important; }
}

/* Fallback für Browser ohne offset-path */
@supports not (offset-path: inset(0 round 10px)) {
  .btn--contact .btn-orbit{ animation: btn-spin var(--orbit-speed) linear infinite; }
  .btn--contact .btn-dot{
    top:50%; left:50%;
    transform: translate(-50%, -50%) translateY(-26px);
  }
  .btn--contact:hover .btn-orbit{ animation-duration: calc(var(--orbit-speed) * 0.7); }
  @keyframes btn-spin { to { transform: rotate(360deg); } }
}