/* ====== Base / Tokens ====== */
:root{
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280;
  --surface: #f3f4f6;
  --surface-2:#eceef1;

  --primary: #0d47a1;        /* Blau */
  --primary-2:#1976d2;
  --accent: #fdd835;         /* Gelb (Markierung) */
  --cta: #c62828;            /* Rot */
  --cta-hover:#a61d24;

  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --shadow-soft: 0 4px 12px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: 1.5rem; /* Abstand von Browserrand oben */

}

main {
  flex: 1; /* sorgt dafür, dass der Footer nach unten gedrückt wird */
}
img{max-width:100%;display:block}

.container{
  max-width: 1100px; /* vorher 1200px */
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}

/* ====== Header / Hero ====== */
.site-header{
  background: linear-gradient(180deg, rgba(13,71,161,.06), transparent 70%);
  padding-top: 2.5rem;  /* mehr Platz nach oben */
  padding-bottom: 1rem;
}


.hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items:center;
  padding: 2rem 0 2.5rem;
}

.hero-video{
  width:100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background:#000;
  aspect-ratio: 16 / 9;
}

.hero-text h1{
  margin:0 0 .6rem 0;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height:1.2;
}
.hero-text h1 mark{
  background: var(--accent);
  padding: .05em .25em;
  border-radius: 3px;
}
.hero-text p{margin:.5rem 0 1.2rem}
.note{color:var(--muted); font-style:italic}
/* Buttons – Pastell-Rot, ohne Border-Radius */
.btn {
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0; /* kein Radius */
  padding: 1rem 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: var(--shadow-soft);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: #ff6f61; /* Pastell-Rot */
  color: #fff;
}

.btn-primary:hover {
  background: #ff5947; /* etwas kräftiger beim Hover */
}


/* ====== Intro ====== */
.intro{ padding: 1rem 0 0; }
.intro-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.2rem 1rem;
  box-shadow: var(--shadow-soft);
}
.intro-card h2{ margin:0 0 .4rem 0; font-size:1.3rem; }
.bullets{ margin:.2rem 0 0 1.1rem; padding:0; }
.bullets li{ margin:.25rem 0; }

/* ====== Module Grid ====== */
.modules{ padding: 1.5rem 0 2.5rem; }
.modules-title{
  font-size:1.4rem; margin:.2rem 0 1rem 0;
  color: var(--primary);
}
.grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  justify-items: stretch; /* sorgt für gleichmäßige Breite */
}

/* Standard (Smartphone) – 1 Spalte */
.grid {
  grid-template-columns: 1fr;
}

/* Tablet (ab 600px) – 3 Spalten */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop (ab 1024px) – 2 Spalten */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card{
  background: var(--surface);
  padding: 1rem 1rem 1.1rem;
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  min-height: 112px;
  border: 2px solid transparent;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
  background: linear-gradient(0deg, rgba(253,216,53,0.15), rgba(253,216,53,0.15)) , var(--surface);
  color: inherit;
}
.card-title{ font-weight:800; }
.card-sub{ font-size:.92rem; opacity:.8; }

.card-accent{
  border: 2px dashed var(--accent);
  background: linear-gradient(0deg, rgba(253,216,53,.18), rgba(253,216,53,.18)) , var(--surface);
}
.card-accent:hover{
  background: linear-gradient(0deg, rgba(253,216,53,.25), rgba(253,216,53,.25)) , var(surface);
}


/* ====== Responsive ====== */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
  }
  .hero-media{
    order:-1; /* Video erscheint mobil oben */
  }
}



/* ====== Dark Mode (modern, mit Akzenten) ====== */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #121212;
    --text: #e9e9e9;
    --muted: #b3b8c4;
    --surface: #1b1f24;
    --surface-2:#161a1e;

    --primary:#90caf9;   /* helleres Blau für Kontrast */
    --primary-2:#64b5f6;
    --accent:#ffdb4d;    /* Gelb bleibt sichtbar */
    --cta:#d64a4a;       /* etwas heller im Dark Mode */
    --cta-hover:#c13d3d;

    --shadow: 0 12px 28px rgba(0,0,0,.45);
    --shadow-soft: 0 6px 14px rgba(0,0,0,.35);
  }

  .site-header{
    background: linear-gradient(180deg, rgba(100,181,246,.12), transparent 70%);
  }

  .card-accent{
    border-color: rgba(255,219,77,.8);
  }
}

