:root{
  --bg: #e7f4f1;
  --card: #ffffff;
  --text: #12322d;
  --muted: #4d6b66;
  --primary: #1f6b5e;
  --primary-contrast: #fff;
  --accent: #ff8a3d;
  --border: #cde0dc;
}

/* --- Allgemein --- */
body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

.card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- Fortschrittsbalken --- */
.progress {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  margin: 1rem 0;
}

.progress__bar {
  height: 100%;
  background: #4CAF50;
  width: 0;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* --- Feedback --- */
.feedback {
  margin-top: 1rem;
  font-weight: bold;
}

.feedback.ok { color: green; }
.feedback.err { color: red; }

/* --- Drag & Drop --- */
.drag-assign__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.draggable {
  padding: 0.5rem 1rem;
  background: #87CEFA;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  transition: transform 0.2s;
}

.draggable:active {
  cursor: grabbing;
  transform: scale(1.05);
}

/* Dropzones */
.drag-assign__zones {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.dropzone {
  flex: 1;
  min-width: 150px;
  border: 2px dashed #aaa;
  border-radius: 8px;
  padding: 1rem;
  background: #f0f0f0;
}

.dropzone h3 {
  margin-top: 0;
  font-size: 0.9rem;
}

.dropzone__bin {
  min-height: 50px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: background 0.2s;
}

.dropzone__bin:hover {
  background: #e0f7fa;
}

/* --- Sortierliste --- */
.sortable {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sortable__item {
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  background: #FFE082;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  transition: transform 0.2s;
}

.sortable__item:active {
  cursor: grabbing;
  transform: scale(1.05);
}

/* --- Audio MCQ & Decision --- */
.choices label, .decision__item {
  display: block;
  margin: 0.5rem 0;
}

.decision__actions button {
  margin-right: 0.5rem;
}

button {
  cursor: pointer;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: #4CAF50;
  color: #fff;
  font-weight: bold;
  transition: background 0.2s;
}

button:hover {
  background: #45a049;
}

.btn-primary {
  background: #4CAF50;
}

.btn-primary:hover {
  background: #45a049;
}


*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); }
a{ color:var(--primary); text-decoration:none; }
.container{ max-width: 960px; margin: 1rem auto; padding: 0 1rem; }
.container.narrow{ max-width:720px; }

.hero{
  background: linear-gradient(180deg, #bde2db 0, #8fcec2 100%);
  color:#063a31; padding: 3.5rem 1rem; text-align:center;
  background-image: url('assets/img/cover.jpg'); background-size:cover; background-position:center;
}
.hero__text{ background: rgba(255,255,255,.82); display:inline-block; padding:1.2rem 1.4rem; border-radius:12px; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.2rem; margin:1rem auto; }
.lead{ font-size:1.1rem; }
.muted{ color:var(--muted); }

.btn{ display:inline-block; padding:.7rem 1rem; border-radius:8px; border:1px solid transparent; cursor:pointer; font-weight:600; }
.btn-primary{ background:var(--primary); color:var(--primary-contrast); }
.btn-ghost{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-small{ padding:.35rem .6rem; font-size:.9rem; }

.input{ font-size:1rem; padding:.6rem .8rem; border:1px solid var(--border); border-radius:8px; width:100%; max-width: 360px; }
.text-center{ text-align:center; }

.topbar{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.6rem 1rem; background:#134a41; color:#fff; }
.topbar__brand{ color:#fff; font-weight:700; }
.progress{ flex:1; height:8px; background:#2a6f64; margin-left:1rem; border-radius:999px; overflow:hidden; }
.progress__bar{ height:8px; background:#ffb36e; width:0; transition: width .3s; }

.drag-assign{ display:grid; gap:1rem; }
.drag-assign__items{ display:flex; flex-wrap:wrap; gap:.5rem; }
.draggable{ background:#eef7f5; border:1px dashed #8db6ad; padding:.5rem .7rem; border-radius:8px; cursor:grab; user-select:none; }
.drag-assign__zones{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.dropzone{ background:#f6fbfa; border:1px solid var(--border); border-radius:10px; padding:.6rem; }
.dropzone__bin{ min-height:80px; padding:.4rem; display:flex; flex-wrap:wrap; gap:.4rem; }

.sortable{ list-style:none; padding:0; display:flex; gap:.5rem; }
.sortable__item{ background:#eef7f5; border:1px dashed #8db6ad; padding:.6rem .8rem; border-radius:8px; cursor:grab; }

.audio-mcq .clip{ margin-bottom:.6rem; }
.choices .choice{ display:block; margin:.35rem 0; }
.feedback{ margin-top:1rem; font-weight:600; }
.feedback.ok{ color:#0f7c5a; }
.feedback.err{ color:#b0412b; }

.decision__list{ list-style:none; padding:0; display:grid; gap:.6rem; }
.decision__item{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem; border:1px solid var(--border); border-radius:8px; background:#f6fbfa; }
.decision__selected{ color:var(--muted); font-size:.9rem; }

.certificate-bg{ background:#dfeeea; }


/* Hero-Bild-Layout */
.hero{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52vh;              /* H he des Titelbereichs */
  padding: 2.5rem 1rem;
  overflow: clip;
}

.hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* Bild f llt den Bereich, ohne verzerren */
  display: block;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}

.hero__text{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(2px);
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  max-width: 720px;
  text-align: center;
}


/* --- Hero-Bereich mit Hintergrundbild --- */
.hero{
  /* Bild als Hintergrund (absoluter Pfad) */
  background-image: url('/img/startscreen.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* Layout */
  position: relative;
  display: grid;
  place-items: center;
  min-height: 52vh;            /* gew nschte H he des Titelbereichs */
  padding: 2.5rem 1rem;
  overflow: clip;
}

/* Dunkles Overlay f r bessere Lesbarkeit des Textes */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
  z-index: 0;
}

/* Textkarte  ber dem Bild */
.hero__text{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(2px);   /* leichte Unsch rfe hinter dem Text */
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  max-width: 720px;
  text-align: center;
}

/* Buttons   falls noch nicht vorhanden */
.btn{ display:inline-block; padding:.6rem 1rem; border-radius:8px; border:1px solid transparent; font-weight:600; cursor:pointer; }
.btn-primary{ background:#1f6b5e; color:#fff; }
.btn-ghost{ background:transparent; color:#1f6b5e; border-color:#1f6b5e; }