/* GENERAL */
*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
  text-decoration: none;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
  font: inherit;
}

body {
  overflow-x: hidden;
  /* Immer Dark Mode verwenden (keine Unterscheidung light-dark) */
  background: var(--clr-primary);
  color: var(--clr-primary-light);
  font-family: var(--ff-base);
  font-weight: var(--fw-regular);
}

@view-transition {
  navigation: auto;
}

:root {
/* FONTS */
--ff-base: 'Inter', sans-serif;
--fw-regular: 400;
--fw-medium: 600;
--fw-bold: 900;

/* COLORS */
  /* Entferne light dark scheme und erzwinge dark */
  color-scheme: dark;

  --clr-primary: hsl(30, 67%, 1%);
  --clr-primary-light: hsl(199, 69%, 94%);
  --clr-grey: hsl(0, 13%, 75%);
  --clr-active: hsl(201, 55%, 39%);
  --clr-active-hover: hsl(201, 55%, 44%);
  --clr-secondary: hsl(33, 53%, 64%);
  --clr-secondary-hover: hsl(33, 53%, 69%);
  --clr-success: #8dcf75;
  --clr-warning: #ffd18d;
  --clr-error: #c34a36;

  interpolate-size: allow-keywords;
}

/* TEXT */
h1, h2, h3, h4, p {
  /* Immer im Dark Mode (keine Unterscheidung light-dark) */
  color: var(--clr-primary-light);
} 

h1 {
  font-size: clamp(2.625rem, calc(6vw + 1rem), 3.55rem);
  line-height: 1.129;
  font-weight: var(--fw-bold);
  letter-spacing: -0.022;
} 

h2 {
  font-size: clamp(2.058rem, calc(4.5vw + 1rem), 3rem);
  line-height: 1.272;
  font-weight: var(--fw-medium);
  letter-spacing: -0.022;
} 

h3 {
  font-size: clamp(1.618rem, calc(2.5vw + 1rem), 1.9rem);
  line-height: 1.272;
  font-weight: var(--fw-medium);
  letter-spacing: -0.02;
} 

p {
  font-size: clamp(1rem, calc(1.3vw + 1rem), 1.1rem);
  font-weight: var(--fw-regular);
  line-height: 1.618;
  letter-spacing: -0.011;
  margin-top: 12px;
} 

.wrapper > p:last-child {
  margin-bottom: 24px;
} 

a {
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-active);
  transition: .2s ease-in-out;
} 

a:hover {
  color: var(--clr-active-light);
}

::selection {
  background: var(--clr-secondary-hover);
} 

::-moz-selection {
  background: var(--clr-secondary-hover);
}

section {
  margin: 128px 0;
}

.clr-active {
  color: var(--clr-active);
}

