/* =====================================================================
   KI-FLUENCER — includes/kurs.css
   ---------------------------------------------------------------------
   Seiten-spezifisches CSS für das Kursportal: kurs/index.php,
   kurs/login.php. Wird NACH base.css eingebunden.

   Wie bei site.css: jede Seite hat ihren eigenen Body-Klassen-
   Namensraum (body.page-kurs, body.page-kurs-login).
   ===================================================================== */

/* ============ kurs/index.php (body.page-kurs) ============ */
body.page-kurs{
    background:var(--void); color:var(--text); font-family:var(--font-body);
    line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
  }
body.page-kurs{ padding-inline:0; }
body.page-kurs .wrap{ padding-inline:20px; max-width:840px; margin-inline:auto; }
body.page-kurs h1, body.page-kurs h2{ font-family:var(--font-display); text-wrap:balance; margin:0; }
body.page-kurs .logout-link{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); text-decoration:none; }
body.page-kurs .logout-link:hover{ color:var(--cyan); }
body.page-kurs main{ padding-block:56px 96px; }
body.page-kurs .head{ max-width:640px; }
body.page-kurs h1{ font-size:clamp(24px,4vw,32px); margin-top:14px; }
body.page-kurs .head p{ color:var(--text-dim); margin-top:12px; font-size:15.5px; }
body.page-kurs h2.section-title{
    font-size:14px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-faint); margin-top:48px; margin-bottom:18px;
  }
body.page-kurs .module{
    background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
    margin-bottom:14px; overflow:hidden;
  }
body.page-kurs .module-row{
    display:flex; align-items:center; gap:16px; padding:18px 20px;
    cursor:pointer; user-select:none;
  }
body.page-kurs .module-row .icon{
    flex:none; width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(76,243,255,.1); border:1px solid var(--line);
  }
body.page-kurs .module-row .icon svg{ width:18px; height:18px; stroke:var(--cyan); }

body.page-kurs .module[data-type="video"] .module-row .icon{
    width:120px; height:68px; border-radius:10px; overflow:hidden;
  }
body.page-kurs .module[data-type="video"] .module-row .icon img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  body.page-kurs .module[data-type="video"] .module-row .icon{ position:relative; }
body.page-kurs .module[data-type="video"] .module-row .play-badge{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:36px; height:36px; border-radius:50%;
    background:rgba(238,240,251,.16); border:1px solid rgba(238,240,251,.45);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(3px);
    pointer-events:none;
  }
body.page-kurs .module[data-type="video"] .module-row .play-badge svg{ width:13px; height:13px; margin-left:2px; fill:var(--text); }

body.page-kurs .module-row .title{ flex:1; font-size:15.5px; font-weight:600; display:flex; flex-direction:column; gap:2px; }
body.page-kurs .module-row .title .desc{ font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--text-faint); }
body.page-kurs .module.link-row{
    display:block; text-decoration:none;
    background:none; border:none; border-radius:0; overflow:visible; margin-bottom:0;
  }
body.page-kurs .module.link-row + .module.link-row{ border-top:1px solid var(--line); }
body.page-kurs .module-row .chevron{ flex:none; width:16px; height:16px; stroke:var(--text-faint); transition:transform .2s ease; }
body.page-kurs .module.is-open .chevron{ transform:rotate(90deg); }
body.page-kurs .module-body{ display:none; padding:0 12px 22px; }
body.page-kurs .module.is-open .module-body{ display:block; }
body.page-kurs .module-body video{
    width:100%; border-radius:12px; background:#000; display:block;
  }
  body.page-kurs .module-body .video-desc{
  display:none;margin-top:12px; font-size:14px; line-height:1.5; color:var(--text-faint);
}
body.page-kurs .module.video-loaded .module-body .video-desc{ display:block; }
body.page-kurs .module-body .video-desc p{ margin:0 0 10px; }
body.page-kurs .module-body .video-desc ul,
body.page-kurs .module-body .video-desc ol{ margin:15px 0 10px; padding-left:20px; }
body.page-kurs .module-body .video-desc li{ margin-bottom:4px; }

body.page-kurs .pdf-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:14.5px; color:#04060d;
    text-decoration:none; padding:12px 22px; border-radius:999px;
    background:linear-gradient(90deg,var(--cyan),var(--violet));
  }

/* ============ kurs/login.php (body.page-kurs-login) ============ */
body.page-kurs-login{
    background:var(--void); color:var(--text); font-family:var(--font-body);
    line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
  }
body.page-kurs-login, body.page-kurs-login .wrap{ padding-inline:20px; }
body.page-kurs-login .wrap{ max-width:440px; margin-inline:auto; }
body.page-kurs-login h1{ font-family:var(--font-display); text-wrap:balance; margin:0; }
body.page-kurs-login main{ padding-block:80px 96px; }
body.page-kurs-login .card{
    background:var(--surface-2); border:1px solid var(--line); border-radius:20px;
    padding:40px 32px; text-align:center; box-shadow:var(--glow-cyan);
  }
body.page-kurs-login .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--cyan); display:inline-flex; align-items:center; gap:10px; justify-content:center; width:100%;
  }
body.page-kurs-login h1{ font-size:clamp(22px,4vw,28px); margin-top:14px; }
body.page-kurs-login .card p{ color:var(--text-dim); margin-top:14px; font-size:14.5px; }
body.page-kurs-login form{ margin-top:28px; text-align:left; }
body.page-kurs-login label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
body.page-kurs-login input[type="email"]{
    width:100%; margin-top:8px; padding:14px 16px; border-radius:12px;
    background:var(--surface); border:1px solid var(--line); color:var(--text);
    font-family:var(--font-body); font-size:15px;
  }
body.page-kurs-login input[type="email"]:focus{ outline:none; border-color:var(--cyan); }
body.page-kurs-login button{
    width:100%; margin-top:20px; padding:15px; border:none; border-radius:999px;
    font-family:var(--font-body); font-weight:700; font-size:15.5px; color:#04060d;
    background:linear-gradient(90deg,var(--cyan),var(--violet)); cursor:pointer;
  }
body.page-kurs-login .msg{ margin-top:20px; font-size:14px; padding:14px 16px; border-radius:12px; text-align:left; }
body.page-kurs-login .msg.success{ background:rgba(76,243,255,.08); border:1px solid rgba(76,243,255,.3); color:var(--text); }
body.page-kurs-login .msg.error{ background:rgba(255,62,200,.08); border:1px solid rgba(255,62,200,.3); color:var(--text); }

body.page-kurs .module.link-row:first-of-type .module-row{ padding-top:0; }

body.page-kurs .module.is-open .module-row .icon{
  display:none;
}

.info-box{
  display:flex; gap:14px; align-items:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin:28px 0 0; font-size:14px; color:var(--text-dim); line-height:1.7;
}
.info-box-icon{
  flex:none; width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(76,243,255,.15), rgba(161,92,255,.15)), var(--surface-2);
  border:1px solid var(--line);
}
.info-box-icon svg{ width:17px; height:17px; stroke:var(--cyan); }

@media (max-width:520px){
  body.page-kurs .module[data-type="video"] .module-row .icon{ width:84px; height:47px; }
    body.page-kurs .module[data-type="video"] .module-row .play-badge{ width:28px; height:28px; }
  body.page-kurs .module[data-type="video"] .module-row .play-badge svg{ width:10px; height:10px; }
}