body.light-mode #kinetic-demo-container,
body.light-mode #kinetic-demo-container span,
body.light-mode #kinetic-demo-container div,
body.light-mode #kinetic-demo-container small {
  color: #f0eee9 !important;
}
body.light-mode #kinetic-demo-container {
  background-color: #2f3336 !important;
}
body.light-mode #kinetic-demo-container .logo-mode-light {
  display: none !important;
}
body.light-mode #kinetic-demo-container .logo-mode-dark {
  display: block !important;
}
.kinetic-wrapper {
  --kin-dark: #2f3336;
  --kin-offwhite: #f0eee9;
  --kin-accent: #5a6863;
  --accent-green: #C0EDD7;
  position: relative;
  width: 100%;
  background-color: var(--kin-dark);
  color: var(--kin-offwhite);
  border-radius: 8px;
  overflow: hidden;
	display: flex;
  flex-direction: column;
  transition: all 0.6s ease;
  box-sizing: border-box;
  margin: 0 !important;
  border: 1px solid var(--kin-accent);
}

.kinetic-wrapper * {
  box-sizing: border-box;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  margin: 0;
  padding: 0;
}
.kinetic-header {
  display: flex;
  justify-content: flex-end;
  padding: 1.5rem 3rem 1rem 1.5rem;
  z-index: 10;
}

.kinetic-toggle-zone { 
  display: flex; 
  align-items: center; 
  gap: 1.5rem; 
}

.kinetic-toggle-labels { 
  text-align: right; 
  line-height: 1.4; 
}

.kinetic-toggle-labels small { 
  font-size: 0.9rem; 
  text-transform: uppercase; 
  color: var(--accent-green); 
  display: block;
  letter-spacing: 1px;
}

.kinetic-toggle-labels span { 
  font-size: 0.85rem; 
  font-weight: 600; 
  display: block; 
}

.kinetic-switch { position: relative; width: 44px; height: 24px; display: block; }
.kinetic-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.kinetic-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid var(--accent-green); border-radius: 24px; }
.kinetic-slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: var(--accent-green); border-radius: 50%; }

#kinetic-demo-container input:checked + .kinetic-slider:before { transform: translateX(20px); background: var(--kin-offwhite); }
#kinetic-demo-container input:checked + .kinetic-slider { border-color: var(--kin-offwhite); }

.kinetic-main {
  display: flex;
  padding: 1.5rem 3rem;
  justify-content: flex-start;
  flex: 1;
  align-items: center;
}

.kinetic-article { width: 100%; }

.kinetic-brand-left {
  position: relative;
  min-height: 90px; 
  display: flex;
  justify-content: flex-start;
}

.kinetic-logo-anchor {
  position: relative;
  width: 110px;
  height: 90px;
}

.kinetic-logo-static,
.kinetic-logo-fluid {
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  display: flex;
  align-items: center;
}

.kinetic-real-logo {
  height: 90px !important; 
  width: auto !important;
  max-width: none !important; 
}

.kinetic-logo-static { opacity: 1; z-index: 2; }
.kinetic-logo-fluid { opacity: 0; z-index: 1; clip-path: inset(0 100% 0 0); }

.kinetic-fluid-mode .kinetic-logo-static { opacity: 0; }
.kinetic-fluid-mode .kinetic-logo-fluid {
  opacity: 1;
  z-index: 3;
  clip-path: inset(0 -20% 0 0); 
  filter: drop-shadow(0 15px 35px rgba(192, 237, 215, 0.15));
}

@media (max-width: 600px) {
  .kinetic-header { padding: 1.5rem; }
  .kinetic-toggle-zone {
    width: 100%;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
  }
  .kinetic-main { padding: 2rem 1.5rem 4rem 1.5rem; }
  .kinetic-logo-anchor {
    width: 100px;
    height: 90px;
  }
  .kinetic-real-logo, .kinetic-logo-static, .kinetic-logo-fluid {
    height: 90px !important; /* <-- KORRIGIERT VON 900px AUF 90px */
  }
}