/* VISUALS AND ELEMENTS */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.fs-bg-img {
  height: 100dvh;
  height: 100vh;
  background: url("img/img.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

input, button, textarea, select {
  line-height: inherit;
  color: inherit;
  outline: none;
  field-sizing: content;
  min-inline-size: 20ch;
  max-inline-size: 100%;
} 

input, select {
  border: 3px solid var(--clr-primary-light);
  border-radius: 0.25em;
  padding: 0.375em 0.75em;
  background-color: rgba(0, 0, 0, 0.2);
} 

button, [role="button"] {
  cursor: pointer;
  background-color: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0.75em 1em;
  border-radius: 0.313em;
  font-size: 1.1rem;
  letter-spacing: .8px;
  font-weight: 700;
  text-transform: uppercase;
  transition: .2s;
} 

.primary-button {
  color: var(--clr-primary);
  background-color: var(--clr-secondary);
  background-image: linear-gradient(210deg, var(--clr-primary-light) 0%, var(--clr-active) 100%);
  transition: all 0.3s ease;
} 

.primary-button:hover, .primary-button-light:hover, .primary-button-main:hover {
  transform: translateY(-2px);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
} 

.primary-button-main {
  color: var(--clr-primary);
  background-color: var(--clr-secondary);
  background-image: linear-gradient(210deg, var(--clr-secondary) 0%, var(--clr-active) 100%);
  transition: transform 0.3s ease;
} 

.secondary-button {
  color: var(--clr-active);
  border: 1px solid var(--clr-active);
} 

.secondary-button:hover {
  background-color: var(--clr-active);
  color: var(--clr-primary);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 7.5px;
  background: var(--clr-primary);
  border: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--clr-primary-light);
}

.gradient {
  background: linear-gradient(160deg, var(--clr-active) 0%, var(--clr-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* cards */
.card {
  display: flex;
  background: linear-gradient(160deg, rgba(45, 116, 154, 0.2) 0%, rgba(33, 84, 112, 0.2) 25%, rgba(21, 53, 71, 0.2) 50%, rgba(13, 32, 43, 0.2) 75%, rgba(5, 13, 18, .2) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 2px solid rgba(45, 116, 154, 0.08);
  border-radius: 5px;
  padding: 32px 24px;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

/* HEADER */
header input[type="checkbox"]{
  display: none;
} 

#active:checked ~ .menu-items{
  clip-path: circle(75%);
}

#header-back .svg-icon {
  width: 3.5rem;
  position: fixed;
  top: 24px;
  left: 24px;
  fill: var(--clr-primary-light);
  background: linear-gradient(160deg, rgba(4, 3, 1, 0.9) 0%, rgba(15, 38, 51, 0.9) 25%, rgba(24, 63, 84, 0.9) 50%, rgba(35, 92, 122, 0.9) 75%, rgba(45, 116, 154, .9) 100%);
  border-radius: 50%;
  padding: 10px;
}

.menu-btn {
  position: fixed;
  z-index: 10;
  right: 16px;
  top: 16px;
  height: 64px;
  width: 64px;
  text-align: center;
  line-height: 64px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--clr-primary-light);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background-color: var(--clr-primary);
} 

.menu-items {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--clr-primary);
  clip-path: circle(25px at calc(100% - 45px) 45px);
  transition: all 0.3s ease-in-out;
  z-index: 9;
} 

.menu-items ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
} 

.menu-items ul li {
  margin: 16px 0;
} 

.menu-items ul li a {
  color: var(--clr-primary-light);
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 12px;
  position: relative;
  line-height: 50px;
  transition: all 0.3s ease;
} 

.menu-items ul li a:hover {
  color: var(--clr-grey);
}

.ham {
  cursor: pointer;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
} 

.ham .line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: var(--clr-primary-light);
  stroke-width: 5.5;
  stroke-linecap: round;
} 

.ham .top {
  stroke-dasharray: 40 160;
} 

.ham .middle {
  stroke-dasharray: 40 142;
  transform-origin: 50%;
  transition: transform 400ms;
} 

.ham .bottom {
  stroke-dasharray: 40 85;
  transform-origin: 50%;
  transition: transform 400ms, stroke-dashoffset 400ms;
} 

.ham.active .top {
  stroke-dashoffset: -64px;
} 

.ham.active .middle {
  /* stroke-dashoffset: -20px; */
  transform: rotate(90deg);
} 

.ham.active .bottom {
  stroke-dashoffset: -64px;
} 

.hamRotate.active {
  transform: rotate(45deg);
} 

.hamRotate180.active {
  transform: rotate(180deg);
}

/* MAIN */
main {
  margin-top: 64px;
} 

main #logo {
  height: auto;
  width: 150px;
  margin-bottom: 24px;
} 

main h1 {
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
} 

main h1 .highlight-container {
  position: relative;
  display: inline-block;
} 

main h1 .highlighter-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: auto;
  height: auto;
  max-width: 140%;
  max-height: 140%;
} 

main h1 .workout-app-container {
  position: relative;
  display: inline-block;
} 

main .line-highlighter {
  position: absolute;
  top: 80%; /* Position it directly below the text */
  left: 0;
  width: 100%; /* Match the width of the text */
  height: auto;
  margin-top: 2px; /* Small gap between text and highlighter */
} 

main #main-img {
  width: 460px;
} 

main button {
  margin-top: 38px;
}

@media screen and (max-width: 70em) {
  main #logo {
    display: block;
    position: relative;
    z-index: 2;
    margin: 0 auto 24px auto;
  } 
  
  main #main-img {
    display: none;
  } 
  
  main button {
    margin-top: 48px;
  } 
  
  main {
    position: relative;
    margin-top: 0;
  } 
  
  main .main-desc {
    text-align: center;
  } 
  
  main #main-img {
    width: 100%;
    padding: 0;
    margin: 0;
    filter: blur(7px);
    scale: 102%;
  } 
  
  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
} 

/* CALCULATOR */ 
.calculator-desc h2 {
  text-transform: uppercase;
  text-align: center;
} 

.calculator-desc p {
  margin-bottom: 24px;
  text-align: center;
} 

.calculator-items {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
} 

.calculator-items {
  margin-bottom: 24px;
} 

