:root {
--primary-color: #0d6efd;
--secondary-color: #454749;
--header-color: #57A3EC;
--background-color: #e5e7eb;
--card-background: #f8f8f8f8;
--sidebar-background: #ededed;
--border-color: rgba(0,0,0,0.1);
--text-color: #333;
--etp-color: #fff;
--button-color: #dee2e6;
--hover-color: #bbbfc3;
--active-color: #0d6efd;
--active-hover-color:#0b5ed7;
--favorite-color: #d2b602; 
--favorite-hover-color: #a08b02; 
--unwanted-color: #e53935;
--unwanted-hover-color: #b42c2a;
--youtube: #e53935;
--youtube-border: #d32f2f;
}

[data-theme="dark"] {
--primary-color: #0d6efd;
--secondary-color: #e9ecef;
--header-color: #2d2d2d;
--background-color: #020e22;
--card-background: #2d2d2d;
--sidebar-background: #333;
--border-color: rgba(255,255,255,0.1);
--text-color: #dee2e6;
--etp-color: #dee2e6;
--button-color: #404040;
--hover-color: #302f2f;
--active-color: #0d6efd;
--active-hover-color:#0b5ed7;
--favorite-color: #705402;
--favorite-hover-color: #443301;
--unwanted-color: #a42826; 
--unwanted-hover-color: #701b1a; 
--youtube: #a42826;
--youtube-border: #791a1a;
}

