body {
  color:#333;
}


/* Sidebar-Textfarbe ans Topmenü angleichen */
#mySidebar .w3-bar-item {
    color: #444444 !important;
}
#mySidebar .w3-bar-item:hover {
    color: #000 !important;
}
#mySidebar .cta-hocus-menu,
#mySidebar .cta-hocus-menu:hover {
    color: #ffffff !important;
}
--
/* Zauberstabcursor */
body {
  cursor: url('/images/cursor.cur'), auto;
}
/* Shine Animation */
@keyframes shine {
  0% { left: -150%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

body .cta-wrapper {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
/* Wrapper zentriert den Button */
.cta-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* Hocus Chokus Blackbelt Button */
.cta-hocus-belt-longer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;

  background: linear-gradient(
    to right,
    #1a1a1a 0%,
    #1a1a1a 70%,
    #d72929 70%,
    #d72929 85%,
    #1a1a1a 85%,
    #1a1a1a 100%
  );

  color: #ffffff;
  padding: 10px 48px;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}

/* Shine Effekt */
.cta-hocus-belt-longer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: shine 3.5s infinite ease-in-out;
  z-index: 1;
  pointer-events: none;
}

/* Hover Effekt */
.cta-hocus-belt-longer:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}

/* Mobile Version */
@media (max-width: 480px) {
  .cta-hocus-belt-longer {
    padding: 8px 34px;
    font-size: 1.05rem;
    border-radius: 6px;
  }
}

/* Menü CTA Button (Probetraining im Menü) */

.cta-hocus-menu {
  background: linear-gradient(
    to right,
    #1a1a1a 0%,
    #1a1a1a 60%,
    #d72929 60%,
    #d72929 85%,
    #1a1a1a 85%,
    #1a1a1a 100%
  );
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  position: relative;
  overflow: hidden;
  display: block;
  text-align: center;
  padding: 10px 14px;
  margin: 6px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  transition: 0.25s ease;
}

/* Hover für Menübutton */
.cta-hocus-menu:hover {
  transform: translateY(-2px);
}

/* Shine Overlay für Menübutton */
.cta-hocus-menu .shine-overlay {
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: shine 3.5s infinite ease-in-out;
  z-index: 1;
  pointer-events: none;
  display: block;
}

.cta-hocus-menu:hover {
  transform: translateY(-2px);
  color: #ffffff !important; /* Schrift bleibt weiß */
}

/* CTA im Top-Menü */
.cta-hocus-top {
  background: linear-gradient(
    to right,
    #1a1a1a 0%,
    #1a1a1a 60%,
    #d72929 60%,
    #d72929 85%,
    #1a1a1a 85%,
    #1a1a1a 100%
  );
  color: #ffffff !important;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  transition: 0.25s ease;
  padding: 10px 16px; 
  margin: 6px 0;
}

/* Hover */
.cta-hocus-top:hover {
  transform: translateY(-2px);
}

/* Shine */
.cta-hocus-top .shine-overlay {
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: shine 3.5s infinite ease-in-out;
  z-index: 1;
  pointer-events: none;
  display: block;
}
/* Blackbelt Button im Sidemenu ohne Radius */
#mySidebar .cta-hocus-menu {
  border-radius: 0;
}

/* 
  balanced-list.css
  -----------------
  Dieses Stylesheet sorgt dafür, dass eine nummerierte Liste automatisch 
  in zwei gleichmäßig balancierte Spalten aufgeteilt wird. 
  Die Nummerierung bleibt korrekt (1 bis 10), die Spalten passen sich 
  flexibel an die Bildschirmgröße an und die Inhalte werden nicht 
  unschön getrennt. Perfekt für moderne, klare Layouts.
*/

/* Grundlayout: auf kleinen Bildschirmen nur eine Spalte */
.balanced-list {
  column-count: 1;      /* Anzahl der Spalten im Standardzustand */
  column-gap: 40px;     /* Abstand zwischen den späteren Spalten */
}

/* Ab Tablet/PC Größe: zwei automatisch balancierte Spalten */
@media (min-width: 601px) {
  .balanced-list {
    column-count: 2;    /* Liste wird in zwei Spalten aufgeteilt */
  }
}

/* Einstellungen für einzelne Listenpunkte */
.balanced-list li {
  break-inside: avoid;  /* verhindert, dass ein Listenelement in zwei Spalten bricht */
  margin-bottom: 18px;  /* angenehmer Abstand zwischen den Punkten */
}

/* Überschriften innerhalb der Listeneinträge */
.balanced-list strong {
  display: block;       /* Überschrift beginnt immer auf einer eigenen Zeile */
  margin-bottom: 4px;   /* kleiner Abstand zwischen Überschrift und Text */
}

/* 
  Ende der balanced-list.css
  --------------------------
  Dieses Stylesheet kann flexibel auf beliebige Listen angewendet werden, 
  die automatisch zweispaltig dargestellt werden sollen. 
*/



/* Nur für die Buttons der 10 Gründe */
/* Nur für die Buttons der 10 Gründe */
.hc-toggle-btn {
  border: none;
  background: transparent;
  width: 100%;
  text-align: center; /* Pfeil zentriert */
  padding: 6px 0;
  cursor: pointer;
  font-size: 1.2rem;
}

.hc-toggle-btn .arrow {
  font-size: 1.5rem; /* etwas größer, da breiter Pfeil */
  transition: transform 0.25s ease;
  display: inline-block;
  line-height: 1;
}

.hc-toggle-btn.active .arrow {
  transform: rotate(180deg); /* ⌵ wird automatisch zu ⌴ */
}