/* style.css
   Mobile-first styles, light/dark theme, sticky footer for mobile,
   accessible tap targets and overall pleasant UI for the WPU pages.
*/

/* -------------------------
   CSS variables (light default)
   ------------------------- */
:root {
  --bg: #d9e6dd;
  --surface: #FCF8F8;
  --text: #1B1C1B;
  --muted: #ffffff;
  --card-shadow: 0 8px 24px rgba(0,0,0,0.06);

  --primary: #7c7c73;
  --on-primary: #FFFFFF;
  --accent: #AA2E29;
  --accent-on: #FFFFFF;

  --success: #88A7A4;
  --danger: #BA1A1A;

  --outline: #C6C7C0;
  --control-bg: #F0F0F0;
  --control-border: #D8D8D6;
  --focus: rgba(86,166,156,0.16);
  --radius: 1px;

  --max-width: 980px;
  --content-padding: 16px;
  --footer-height: 76px;
}

/* Dark theme overrides via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #d9e6dd;
    --surface: #141313;
    --text: #ffffff;
    --muted: #BFBFBF;
    --card-shadow: 0 18px 40px rgba(0,0,0,0.6);

    --primary: #F2FFF5;
    --on-primary: #26332C;
    --accent: #FFB4AB;
    --accent-on: #690006;

    --success: #88A7A4;
    --danger: #FFB4AB;

    --outline: #464742;
    --control-bg: #1C1B1B;
    --control-border: #2A2A2A;
    --focus: rgba(242,255,245,0.08);
  }
}


/* Global reset & base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: 18px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

/* topbar */
.topbar {
  background: transparent;
  padding: 12px var(--content-padding);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.topbar-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width: var(--max-width);
  margin: 0 auto;
}
.title {
  margin:0;
  font-size: 1rem;
  font-weight:700;
  color: var(--primary);
}
.controls {
  display:flex;
  gap:8px;
  align-items:center;
}
.education-label { font-size:0.85rem; color: var(--muted); text-transform:none; }

/* Theme toggle button */
.theme-toggle{
  background: transparent;
  border: 1px solid var(--control-border);
  padding: 6px 8px;
  border-radius: 8px;
  cursor:pointer;
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
}
.theme-toggle:focus { box-shadow: 0 0 0 6px var(--focus); outline:none; }

/* container */
.container {
  max-width: 720px;
  margin: 12px auto 0 auto;
  padding: 0 var(--content-padding);
}

/* card / form */
.card {
	border-radius: 44px;
	padding: 18px;
	box-shadow: var(--card-shadow);
	border: 1px solid rgba(0,0,0,0.02);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	overflow: hidden;
	background-color: #ea4d53;
}

/* legend */
.legend { font-weight:600; margin-bottom: 8px; color: var(--muted); }

/* labels */
.checkbox-label, .radio-label {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.01), transparent);
  border: 1px solid transparent;
  transition: background .12s, transform .06s;
  cursor:pointer;
}
.checkbox-label:hover, .radio-label:hover { background: rgba(0,0,0,0.03); transform: translateY(-1px); }
.checkbox-label input, .radio-label input {
  width:20px;
  height:20px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.checkbox-text { font-size:1rem; color: var(--text); }

/* info block */
.info-block { margin-bottom: 12px; color: var(--muted); font-weight:600; }
.info-block strong { color: var(--primary); }

/* counter / footer */
.form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
}

/* primary button - mobile friendly */
button.primary {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  padding: 12px 16px;
  border-radius: 1px;
  cursor: pointer;
  font-weight:700;
  font-size:1rem;
  min-height:44px;
}
button.primary[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  background: #bdbdbd;
  color:#fff;
}

/* small text */
.muted { color: var(--muted); font-size:0.95rem; }

/* sticky footer on small screens */
@media (max-width:600px) {
  main.container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Vollbild minus Footer wird unten korrigiert */
  }

  .container { margin-bottom: 0; }

  /* Sticky entfernen: Footer bleibt normal im Flow */
  .form-footer {
    position: static;      /* statt fixed */
    height: auto;          /* Höhe automatisch */
    background: var(--surface);
    padding: 10px var(--content-padding);
    box-shadow: none;      /* Schatten entfernen */
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
    z-index: auto;
  }

  button.primary {
    width: auto;           /* volle Breite entfällt */
    min-width: 140px;      /* Standardgröße */
  }
  .counter { width: auto; text-align:left; }

  /* WPU-Liste scrollbar machen */
  #wpuList {
    flex: 1 1 auto; /* füllt verfügbaren Platz */
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 8px;
  }

  #wpuList::-webkit-scrollbar {
    width: 6px;
  }
  #wpuList::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
  }
  #wpuList::-webkit-scrollbar-track {
    background: transparent;
  }
}
/* desktop adjustments */
@media (min-width:601px) {
  .form-footer { margin-top:24px; }
  button.primary { min-width:140px; }
}

/* accessibility focus */
:focus { outline: none; }
input:focus, button:focus, a:focus { box-shadow: 0 0 0 6px var(--focus); border-radius: 8px; }

/* utility */
.center { text-align:center; }