.rm-calculator {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
} 

.rm-calculator button {
  width: 100%;
} 

.rm-content {
  width: 480px;
  margin: 0 auto;
} 

@media screen and (max-width: 60em) {
  .rm-content {
    width: 100%;
  }
}

.calculator {
  border-radius: 8px;
  margin-right: 20px;
} 

.calculator button {
  margin-top: 12px;
  width: 100%;
}

@media (max-width: 70em) {
  .calculator {
    margin-right: 0;
    margin-bottom: 20px;
    width: 100%;
  }
}

.graph-container {
  border-radius: 8px;
} 

.graph-container h3 {
  margin: 0 0 24px 0;
  text-align: center;
}

.calculator-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
} 

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 12px;
} 

.form-group label {
  margin-bottom: 4px;
}

#graphArea, #strengthChart, .chart-area, canvas {
  width: 100%;
  position: relative;
  height: 500px;
} 

@media screen and (max-width: 42em) {
  #graphArea, #strengthChart, .chart-area, canvas {
    width: 100%;
    position: relative;
    height: 380px;
    margin-top: 16px;
  } 
}

.info-box {
  margin-top: 20px;
  padding: 15px;
  /* Dunklen Hintergrund für Dark Mode */
  background-color: rgba(45, 116, 154, 0.2);
  border-radius: 6px;
}

.info-box h3 {
  color: var(--clr-active);
  margin-bottom: 5px;
  font-size: 1rem;
}

.info-box p {
  /* Anpassung für Dark Mode */
  color: var(--clr-primary-light);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* RESULTS */
.result-desc h2 {
  text-transform: uppercase;
} 

.result-desc p {
  margin-bottom: 24px;
} 

.create {
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
} 

.result-desc span {
  width: 100%;
  text-align: center;
  margin-top: 12px;
} 

.img-grid {
  display: grid;
  grid-template-areas:
  "a ."
  "a b"
  "a b"
  ". b";
  gap: 24px;
  margin-left: 64px;
} 

#a {
  grid-area: a;
  width: 820px;
} 

#b {
  grid-area: b;
  width: 820px;
} 

@media screen and (max-width: 52em) {
  .create {
    margin-bottom: 24px;
  } 
  
  .img-grid {
    margin-left: 0;
  } 
} 

@media screen and (max-width: 359px) {
  .create {
    width: 100%;
  }
}

/* DIFFERENT */
.different span {
  font-size: 3rem;
  margin-right: 24px;
} 

.different h2 {
  margin-bottom: 24px;
  color: var(--clr-active);
  text-transform: uppercase;
} 

.different-item {
  display: flex;
} 

@media screen and (max-width: 831px) {
  .different-item {
    margin-top: 24px;
  }
}

/* CTA */
.cta h2 {
  color: var(--clr-active);
} 

.cta button {
  margin-top: 20px;
} 

.cta-desc {
  display: flex;
  align-items: center;
} 

.cta img {
  width: 500px;
  margin-left: 12px;
} 

@media screen and (max-width: 60em) {
  .cta-desc {
    flex-direction: column;
  } 
  
  .cta-desc-items {
    text-align: center;
  } 
  
  .cta-desc img {
    margin: 48px auto 0 auto;
  } 
  
  .cta button {
    margin-bottom: 20px;
  }
}

/* START */
.start h2 {
  text-transform: uppercase;
  color: var(--clr-active);
  text-align: center;
} 

.start h3 {
  color: var(--clr-active);
} 

.start-desc p {
  text-align: center;
  font-style: italic;
  margin-bottom: 24px;
} 

.start button {
  margin-top: 20px;
  text-transform: capitalize;
  color: var(--clr-primary);
}

/* INFO */
.info img {
  width: 480px;
  margin-right: 48px;
} 

.info h2 {
  color: var(--clr-active);
} 

.info button {
  margin-top: 24px;
} 

@media (max-width: 60em) {
  .info img {
    margin: 0 auto 32px auto;
  }
}

/* BLOG */
.tiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 18px;
} 

.tile {
  text-align: center;
  background: linear-gradient(160deg, rgba(45, 116, 154, 0.2) 0%, rgba(33, 84, 112, 0.2) 25%, rgba(21, 53, 71, 0.2) 50%, rgba(13, 32, 43, 0.2) 75%, rgba(5, 13, 18, .2) 100%);
  border-radius: 5px;
} 

.tile img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
} 

.tile-desc {
  padding: 48px 24px;
} 

.tile button {
  margin-top: 12px;
} 

