@import url('darkmode.css');

/* Farbdefinitionen */
:root {
  --bg: #f5f6f8;                 /* Ruhiger, heller Hintergrund */
  --text: #2b2b2b;               /* Sanftes, dunkles Grau für Text */
  --accent: #c74343;             /* Akzent (bleibt gleich) */
  --accent-light: #f5e4e4;       /* Dezenter Rotton für Hover */
  --card-bg: #ffffff;            /* Klare Kartenfläche */
  --status-learned: #a9f7d0;     /* Softes Gelb */
  --status-repeat: #fcd9d9;      /* Mildes Rosa */
  --progress-bg: #f5e4e4;        /* Helles Rosa für Fortschritt-Hintergrund */
  --progress-fill: linear-gradient(90deg, #a9f7d0;, ##fcd9d9); /* Softer Verlauf */

  --button-bg: #f6f7f9;          /* Dezente Fläche für Buttons */
  --button-border: #dcdfe3;      /* Zarter Rahmen */
}





/* Basis-Stile */
body {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
}

#status-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  max-width: 300px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.status-box {
  padding: 6px 10px;
  font-size: clamp(12px, 2.5vw, 14px);
  color: var(--text);
  text-align: center;
  border-radius: 6px;
  background-color: var(--highlight);
}

#learned-box {
  background-color: var(--status-learned);
}

#repeat-box {
  background-color: var(--status-repeat);
}

#card {
  width: 80%;
  max-width: 300px;
  height: 250px;
  background-color: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(24px, 3vw, 28px);
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  position: relative;
  color: var(--text);
  margin-bottom: 20px;
}

#card.show-back {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: var(--card-bg);
}

.back {
  transform: rotateY(180deg);
}

#progress-bar {
  width: 80%;
  max-width: 300px;
  height: 20px;
  background-color: var(--accent-light);
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
}

#progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #dcd171, #b45154);
  width: 0%;
  border-radius: 10px;
  transition: width 1.5s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.button-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.button {
  padding: 10px 20px;
  font-size: clamp(16px, 2.5vw, 20px);
  cursor: pointer;
  border-radius: 12px;
  background-color: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--text);  color: var(--text);
  transition: background-color 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button:hover {
  background-color: var(--accent-light);
}

#back-arrow {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: clamp(40px, 5vw, 40px);
  color: var(--accent);
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
}

#back-arrow:hover {
  color: #e18a96;
  transform: translateX(-5px);
}

/* Responsive Anpassungen */
@media (max-width: 375px) {
  #card { height: 180px; padding: 15px; }
  .button { font-size: 14px; padding: 8px 16px; }
  #progress-bar { height: 15px; }
}

@media (max-width: 768px) {
  #status-container { max-width: 350px; }
  #card { height: 200px; padding: 15px; }
  .button { font-size: 16px; padding: 10px 20px; }
}

@media (max-width: 1024px) {
  #card { max-width: 400px; height: 280px; }
  .button { font-size: 18px; padding: 12px 24px; }
  #progress-bar { max-width: 400px; }
}

@media (min-width: 1025px) {
  #card { max-width: 500px; height: 350px; }
  .button { font-size: 20px; padding: 15px 30px; }
  #progress-bar { max-width: 500px; }
}