* {box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif;}
.container{
  max-width:1200px;
  margin:0 auto;
  background: var(--card-background);
  border-radius:8px;
  box-shadow:0 4px 12px var(--border-color);
  padding:20px;
}h2, h3, h4 {margin-bottom: 10px; color: #333;}
.flex {display: flex; gap: 20px;}
.sidebar { width:25%; background: var(--sidebar-background); padding:15px; border-radius:8px; }

/*.content {width: 75%;}*/

a {color:#0d6efd;
}

.card { padding: 15px; border-radius: 8px; margin-bottom: 15px;}
.exercise-card {border-left: 4px solid #0d6efd; padding-left: 10px; margin-bottom: 10px;}
.exercise-title {font-weight: bold; font-size: 18px;}
.exercise-meta {color: #6c757d; font-size: 14px; margin: 5px 0;}
.exercise-desc {margin: 5px 0; font-size: 15px;}
.form-group {margin-bottom: 15px;}
.range-label {display: block; margin-bottom: 5px;}
input[type="range"] {width: 100%;margin-left: 6px;margin-right: 6px;}
.range-value {text-align: center; font-weight: bold; margin-top: 5px;}
.equipment-btn {display: inline-block; margin-right: 5px; margin-bottom: 5px;}
.tips {background: #fff3cd; padding: 15px; border-radius: 8px; margin-top: 20px;}
.footer {text-align: center; margin-top: 20px; color: var(--text-color);; font-size: 14px;}
.btn-success {background: #198754; color: white;}
.btn-success:hover {background: #157347;}
body {
background: var(--background-color);
color: var(--text-color);
padding: 20px;
}

.bodymap path {
fill: rgb(214, 212, 212); 
transition: fill 0.3s ease; 
cursor: pointer; 
}
.bodymap:hover path {
fill: rgb(254, 91, 127); 
}
  .bodymap path.active {
fill: rgb(132, 209, 111); 
}


button{
  transition:all .1s ease;
  width:auto;
  padding:8px 12px;
  margin-bottom: 8px; 
  border:none;
  border-radius:4px;
  cursor:pointer;
  background: var(--button-color);
  color: var(--text-color);
}
button:hover {
background: var(--hover-color);
}

h4,h3,h2 {
color: var(--text-color)
}
button.unwanted {
background: var(--unwanted-color);
color: white;
}
button.unwanted:hover {
background: var(--unwanted-hover-color);
}
button.favorite {
background: var(--favorite-color);
color: white;
}
button.favorite:hover {
background: var(--favorite-hover-color);
}
button.active {
background: var(--active-color);
color: white;
}
button.active:hover {
background: var(--active-hover-color);
}

.card {
background: var(--card-background);
box-shadow: 0 2px 4px var(--border-color);
}

.exercise-card {
border-left: 4px solid var(--primary-color);
}

.exercise-meta {
color: var(--secondary-color);
}

.tips {
background: var(--card-background);
}

@media (max-width: 800px) {
.flex {flex-direction: column;}
.sidebar, .content {width: 100%;}
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.header-container button,.shuffle-btn button {
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
width: auto;
white-space: nowrap;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px;
background: var(--header-color);
box-shadow: 0 4px 12px var(--border-color);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: 60px;
gap: 10px; 
}
.header-container h1 {
text-align: center;
flex-grow: 1;
margin: 0;
text-align: center; 
color: var(--etp-color)
}
.header-buttons,.left-buttons {
display: flex;
padding: 10px 0px 0px 0px;
gap: 10px; 
}

.shuffle-btn {
width: fit-content;
}
.exercise-title {
flex-grow: 1;
}
.exercise-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.video-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.video-modal.hidden {
display: none;
}
.video-content {
position: relative;
width: 90%;
max-height: 90%;
max-width: 800px;
aspect-ratio: 9 / 16;
background-color: black;
margin-top: 40px; 
}
.video-content iframe {
position: absolute;
width: 100%;
height: 100%;
border: none;
}
#closeVideo {
position: absolute;
top: -40px;
right: 0;
font-size: 30px;
background: none;
border: none;
color: white;
cursor: pointer;
z-index: 10000;
min-height: 40px;
min-width: 40px;
padding: 5px;
overflow: visible;
}

@media (max-height: 400px) {
#closeVideo {
top: 150px;
right: 0;
background-color: rgba(0,0,0,0.5); 
}

.video-content {
margin-top: 0; 
}
}

.prevent-select {
-webkit-user-select: none;
-ms-user-select: none; 
user-select: none; 
}

.advanced-toggle {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: bold;
margin: 10px 0;
}

.advanced-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
.advanced-content.visible {
max-height: 1000px; /* large enough to hold the content */
opacity: 1;
}
.collapse-arrow {
transition: transform 0.3s ease;
}

.collapse-arrow.open {
transform: rotate(180deg);
}

.advanced-content.hidden {
display: none;
}

.muscle-slider {
display: flex;
align-items: center;
margin: 6px;
padding: 6px;
}

.muscle-slider label {
width: 120px;
font-weight: 500;
}
.gradient-border {
--border-width: 1px;
position: relative;
border-radius: 10px;
}
.gradient-border::after {
position: absolute;
content: "";
top: calc(-1 * var(--border-width));
left: calc(-1 * var(--border-width));
z-index: -1;
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
background-size: 300% 300%;
background-position: 0 50%;
border-radius: 10px;
animation: moveGradient 4s alternate 2, vanishBorder 8s forwards; /* Delay vanishBorder */
}

@keyframes moveGradient {
50% {
background-position: 100% 50%;
}
}

@keyframes vanishBorder {
0% {
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
}
99% {
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
}
100% {
width: 0;
height: 0;
}
}

.setting-btn {
width: 35px;
height: 35px;
padding: 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 10px;
cursor: pointer;
}
.bar {
width: 50%;
height: 2px;
display: flex;
align-items: center;
justify-content: center;
background-color:var(--text-color);
position: relative;
border-radius: 2px;
}
.bar::before {
content: "";
width: 2px;
height: 2px;
position: absolute;
background-color:var(--text-color);
border-radius: 50%;
border: 2px solid var(--text-color);
transition: all 0.3s;
}
.bar1::before {
color: var(--text-color);
transform: translateX(-4px);
}
.bar2::before {
color: var(--text-color);
transform: translateX(4px);
}
.setting-btn:hover .bar1::before {
color: var(--text-color);
transform: translateX(4px);
}
.setting-btn:hover .bar2::before {
color: var(--text-color);
transform: translateX(-4px);
}
.advanced-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
user-select: none;
width: fit-content;
border-radius: 8px;
}
.setting-btn.active .bar {
background-color: white;
color: white;
}
.setting-btn.active .bar1::before,
.setting-btn.active .bar2::before {
background-color: white;
border-color: white;
}

.button-with-icon {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--youtube-border);
font-family: "Istok Web", sans-serif;
letter-spacing: 1px;
padding: 0 12px;
text-align: center;
width: 120px;
height: 33px;
font-size: 13px;
text-transform: uppercase;
font-weight: normal;
border-radius: 3px;
outline: none;
user-select: none;
cursor: pointer;
transform: translateY(0px);
position: relative;
background: var(--youtube);
color: white;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
transition: 150ms all ease-in-out;
}

.button-with-icon .icon {
margin-right: 8px;
width: 24px;
height: 24px;
transition: all 0.5s ease-in-out;
}

.button-with-icon:hover  {
background: var(--youtube);
}

.button-with-icon:hover .text {
transform: translateX(85px);
}

.button-with-icon:hover .icon {
transform: translate(27px);
scale: 1.5;
}

.text {
transition: all 0.5s ease-in-out;
}

.button-row {
display: flex;
align-items: center;
gap: 10px;
}

.shuffle-btn,
.button-with-icon,
.shuffle {
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
cursor: pointer;
border: none;
}
.shuffle-btn {
height: 34px;
width: 34px;
}

.shuffle-btn svg {
width: 34px;
height: 34px;
}

.shuffle {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 80px;
height: 34px;
border: none;
padding: 0px 10px;
cursor: pointer;
border-radius: 3px;
}

.svg {
width: 12px;
position: absolute;
right: 0;
margin-right: 10px;
fill: var(--text-color);;
transition-duration: 0.3s;
}


#topbtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
cursor: pointer;
background-color: #198754;
color: white;
border-radius: 10px;
font-size: 18px;
}

.switch {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .2s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .2s;
border-radius: 50%;
}
input + .slider {
background-color: #4597df;
}
input:checked + .slider {
background-color: #df45da;
}
input:checked + .slider:before {
transform: translateX(18px);
}

.menorm {
display: initial;
}

.hidden {
display: none;
}

.tooltip {
  background: var(--card-background);
  color: var(--text-color);
  padding: 12px;
  border-radius: 6px;
  position: relative;
  margin-top: 10px;
  font-size: 14px;
  z-index: 10;
  max-width: 100%;
  white-space: normal;
  line-height: 1.4em;
}
/* Log nutzt .tooltip-Optik; nur Layout der Inputs ergänzen */
.log-panel .log-grid{
  display:grid;
  grid-template-columns: 90px 1fr 1fr;
  gap:8px 10px;
  align-items:center;
}
.log-panel .log-head{ font-weight:600; }
.log-panel .log-input{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--border-color);
  border-radius:6px;
  background: var(--card-background);
  color: var(--text-color);
}
.log-panel .log-input[type="number"]::-webkit-outer-spin-button,
.log-panel .log-input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.log-panel .log-input[type="number"]{ -moz-appearance:textfield; }
.log-panel .log-clear{
  margin-top:10px;
  height:32px;
  padding:0 10px;
  background: var(--button-color);
  color: var(--text-color);
  border:1px solid var(--border-color);
  border-radius:3px;
}
.log-panel .log-clear:hover{ background: var(--hover-color); }