.tiles-title {
  text-align: center;
  margin-bottom: 96px;
}

/* APP INSIGHTS */
.app-insights .hero {
  background: var(--clr-primary);
  color: var(--clr-primary-light);
  padding: 4rem 0;
  margin-bottom: 2rem;
}

.app-insights .hero h1 {
  color: var(--clr-active);
  -webkit-text-fill-color: var(--clr-primary-light);
  margin-bottom: 1rem;
}

.app-insights .hero p {
  font-size: 1.2rem;
}

.app-insights .section {
  margin-bottom: 24px;
}

/* Feature section */
.app-insights .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.app-insights .feature-card {
  /* Anpassung für Dark Mode */
  background: var(--clr-primary);
  border: 1px solid rgba(45, 116, 154, 0.3);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.app-insights .feature-card:hover {
  transform: translateY(-5px);
}

.app-insights .feature-number {
  font-size: 3rem;
  font-weight: 800;
  color: rgba(58, 134, 255, 0.2);
  line-height: 1;
  margin-bottom: 1rem;
}

/* List styles */
.app-insights ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.app-insights ul li {
  margin-bottom: 0.5rem;
  list-style-type: disc;
  color: var(--clr-primary-light);
}

/* Quote */
.app-insights blockquote {
  border-left: 4px solid var(--clr-active);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .app-insights .hero {
    padding: 3rem 0;
  }
    
  .app-insights .feature-card {
    padding: 1.5rem;
  }
}

/* FORM */
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
} 

input:not(:placeholder-shown):valid {
  border: 3px solid var(--clr-success);
  background-image: url(../img/checked-green.webp);
} 

input:not(:placeholder-shown):invalid {
  border: 3px solid var(--clr-error);
  background-image: url(../img/checked-red.webp);
} 

input:not(:placeholder-shown):valid,
input:not(:placeholder-shown):invalid {
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: calc(100% - 12px);
} 

textarea {
  /* move the label to the top */
  vertical-align: top;
  /* turn off scroll bars in IE unless needed */
  overflow: auto;
  /* make the textare responsive */
  field-sizing: content;
  width: 100%;
  min-height: 5em;
  background-color: rgba(0, 0, 0, 0.2);
  border: 3px solid var(--clr-primary-light);
  border-radius: 0.25em;
  padding: 0.375em 0.75em;
  color: var(--clr-primary-light);
}

.hidden {
  display: none;
}

/* FOOTER */
footer {
  background-color: var(--clr-active);
  color: var(--clr-primary);
  padding: 128px 0;
} 

footer img {
  width: 120px;
  height: auto;
} 

footer h3, footer p, footer a {
  color: var(--clr-primary);
} 

footer a {
  color: var(--clr-primary);
  font-size: 1.2rem;
  margin-bottom: 4px;
} 

footer .legal {
  display: flex;
  flex-direction: column;
} 

footer h3 {
  margin: 64px 0 12px 0;
} 

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mid-row {
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 52em) {
  .footer {
    display: block;
    text-align: left;
  }
  
  .footer-desc {
    flex-direction: row;
    justify-content: space-between;
  }
} 

/* remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion) {
  html:focus-within {
    scroll-behavior: auto;
  }

  * {
    animation: none !important;
  }
}

/* WEBSITE CONTENT */
/* SMALL SCREENS LAPTOP STYLES */
@media (min-width: 52em) {
  /* flex */
  .flex {
    display: flex;
  } 
  
  .row-center {
    align-items: center;
  } 
  
  .column-left {
    flex-direction: column;
    align-items: flex-start;
  } 
  
  .column-center {
    flex-direction: column;
    justify-content: center;
  } 
  
  .space-around {
    justify-content: space-around;
  } 
  
  .space-between {
    justify-content: space-between;
  }

  /* grid */
  .grid {
    width: 100%;
    display: grid;
    gap: 1.5rem;
  } 
  
  .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  } 
  
  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }
}

.wrapper {
  padding: min(1.25em, 3em);
}

/* DESKTOPS, LARGE SCREEN STYLES */
@media (min-width: 60em) {
  .wrapper {
    max-width: clamp(72rem, 90vw, 68rem);
    margin-inline: auto;
  }
}

/* Erzwinge Dark Mode auch bei Medienabfragen */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: dark;
  }
  
  body {
    background: var(--clr-primary);
    color: var(--clr-primary-light);
  }
  
  h1, h2, h3, h4, p {
    color: var(--clr-primary-light);
  }
}