@media (prefers-color-scheme: dark){
  .card:hover{
    background: linear-gradient(0deg, rgba(253,216,53,0.12), rgba(253,216,53,0.12)) , var(--surface);
    border-color: rgba(255,219,77,0.8);
    color: var(--text);
  }
}


/* ====================================
   LERNWEG - Duolingo Style
==================================== */
.progress-bar {
  background: var(--surface-2);
  border-radius: 20px;
  height: 18px;
  overflow: hidden;
  margin-top: .5rem;
}
.progress-fill {
  background: var(--accent);
  height: 100%;
  width: 0;
  transition: width .4s ease;
}

.bubble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0 3rem;
}

.bubble {
  background: var(--surface);
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  position: relative;
  transition: transform .15s;
}
.bubble:hover { transform: scale(1.05); }

.bubble img {
  width: 72px;
  height: 72px;
  margin-bottom: .5rem;
}

.bubble.completed {
  background: linear-gradient(135deg, var(--accent), #ffd54f);
  box-shadow: var(--shadow);
  color: #000;
}

.bubble input {
  position: absolute;
  top: 10px;
  right: 10px;
  transform: scale(1.4);
  cursor: pointer;
}

.reward-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1000;
}
.reward-popup.active {
  visibility: visible;
  opacity: 1;
}
.reward-content {
  background: var(--bg);
  color: var(--text);
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 300px;
  animation: pop .4s ease;
}
.reward-content img {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}
@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.back-button-wrap {
  text-align: center;
  padding-bottom: 2rem;
}

@media (max-width: 600px){
  /* ===== Container & Body ===== */
  .container {
    padding-left: 1.75rem;   /* vorher 0 1.5rem */
    padding-right: 1.75rem;
  }

  body {
    padding-top: 1rem;       /* etwas Luft oben, mobil kompakter */
  }

  /* ===== Hero ===== */
  .hero {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    gap: 1.5rem;
  }

  .hero-text h1 {
    font-size: 1.6rem;
  }

  .hero-image-placeholder {
    max-width: 300px;
    margin: 0 auto 1rem;
  }

  /* ===== Lernweg / Bubble Grid ===== */
  .bubble-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1rem 0 2rem;
  }

  .bubble img {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 900px){
  .hero-media {
    order: -1;
    text-align: center;
  }
  .hero-image-placeholder {
    max-width: 300px;
    margin: 0 auto 1rem;
  }
}

@media (min-width: 601px) and (max-width: 1024px){
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .hero {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
    gap: 2rem;
  }

  body {
    padding-top: 1.5rem;
  }
}
/* Modul-Header leicht absetzen */
.module-header {
  background: linear-gradient(180deg, rgba(13,71,161,0.05), transparent 70%);
  margin-bottom: 2rem;
}

/* Video kleiner & zentriert */
.video-section .video-wrapper {
  max-width: 720px;
  margin: 0 auto 1rem;
}
.video-section video {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* Materialien als Kacheln */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.material-card {
  background: var(--surface);
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.2s;
}
.material-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.material-title {
  font-weight: 600;
}
.material-sub {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Extras-Section */
.extras-section {
  background: var(--surface-2);
  padding: 2rem 0;
  margin-top: 3rem;
  text-align: center;
}
.extras-section h2 {
  margin-bottom: 0.5rem;
}
.extras-section p {
  margin-bottom: 1rem;
  color: var(--muted);
}
.module-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background: var(--surface-2);
  padding: 1.5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.nav-btn {
  background: #f0f0f0;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: background 0.25s ease, transform 0.1s ease, box-shadow 0.25s ease;
}

.nav-btn:hover {
  background: #d1d5db;      /* leicht dunkler beim Hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.nav-btn:active {
  transform: translateY(0);
}

.nav-btn-center {
  background: #fdd835;       /* Gelb bleibt bestehen */
  color: #000;
}

.nav-btn-center:hover {
  background: #fbc02d;
}

@media (max-width: 600px) {
  .module-nav {
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav-btn {
    width: 100%;
    text-align: center;
  }
}

/* MATERIALIEN – graue Kacheloptik im Stil "Lernhefte für..." */
.module-materials {
  padding: 2rem 0 2.5rem;
  text-align: center;
}

.materials-intro {
  color: var(--muted);
  max-width: 650px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.material-box {
  background: var(--surface-2);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 180px;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .2s ease;
}

.material-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.material-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
  text-align: center;
}

.material-sub {
  font-style: italic;
  font-size: .9rem;
  color: var(--muted);
}

@media (max-width: 600px){
  .material-box {
    max-width: 140px;
  }
}

/* Digitale Extras Abschnitt */
.extras-section {
  background: var(--surface-2);
  padding: 3rem 0;
  margin-top: 2rem;
}

.extras-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.extras-image img {
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-soft);
}

.extras-text h2 {
  font-size: 1.6rem;
  margin-bottom: .5rem;
}

.extras-text p {
  color: var(--muted);
  margin-bottom: 1rem;
}

@media (max-width: 800px) {
  .extras-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .extras-image img {
    margin: 0 auto;
  }
}
/* Sekundär-Button – dezent grauer Stil */
.btn-secondary {
  background: #c8ccd2; /* vorher #e5e7eb */
  color: var(--text);
  border-radius: 0;
  padding: 1rem 1.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.2s ease, transform 0.06s ease;
  box-shadow: var(--shadow-soft);
  display: inline-block;
  text-decoration: none;
}

.btn-secondary:hover {
  background: #d1d5db; /* etwas dunkler beim Hover */
}

.btn-secondary:active {
  transform: translateY(1px);
}

.video-section {
  background: var(--surface-2);
  padding: 3rem 0;
  margin-top: 2rem;
  margin-bottom: 2rem;

  /* 👉 Vollbreite über den Viewport */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.video-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.video-section h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.video-subtext {
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.video-section .hero-video {
  max-width: 800px;
  width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  background: #000;
}
/* ============= FEINSCHLIFF ============= */

/* Einheitliche Abstände zwischen Sektionen */
.module-header,
.video-section,
.module-materials,
.extras-section,
.module-nav {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Einheitliche Section-Überschriften mit Emoji */
.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Hover-Effekt für Material-Kacheln lebendiger */
.material-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Mobil: Lernvideo-Block kompakter */
@media (max-width: 600px) {
  .video-section {
    padding: 1.5rem 0;
  }
}
/* ================================
   ✨ Fade-In Animation (von unten)
=================================== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Diese Klassen kannst du auf Sektionen, Kacheln etc. anwenden:
   z. B. <section class="video-section fade-in-up">...</section>
*/

/* ================================
   ✨ Section Divider – feine Linie
=================================== */
.section-divider {
  width: 100%;
  max-width: 1100px;
  margin: 3rem auto;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Dark Mode Variante */
@media (prefers-color-scheme: dark){
  .section-divider {
    border-top-color: rgba(255,255,255,0.12);
  }
}

.video-wrapper {
  position: relative;
  display: inline-block;
  max-width: 800px;
  width: 100%;
}

.hero-video {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #000;
}


.custom-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96); /* leicht kleiner im Ruhezustand */
  background: rgba(0, 0, 0, 0.5);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.custom-play-btn::before {
  content: '';
  position: relative;
  left: 2px;
  display: block;
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.custom-play-btn:hover {
  transform: translate(-50%, -50%) scale(1);
  background: rgba(0, 0, 0, 0.75); /* dunklerer Hintergrund beim Hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Zweigeteilte Extras-Sektionen */
.extras-split-section {
  padding: 3rem 0;
}

.extras-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.extras-split-image img {
  width: 80%;
  max-width: 420px;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
}

.extras-split-text h3 {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

.extras-split-text p {
  color: var(--muted);
  margin-bottom: 1rem;
  max-width: 480px;
}

/* Variante mit anderem Hintergrund (für die 2. Sektion) */
.alt-bg {
  background: var(--surface-2);
}

/* Gespiegeltes Layout für Vokabel-Sektion */
.extras-split.reverse {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}

.extras-split.reverse .extras-split-text {
  direction: ltr;
}

/* Responsiv */
@media (max-width: 800px) {
  .extras-split,
  .extras-split.reverse {
    grid-template-columns: 1fr;
    text-align: center;
    direction: ltr;
  }

  .extras-split-image img {
    margin: 0 auto;
  }
}

/* ===== Mobile Anpassung für Extras-Sektionen ===== */
@media (max-width: 800px) {
  .extras-split {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .extras-block {
    grid-template-columns: 1fr; /* einspaltig mobil */
    text-align: center;
  }

  .extras-image img {
    width: 70%;              /* prozentuale Breite */
    max-width: 240px;       margin: 0 auto 1rem;
    height: auto;
  }

  .extras-text {
    text-align: center;
  }

  .extras-text p {
    max-width: 90%;
    margin: 0 auto 1rem;
  }

  .extras-text .btn {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    display: block;
  }
}

@media (max-width: 400px) {
  .extras-image img {
    width: 60%;
    max-width: 200px;
  }
}
.hero-image-placeholder {
  width: 65%;        /* ca. 15 % kleiner als vorher */
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  max-width: 450px;  /* optional: maximale Breite auf sehr großen Screens */
}


/* ================================
   🌙 Dark Mode – Ergänzende Styles
=================================== */
@media (prefers-color-scheme: dark) {

  /* Buttons */
  .btn-primary {
    background: #e35b52; /* kräftigeres, leicht entsättigtes Rot */
    color: #fff;
  }
  .btn-primary:hover {
    background: #cf4b42;
  }

  .btn-secondary {
    background: #2c2f33;
    color: var(--text);
  }
  .btn-secondary:hover {
    background: #3a3d42;
  }

  /* Navigationsbuttons */
  .nav-btn {
    background: #2c2f33;
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border: 1px solid #3a3d42;
  }
  .nav-btn:hover {
    background: #3a3d42;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  }

  .nav-btn-center {
    background: var(--accent);
    color: #000;
  }

  /* Karten & Boxen */
  .card,
  .material-box {
    background: #1f2327;
    box-shadow: var(--shadow-soft);
  }
  .card:hover,
  .material-box:hover {
    background: #2a2f34;
  }

  /* Sektionen mit hellem Hintergrund */
  .video-section,
  .extras-section,
  .alt-bg,
  .module-nav {
    background: #181a1d;
  }

  /* Split-Sektionen Bilder/Text */
  .extras-split-text p {
    color: var(--muted);
  }

  /* Divider */
  .section-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
}



/* Passwortschutz Overlay */
.password-overlay {
  position: fixed;
  inset: 0;
  background: rgba(240, 232, 224, 0.95); /* sanftes Pastell-Beige */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  backdrop-filter: blur(4px);
}

.password-box {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  font-family: inherit;
}

.password-box h2 {
  margin-top: 0;
  color: #d84c2d; /* warmes Rot – Spanien-Ton */
}

.password-box p {
  margin-bottom: 1rem;
  color: #444;
}

.password-box input {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #f1d5c5;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.password-box input:focus {
  border-color: #d84c2d;
}

.password-box button {
  background: linear-gradient(135deg, #f4b07e, #d84c2d);
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
  width: 100%;
}

.password-box button:hover {
  background: linear-gradient(135deg, #f7c3a0, #e55e3f);
}

.error-msg {
  color: #d84c2d;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* Cookie-Banner */
#cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  max-width: 420px;
  width: 90%;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  color: #333;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  animation: fadeInUp 0.4s ease;
}

#cookie-banner p {
  margin: 0;
  line-height: 1.4;
  text-align: center;
  color: #444;
}

#cookie-banner a {
  color: #d84c2d;
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.cookie-buttons button {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.cookie-buttons button#accept-cookies {
  background: linear-gradient(135deg, #f4b07e, #d84c2d);
  color: white;
  border: none;
}

.cookie-buttons button#accept-cookies:hover {
  background: linear-gradient(135deg, #f7c3a0, #e55e3f);
}

.cookie-buttons button:hover {
  background: #eaeaea;
}

/* Dezente Einblendung */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.back-to-overview {
  text-align: center;
  margin-top: 2rem;    /* Abstand nach der Navigation */
  margin-bottom: 3rem; /* Abstand zum Footer */
}

/* ============================================================
   🌍 Einheitlicher Footer – immer unten, nie überlappend
   ============================================================ */

/* Seite füllt gesamten Viewport aus */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Hauptinhalt darf beliebig groß sein */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* alles außer Footer nimmt Platz ein */
body > header,
body > main,
body > section,
body > div {
  flex: 1 0 auto;
}

/* Footer – dezenter Abschluss unten */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: #f7f8fa;
  color: #666;
  font-size: 0.85rem;
  text-align: center;
  padding: 1.4rem 1rem 1.6rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  opacity: 0.9;
}

/* Innenlayout */
.footer-container {
  max-width: 960px;
  margin: 0 auto;
}

/* Links */
.footer-links {
  margin-top: 0.5rem;
}

.footer-links a {
  color: #666;
  margin: 0 0.6rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-links a:hover {
  color: #d64a4a;
  opacity: 1;
}

/* ---------- DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  .site-footer {
    background: #1a1c1f;
    color: #aaa;
    border-top: 1px solid rgba(255,255,255,0.06);
    opacity: 0.85;
  }

  .footer-links a {
    color: #bbb;
  }

  .footer-links a:hover {
    color: var(--accent, #ffdb4d);
  }
}

/* ===== Einheitliche Buttons im Passwort-Overlay ===== */
#password-submit,
.btn-course-unlock {
  display: inline-block;
  width: 100%;
  padding: 0.8rem 1.4rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.1s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Haupt-Button (Passwort senden / Jetzt starten) */
#password-submit {
  background: linear-gradient(90deg, #f57c00, #ef6c00);
}

#password-submit:hover {
  background: linear-gradient(90deg, #fb8c00, #f57c00);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

/* Externer CTA (Kurs kaufen) – leicht dunklerer Rotton */
.btn-course-unlock {
  background: linear-gradient(90deg, #d32f2f, #c62828);
  text-align: center;
  text-decoration: none;
}

.btn-course-unlock:hover {
  background: linear-gradient(90deg, #e53935, #d32f2f);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  #password-submit {
    background: linear-gradient(90deg, #ef6c00, #e65100);
  }

  .btn-course-unlock {
    background: linear-gradient(90deg, #e53935, #b71c1c);
  }
}

/* ============================
   🎓 Abschluss-Reflexion (modern)
============================ */
.module-reflexion {
  background: var(--surface);
  padding: 2rem 0;
  margin-top: 3rem;
  border-top: 3px solid #ff6f61; /* 🔸 neue Akzentfarbe */
  box-shadow: var(--shadow-soft);
}

.reflexion-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.reflexion-text {
  flex: 1 1 60%;
}

.reflexion-text h3 {
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--primary);
}

.reflexion-text p {
  color: var(--muted);
  margin: 0.3rem 0 0.8rem;
}

.reflexion-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reflexion-text li {
  margin: 0.4rem 0;
  padding-left: 1.4rem;
  position: relative;
}

.reflexion-text li::before {
  content: "•";
  color: #ff6f61; /* 🔸 gleiche Akzentfarbe */
  position: absolute;
  left: 0;
}

.reflexion-icon {
  flex: 0 0 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reflexion-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  animation: flipLoop 8s linear infinite;
  transform-style: preserve-3d;
}

@keyframes flipLoop {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}


.reflexion-img:hover {
  transform: scale(1.06);
}

/* 📱 Mobil */
/* 📱 Mobile Optimierung für Abschluss-Reflexion */
@media (max-width: 700px) {
  .module-reflexion {
    padding: 1.2rem 1rem 1.6rem; /* gleichmäßige Abstände */
    text-align: left;
  }

  .reflexion-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* 🔝 Icon wieder nach oben */
  .reflexion-icon {
    align-self: center;
    order: -1; /* Icon nach oben */
    margin: 0.2rem 0 1rem;
  }

  .reflexion-img {
    width: 90px;  /* etwas größer */
    height: 90px;
    animation: flipLoop 14s linear infinite;
  }

  .reflexion-text {
    flex: 1 1 auto;
    padding-left: 0.4rem; /* leicht eingerückt, harmonischer Look */
  }

  .reflexion-text h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .reflexion-text p {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
  }

  .reflexion-text ul {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0;
  }

  .reflexion-text li {
    margin: 0.35rem 0;
    padding-left: 1.2rem;
    position: relative;
  }

  .reflexion-text li::before {
    content: "•";
    color: #ff6f61;
    position: absolute;
    left: 0;
    font-size: 1.1rem;
    line-height: 1;
  }
}


/* 🌙 Dark Mode */
@media (prefers-color-scheme: dark) {
  .module-reflexion {
    background: var(--surface-2);
    border-top-color: #ff6f61;
  }
  .reflexion-img {
    filter: brightness(0.9) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }
}
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.footer-feedback {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

.footer-feedback a {
  color: #d64a4a;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-feedback a:hover {
  color: #ff6f61;
  text-decoration: underline;
}

/* 🌙 Dark Mode */
@media (prefers-color-scheme: dark) {
  .footer-feedback {
    color: #aaa;
  }
  .footer-feedback a {
    color: #ff6f61;
  }
  .footer-feedback a:hover {
    color: var(--accent);
  }
}