/* ============================================================
   DESIGN SYSTEM — BJJ-Plattform Klickdummy
   Angelehnt an bjjfanatics.com
   ============================================================ */

/* --- TOKENS ------------------------------------------------ */
:root {
  --c-primary:    #1a237e;
  --c-primary-light: #283593;
  --c-primary-dark:  #0d1450;
  --c-accent:     #e53935;
  --c-accent-dark:#c62828;
  --c-cta:        #43a047;
  --c-cta-dark:   #2e7d32;
  --c-bg:         #ffffff;
  --c-bg-alt:     #f5f5f5;
  --c-bg-dark:    #1a1a2e;
  --c-text:       #212121;
  --c-text-sec:   #757575;
  --c-text-inv:   #ffffff;
  --c-border:     #e0e0e0;
  --c-star:       #ffd600;
  --c-success:    #43a047;
  --c-warning:    #ff9800;
  --c-error:      #e53935;
  --c-info:       #1e88e5;

  --ff-sans: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  900;

  --fs-xs:  .75rem;
  --fs-sm:  .875rem;
  --fs-base: 1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.1);
  --shadow:     0 2px 8px rgba(0,0,0,.12);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.15);
  --shadow-xl:  0 8px 32px rgba(0,0,0,.18);

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  --header-h: 60px;
  --announcement-h: 36px;
  --subnav-h: 44px;
  --top-offset: calc(var(--announcement-h) + var(--header-h) + var(--subnav-h));
}

/* --- RESET ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ff-sans);color:var(--c-text);background:var(--c-bg);line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none}
button{cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:var(--fw-bold)}

/* --- UTILITY ----------------------------------------------- */
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--sp-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-center{text-align:center}
.text-accent{color:var(--c-accent)}
.text-muted{color:var(--c-text-sec)}
.mt-4{margin-top:var(--sp-4)}.mt-8{margin-top:var(--sp-8)}.mb-4{margin-bottom:var(--sp-4)}.mb-8{margin-bottom:var(--sp-8)}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--sp-2)}.gap-4{gap:var(--sp-4)}.gap-6{gap:var(--sp-6)}
.grid{display:grid}

/* --- ANNOUNCEMENT BAR -------------------------------------- */
.announcement-bar{
  background:var(--c-accent);color:var(--c-text-inv);
  text-align:center;padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  letter-spacing:.5px;text-transform:uppercase;
  height:var(--announcement-h);display:flex;align-items:center;justify-content:center;
  position:sticky;top:0;z-index:1100;
}
.announcement-bar a{text-decoration:underline;margin-left:var(--sp-2)}

/* --- HEADER ------------------------------------------------ */
.site-header{
  position:sticky;top:var(--announcement-h);z-index:1000;
  background:var(--c-bg);border-bottom:1px solid var(--c-border);
  height:var(--header-h);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;gap:var(--sp-4);
}
.header-logo{font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--c-primary);white-space:nowrap}
.header-logo span{color:var(--c-accent)}

.header-search{
  flex:1;max-width:520px;position:relative;display:none;
}
.header-search input{
  width:100%;padding:var(--sp-2) var(--sp-4);padding-right:40px;
  border:2px solid var(--c-primary);border-radius:var(--radius-full);
  font-size:var(--fs-sm);
}
.header-search button{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--c-primary);color:#fff;border-radius:var(--radius-full);
}

.header-actions{display:flex;align-items:center;gap:var(--sp-3)}
.header-actions .icon-btn{
  position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);transition:background .2s;
}
.header-actions .icon-btn:hover{background:var(--c-bg-alt)}
.cart-badge{
  position:absolute;top:2px;right:2px;
  background:var(--c-accent);color:#fff;
  font-size:10px;font-weight:var(--fw-bold);
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

.hamburger{display:flex;flex-direction:column;gap:4px;width:24px;padding:4px 0}
.hamburger span{display:block;height:2px;background:var(--c-text);border-radius:2px;transition:.3s}

/* --- SUB NAV ----------------------------------------------- */
.sub-nav{
  background:var(--c-primary);height:var(--subnav-h);
  position:sticky;top:calc(var(--announcement-h) + var(--header-h));z-index:999;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.sub-nav ul{
  display:flex;align-items:center;height:100%;gap:0;
  white-space:nowrap;min-width:max-content;padding:0 var(--sp-4);
}
.sub-nav a{
  display:flex;align-items:center;height:100%;
  padding:0 var(--sp-4);color:var(--c-text-inv);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  text-transform:uppercase;letter-spacing:.5px;
  transition:background .2s;
}
.sub-nav a:hover,.sub-nav a.active{background:rgba(255,255,255,.12)}

/* --- MOBILE MENU ------------------------------------------- */
.mobile-menu{
  position:fixed;top:0;left:0;width:300px;height:100%;
  background:var(--c-bg);z-index:2000;
  transform:translateX(-100%);transition:transform .3s ease;
  overflow-y:auto;box-shadow:var(--shadow-xl);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4);border-bottom:1px solid var(--c-border);
}
.mobile-menu-close{font-size:var(--fs-2xl);line-height:1}
.mobile-menu nav a{
  display:block;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--c-border);
  font-weight:var(--fw-medium);transition:background .2s;
}
.mobile-menu nav a:hover{background:var(--c-bg-alt)}
.menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1999;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.menu-overlay.open{opacity:1;pointer-events:auto}

/* --- HERO -------------------------------------------------- */
.hero{
  position:relative;min-height:420px;display:flex;align-items:center;
  background:var(--c-bg-dark);color:var(--c-text-inv);overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--c-primary-dark) 0%,var(--c-primary) 50%,#283593 100%);
  opacity:.9;
}
.hero-content{position:relative;z-index:1;padding:var(--sp-12) var(--sp-4);max-width:640px}
.hero h1{font-size:var(--fs-3xl);font-weight:var(--fw-black);text-transform:uppercase;margin-bottom:var(--sp-4);line-height:1.1}
.hero p{font-size:var(--fs-lg);margin-bottom:var(--sp-6);opacity:.9}

/* --- BUTTONS ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);border-radius:var(--radius);
  font-weight:var(--fw-bold);font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.5px;
  transition:all .2s;cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--c-cta);color:#fff}
.btn-primary:hover{background:var(--c-cta-dark)}
.btn-secondary{background:var(--c-primary);color:#fff}
.btn-secondary:hover{background:var(--c-primary-light)}
.btn-accent{background:var(--c-accent);color:#fff}
.btn-accent:hover{background:var(--c-accent-dark)}
.btn-outline{border:2px solid var(--c-primary);color:var(--c-primary)}
.btn-outline:hover{background:var(--c-primary);color:#fff}
.btn-outline-white{border:2px solid #fff;color:#fff}
.btn-outline-white:hover{background:#fff;color:var(--c-primary)}
.btn-sm{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs)}
.btn-lg{padding:var(--sp-4) var(--sp-8);font-size:var(--fs-base)}
.btn-block{width:100%}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full)}
.btn:disabled,.btn[disabled]{opacity:.5;pointer-events:none}

/* --- SECTION ----------------------------------------------- */
.section{padding:var(--sp-10) 0}
.section-alt{background:var(--c-bg-alt)}
.section-dark{background:var(--c-bg-dark);color:var(--c-text-inv)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-6)}
.section-title{font-size:var(--fs-2xl);text-transform:uppercase;letter-spacing:.5px}
.section-link{color:var(--c-primary);font-weight:var(--fw-bold);font-size:var(--fs-sm);text-transform:uppercase}
.section-link:hover{text-decoration:underline}

/* --- CAROUSEL ---------------------------------------------- */
.carousel{position:relative}
.carousel-track{
  display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:var(--sp-2) 0;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track > *{scroll-snap-align:start;flex-shrink:0}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:var(--c-bg);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  z-index:5;font-size:var(--fs-lg);transition:all .2s;
}
.carousel-btn:hover{background:var(--c-primary);color:#fff}
.carousel-btn.prev{left:-12px}
.carousel-btn.next{right:-12px}

/* --- PRODUCT CARD ------------------------------------------ */
.product-card{
  width:260px;background:var(--c-bg);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:all .3s;
}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.product-card-img{
  width:100%;aspect-ratio:16/10;background:var(--c-bg-alt);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-text-sec);font-size:var(--fs-sm);overflow:hidden;position:relative;
}
.product-card-img svg{width:60px;height:60px;opacity:.3}
.product-card-badge{
  position:absolute;top:var(--sp-2);left:var(--sp-2);
  background:var(--c-accent);color:#fff;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;
}
.product-card-body{padding:var(--sp-3)}
.product-card-instructor{font-size:var(--fs-xs);color:var(--c-text-sec);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp-1)}
.product-card-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:2.6em}
.product-card-rating{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.stars{display:flex;gap:1px;color:var(--c-star)}
.stars svg{width:14px;height:14px}
.rating-count{font-size:var(--fs-xs);color:var(--c-text-sec)}
.product-card-price{display:flex;align-items:center;gap:var(--sp-2)}
.price-current{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--c-accent)}
.price-original{font-size:var(--fs-sm);color:var(--c-text-sec);text-decoration:line-through}
.price-tag{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--c-text)}

/* --- ONBOARDING -------------------------------------------- */
.onboarding{text-align:center;padding:var(--sp-12) var(--sp-4)}
.onboarding h2{font-size:var(--fs-3xl);margin-bottom:var(--sp-6)}
.onboarding-options{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap}
.onboarding-card{
  padding:var(--sp-8) var(--sp-6);border:2px solid var(--c-border);
  border-radius:var(--radius-lg);width:280px;transition:all .3s;cursor:pointer;
}
.onboarding-card:hover{border-color:var(--c-primary);box-shadow:var(--shadow)}
.onboarding-card h3{margin-bottom:var(--sp-2);font-size:var(--fs-xl)}
.onboarding-card p{color:var(--c-text-sec);font-size:var(--fs-sm)}

/* --- REVIEW CARD ------------------------------------------- */
.review-card{
  width:300px;padding:var(--sp-4);background:var(--c-bg);
  border:1px solid var(--c-border);border-radius:var(--radius);
}
.review-card-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--c-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.review-card-name{font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.review-card-text{font-size:var(--fs-sm);color:var(--c-text-sec);margin-bottom:var(--sp-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.review-card-course{font-size:var(--fs-xs);color:var(--c-primary);font-weight:var(--fw-medium)}

/* --- APP SECTION ------------------------------------------- */
.app-section{text-align:center;padding:var(--sp-16) var(--sp-4)}
.app-badges{display:flex;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-6)}
.app-badge{padding:var(--sp-3) var(--sp-6);background:var(--c-text);color:#fff;border-radius:var(--radius);font-size:var(--fs-sm);font-weight:var(--fw-bold);border:none;cursor:pointer;font:inherit}
.app-badge:hover{filter:brightness(1.08)}

/* --- FOOTER ------------------------------------------------ */
.site-footer{background:var(--c-bg-dark);color:var(--c-text-inv);padding:var(--sp-12) 0 var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-8);margin-bottom:var(--sp-8)}
.footer-col h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-4);opacity:.7}
.footer-col a{display:block;padding:var(--sp-1) 0;font-size:var(--fs-sm);opacity:.8;transition:opacity .2s}
.footer-col a:hover{opacity:1;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:var(--sp-6);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.footer-social{display:flex;gap:var(--sp-3)}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:all .2s}
.footer-social a:hover{background:rgba(255,255,255,.15)}
.footer-payments{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.pay-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 4px;background:#fff;border-radius:var(--radius-sm);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pay-badge svg{display:block}
.legal-page{max-width:720px}
.legal-page h1{font-size:var(--fs-3xl);margin-bottom:var(--sp-4)}
.legal-page h2{font-size:var(--fs-xl);margin:var(--sp-8) 0 var(--sp-3)}
.legal-page p,.legal-page li{color:var(--c-text-sec);line-height:1.75;margin-bottom:var(--sp-3)}
.legal-page ul{padding-left:1.25rem;list-style:disc}
.footer-copy{font-size:var(--fs-xs);opacity:.6;width:100%;text-align:center;margin-top:var(--sp-4)}

/* --- CATALOG / GRID ---------------------------------------- */
.catalog-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
.filter-sidebar{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:var(--sp-4);
}
.filter-group{margin-bottom:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--c-border)}
.filter-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.filter-group h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp-3);display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.filter-group label{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0;font-size:var(--fs-sm);cursor:pointer}
.filter-group input[type="checkbox"]{width:16px;height:16px;accent-color:var(--c-primary)}
.filter-group input[type="range"]{width:100%;accent-color:var(--c-primary)}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}
.product-grid .product-card{width:100%}

.sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);flex-wrap:wrap;gap:var(--sp-3)}
.sort-bar select{padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius);font-size:var(--fs-sm)}
.results-count{font-size:var(--fs-sm);color:var(--c-text-sec)}

.pagination{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-8)}
.pagination a,.pagination span{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  border:1px solid var(--c-border);transition:all .2s;
}
.pagination a:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.pagination .active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* --- COURSE DETAIL ----------------------------------------- */
.course-hero{background:var(--c-bg-dark);color:var(--c-text-inv);padding:var(--sp-8) 0}
.course-hero-inner{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
.course-trailer{aspect-ratio:16/9;background:#000;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:var(--fs-3xl);cursor:pointer;position:relative}
.play-overlay{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .3s}
.course-trailer:hover .play-overlay{background:rgba(255,255,255,.3);transform:scale(1.05)}
.course-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-3);font-size:var(--fs-sm);opacity:.8}
.course-meta span{display:flex;align-items:center;gap:var(--sp-1)}

.price-box{
  background:var(--c-bg);color:var(--c-text);border-radius:var(--radius);
  padding:var(--sp-6);box-shadow:var(--shadow-lg);
}
.price-box .price-current{font-size:var(--fs-4xl)}
.price-box .price-original{font-size:var(--fs-xl)}
.price-box .discount-tag{
  display:inline-block;background:var(--c-accent);color:#fff;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-left:var(--sp-2);
}
.price-box .btn{margin-top:var(--sp-4)}
.price-box-features{margin-top:var(--sp-4);font-size:var(--fs-sm)}
.price-box-features li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0}
.price-box-features li::before{content:"✓";color:var(--c-cta);font-weight:var(--fw-bold)}

.course-tabs{border-bottom:2px solid var(--c-border);display:flex;gap:0;overflow-x:auto}
.course-tabs button{
  padding:var(--sp-3) var(--sp-6);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  text-transform:uppercase;letter-spacing:.5px;color:var(--c-text-sec);
  border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .2s;
}
.course-tabs button.active,.course-tabs button:hover{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.tab-content{display:none;padding:var(--sp-6) 0}
.tab-content.active{display:block}

.episode-list{list-style:none}
.episode-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-border);
  transition:background .2s;cursor:pointer;
}
.episode-item:hover{background:var(--c-bg-alt)}
.episode-num{width:28px;height:28px;border-radius:50%;background:var(--c-bg-alt);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);flex-shrink:0}
.episode-title{flex:1;font-size:var(--fs-sm)}
.episode-duration{font-size:var(--fs-xs);color:var(--c-text-sec)}
.episode-item.locked .episode-title{opacity:.5}
.episode-item.locked::after{content:"🔒";font-size:var(--fs-xs)}
.episode-item.free .episode-num{background:var(--c-cta);color:#fff}

/* --- PLAYER ------------------------------------------------ */
.player-layout{display:grid;grid-template-columns:1fr;background:var(--c-bg-dark);min-height:100vh}
.video-container{
  width:100%;aspect-ratio:16/9;background:#000;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.video-placeholder{color:rgba(255,255,255,.4);font-size:var(--fs-2xl);text-align:center}
.player-controls{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);background:rgba(0,0,0,.8);color:#fff;
}
.player-controls button{color:#fff;transition:color .2s}
.player-controls button:hover{color:var(--c-cta)}
.progress-bar{
  flex:1;height:10px;min-height:10px;background:rgba(255,255,255,.2);border-radius:4px;cursor:pointer;position:relative;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.progress-bar:focus-visible{outline:2px solid var(--c-cta);outline-offset:2px}
.progress-fill{height:100%;background:var(--c-accent);border-radius:2px;width:35%;transition:width .1s}
.time-display{font-size:var(--fs-xs);white-space:nowrap}

.playlist-sidebar{background:var(--c-bg-dark);color:var(--c-text-inv);overflow-y:auto;max-height:60vh}
.playlist-header{padding:var(--sp-4);border-bottom:1px solid rgba(255,255,255,.1)}
.playlist-header h3{font-size:var(--fs-base)}
.playlist-header p{font-size:var(--fs-xs);opacity:.6;margin-top:var(--sp-1)}
.playlist-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .2s;
}
.playlist-item:hover,.playlist-item.active{background:rgba(255,255,255,.08)}
.playlist-item.active{border-left:3px solid var(--c-accent)}
.playlist-item .check{width:20px;text-align:center;font-size:var(--fs-xs);color:var(--c-cta)}
.playlist-item .ep-title{flex:1;font-size:var(--fs-sm)}
.playlist-item .ep-dur{font-size:var(--fs-xs);opacity:.5}
.playlist-progress{width:100%;height:2px;background:rgba(255,255,255,.1);margin-top:var(--sp-1)}
.playlist-progress-fill{height:100%;background:var(--c-cta)}

.bookmark-panel{
  padding:var(--sp-4);background:var(--c-bg);border-radius:var(--radius);
  margin:var(--sp-4);
}
.bookmark-panel h3{font-size:var(--fs-base);margin-bottom:var(--sp-3)}
.bookmark-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--c-border);
  font-size:var(--fs-sm);
}
.bookmark-time{color:var(--c-primary);font-weight:var(--fw-bold);font-size:var(--fs-xs);white-space:nowrap;cursor:pointer}
.bookmark-name{flex:1}
.bookmark-delete{color:var(--c-text-sec);font-size:var(--fs-xs);cursor:pointer}
.bookmark-delete:hover{color:var(--c-accent)}

/* --- LIBRARY ----------------------------------------------- */
.library-filters{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-6);flex-wrap:wrap}
.filter-btn{
  padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-full);
  border:1px solid var(--c-border);font-size:var(--fs-sm);
  font-weight:var(--fw-medium);transition:all .2s;
}
.filter-btn.active,.filter-btn:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

.library-card{
  background:var(--c-bg);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:all .3s;
}
.library-card:hover{box-shadow:var(--shadow-lg)}
.library-card-img{aspect-ratio:16/10;background:var(--c-bg-alt);display:flex;align-items:center;justify-content:center;position:relative}
.library-card-progress{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(0,0,0,.2)}
.library-card-progress-fill{height:100%;background:var(--c-cta);transition:width .3s}
.library-card-body{padding:var(--sp-3)}
.library-card-body h3{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--sp-1)}
.library-card-body p{font-size:var(--fs-xs);color:var(--c-text-sec);margin-bottom:var(--sp-2)}
.progress-text{font-size:var(--fs-xs);color:var(--c-cta);font-weight:var(--fw-bold)}

/* --- DAILY DEALS ------------------------------------------- */
.deal-countdown{
  text-align:center;padding:var(--sp-4);
  background:var(--c-accent);color:#fff;
  font-size:var(--fs-2xl);font-weight:var(--fw-black);
}
.deal-countdown span{display:inline-block;min-width:60px;padding:var(--sp-2);background:rgba(0,0,0,.2);border-radius:var(--radius);margin:0 var(--sp-1)}
.deal-countdown small{font-size:var(--fs-xs);display:block;font-weight:var(--fw-normal);opacity:.8}

.deal-card{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);
  padding:var(--sp-8);background:var(--c-bg);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);margin:var(--sp-6) 0;
}
.deal-card-img{aspect-ratio:16/10;background:var(--c-bg-alt);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}

/* --- CART -------------------------------------------------- */
.cart-items{list-style:none}
.cart-item{
  display:flex;gap:var(--sp-4);padding:var(--sp-4);
  border-bottom:1px solid var(--c-border);align-items:center;
}
.cart-item-img{width:120px;aspect-ratio:16/10;background:var(--c-bg-alt);border-radius:var(--radius);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cart-item-info{flex:1}
.cart-item-info h3{font-size:var(--fs-base);margin-bottom:var(--sp-1)}
.cart-item-info p{font-size:var(--fs-sm);color:var(--c-text-sec)}
.cart-item-price{font-size:var(--fs-xl);font-weight:var(--fw-black);color:var(--c-accent);white-space:nowrap}
.cart-item-remove{color:var(--c-text-sec);font-size:var(--fs-sm);cursor:pointer;text-decoration:underline}
.cart-item-remove:hover{color:var(--c-accent)}

.cart-summary{
  background:var(--c-bg-alt);border-radius:var(--radius);padding:var(--sp-6);
  position:sticky;top:var(--top-offset);
}
.cart-summary h3{margin-bottom:var(--sp-4)}
.coupon-input{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.coupon-input input{flex:1;padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius)}
.summary-row{display:flex;justify-content:space-between;padding:var(--sp-2) 0;font-size:var(--fs-sm)}
.summary-row.total{font-size:var(--fs-xl);font-weight:var(--fw-black);border-top:2px solid var(--c-border);padding-top:var(--sp-3);margin-top:var(--sp-2)}
.cart-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}

.upsell-section{margin-top:var(--sp-8);padding-top:var(--sp-8);border-top:1px solid var(--c-border)}

/* --- CHECKOUT ---------------------------------------------- */
.checkout-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
.checkout-form{}
.form-group{margin-bottom:var(--sp-4)}
.form-group label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-bottom:var(--sp-2)}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:var(--sp-3);border:1px solid var(--c-border);
  border-radius:var(--radius);font-size:var(--fs-sm);transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--c-primary);outline:none;box-shadow:0 0 0 3px rgba(26,35,126,.1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}

.payment-methods{display:flex;flex-direction:column;gap:var(--sp-3)}
.payment-option{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border:2px solid var(--c-border);
  border-radius:var(--radius);cursor:pointer;transition:all .2s;
}
.payment-option:hover,.payment-option.selected{border-color:var(--c-primary)}
.payment-option input[type="radio"]{accent-color:var(--c-primary)}

.order-summary{
  background:var(--c-bg-alt);border-radius:var(--radius);padding:var(--sp-6);
}

/* --- LOGIN / AUTH ------------------------------------------ */
.auth-container{max-width:480px;margin:var(--sp-12) auto;padding:0 var(--sp-4)}
.auth-tabs{display:flex;border-bottom:2px solid var(--c-border);margin-bottom:var(--sp-6)}
.auth-tabs button{
  flex:1;padding:var(--sp-3);text-align:center;font-weight:var(--fw-bold);
  font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.5px;
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;
}
.auth-tabs button.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.auth-form{display:none}
.auth-form.active{display:block}
.social-login{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius);
  font-weight:var(--fw-medium);transition:all .2s;
}
.social-btn:hover{background:var(--c-bg-alt)}
.divider{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-4) 0;font-size:var(--fs-sm);color:var(--c-text-sec)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--c-border)}

/* --- ACCOUNT ----------------------------------------------- */
.account-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-6) 0}
.account-sidebar{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
.account-sidebar a{
  display:block;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-border);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);transition:all .2s;
}
.account-sidebar a:hover,.account-sidebar a.active{background:var(--c-primary);color:#fff}
.account-content{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-6)}
.account-content h2{font-size:var(--fs-xl);margin-bottom:var(--sp-6)}

.order-table{width:100%;border-collapse:collapse}
.order-table th,.order-table td{padding:var(--sp-3);text-align:left;border-bottom:1px solid var(--c-border);font-size:var(--fs-sm)}
.order-table th{font-weight:var(--fw-bold);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.5px;color:var(--c-text-sec)}

/* --- INSTRUCTOR PROFILE ------------------------------------ */
.instructor-hero{text-align:center;padding:var(--sp-12) var(--sp-4);background:var(--c-bg-alt)}
.instructor-avatar{width:120px;height:120px;border-radius:50%;background:var(--c-primary);margin:0 auto var(--sp-4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-4xl);font-weight:var(--fw-black)}
.instructor-stats{display:flex;gap:var(--sp-6);justify-content:center;margin-top:var(--sp-4)}
.instructor-stat{text-align:center}
.instructor-stat-num{font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--c-primary)}
.instructor-stat-label{font-size:var(--fs-xs);color:var(--c-text-sec);text-transform:uppercase}

/* --- SUPPORT ----------------------------------------------- */
.faq-item{border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:var(--sp-3);overflow:hidden}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4);font-weight:var(--fw-bold);cursor:pointer;
  transition:background .2s;
}
.faq-question:hover{background:var(--c-bg-alt)}
.faq-question .arrow{transition:transform .3s}
.faq-item.open .faq-question .arrow{transform:rotate(180deg)}
.faq-answer{padding:0 var(--sp-4);max-height:0;overflow:hidden;transition:all .3s;font-size:var(--fs-sm);color:var(--c-text-sec)}
.faq-item.open .faq-answer{max-height:300px;padding:0 var(--sp-4) var(--sp-4)}

@keyframes chatPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(26,35,126,.45)}
  50%{box-shadow:0 0 0 10px rgba(26,35,126,0)}
}
@keyframes chatMsgIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes chatDotBounce{
  0%,80%,100%{transform:translateY(0);opacity:.45}
  40%{transform:translateY(-5px);opacity:1}
}

.chatbot-widget{
  position:fixed;bottom:var(--sp-4);right:var(--sp-4);z-index:900;
}
.chatbot-widget--open .chatbot-toggle{animation:none}
.chatbot-toggle{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(145deg,var(--c-primary),var(--c-primary-light));color:#fff;
  border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);font-size:var(--fs-xl);
  transition:transform .2s,box-shadow .2s;
  animation:chatPulse 2.4s ease-in-out infinite;
}
.chatbot-toggle:hover{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .chatbot-toggle{animation:none}
}
.chatbot-window{
  position:absolute;bottom:70px;right:0;width:340px;
  max-width:min(340px,calc(100vw - 1.25rem));
  background:var(--c-bg);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);overflow:hidden;
  display:none;flex-direction:column;max-height:min(480px,72dvh);
  opacity:0;transform:translateY(12px) scale(.96);
  transition:opacity .28s ease,transform .28s ease;
  transform-origin:bottom right;
}
.chatbot-window.open{
  display:flex;
  opacity:1;
  transform:translateY(0) scale(1);
}
@media(prefers-reduced-motion:reduce){
  .chatbot-window{transition:none;opacity:1;transform:none}
  .chatbot-window.open{transform:none}
}
.chatbot-header{background:var(--c-primary);color:#fff;padding:var(--sp-4);display:flex;align-items:center;justify-content:space-between}
.chatbot-header h4{font-size:var(--fs-sm)}
.chatbot-header button{background:none;color:#fff;opacity:.85;padding:var(--sp-1)}
.chatbot-header button:hover{opacity:1}
.chatbot-messages{flex:1;overflow-y:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);min-height:200px}
.chat-msg{
  max-width:85%;padding:var(--sp-3);border-radius:var(--radius-lg);font-size:var(--fs-sm);line-height:1.45;
  opacity:0;transform:translateY(8px);
}
.chat-msg.chat-msg--in{animation:chatMsgIn .32s ease forwards}
@media(prefers-reduced-motion:reduce){
  .chat-msg{opacity:1;transform:none}
  .chat-msg.chat-msg--in{animation:none}
}
.chat-msg.bot{background:var(--c-bg-alt);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:var(--c-primary);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-typing{
  align-self:flex-start;
  display:flex;gap:5px;padding:var(--sp-3) var(--sp-4);
  background:var(--c-bg-alt);border-radius:var(--radius-lg);border-bottom-left-radius:4px;
}
.chat-typing span{
  width:7px;height:7px;border-radius:50%;background:var(--c-text-sec);
  animation:chatDotBounce 1s ease-in-out infinite;
}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
.chat-quick-replies{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding-top:var(--sp-1);align-self:stretch}
.chat-chip{
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-full);border:1px solid var(--c-primary);
  background:var(--c-bg);color:var(--c-primary);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  cursor:pointer;transition:background .15s,color .15s;touch-action:manipulation;
}
.chat-chip:hover{background:var(--c-primary);color:#fff}
.chatbot-input{display:flex;border-top:1px solid var(--c-border);padding:var(--sp-2)}
.chatbot-input input{flex:1;min-width:0;padding:var(--sp-2) var(--sp-3);border:none;font-size:var(--fs-sm)}
.chatbot-input button{padding:var(--sp-2) var(--sp-3);background:var(--c-primary);color:#fff;border-radius:var(--radius);font-size:var(--fs-sm);font-weight:var(--fw-bold)}

/* Prototyp: Feedback-FAB (nicht Admin/Instructor) */
.feedback-widget{position:fixed;bottom:var(--sp-4);left:var(--sp-4);z-index:890}
.feedback-fab{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--c-primary);background:var(--c-bg);color:var(--c-primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.feedback-fab:hover{background:var(--c-primary);color:#fff;transform:scale(1.05)}
.feedback-fab--active{
  background:var(--c-accent);color:#fff;border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(229,57,53,.35);
}
.feedback-pick-mode{cursor:crosshair!important}
.feedback-pick-banner{
  position:fixed;top:0;left:0;right:0;z-index:2800;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3) var(--sp-4);
  background:var(--c-bg-dark);color:var(--c-text-inv);
  font-size:var(--fs-sm);text-align:center;gap:var(--sp-2);
  box-shadow:var(--shadow);
}
.feedback-pick-highlight{
  outline:3px solid var(--c-accent)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(229,57,53,.25);
}
.feedback-target-meta{
  padding:var(--sp-3);background:var(--c-bg-alt);border-radius:var(--radius);
  border:1px solid var(--c-border);font-size:var(--fs-sm);
}
.feedback-target-meta code{font-size:11px;word-break:break-all;color:var(--c-primary)}
.feedback-target-line{margin-bottom:var(--sp-2)}
.feedback-target-line:last-child{margin-bottom:0}
.feedback-modal-overlay{z-index:3050}
.feedback-modal{max-width:480px}

@media(prefers-reduced-motion:reduce){
  .feedback-pick-mode{cursor:default!important}
}

/* --- ADMIN ------------------------------------------------- */
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-sidebar{
  background:var(--c-bg-dark);color:var(--c-text-inv);padding:var(--sp-4) 0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-sidebar .logo{padding:var(--sp-4) var(--sp-4) var(--sp-6);font-size:var(--fs-lg);font-weight:var(--fw-black)}
.admin-sidebar .logo span{color:var(--c-accent)}
.admin-sidebar nav a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);
  transition:all .2s;opacity:.7;
}
.admin-sidebar nav a:hover,.admin-sidebar nav a.active{background:rgba(255,255,255,.08);opacity:1}
.admin-main{padding:var(--sp-6)}
.admin-main h1{font-size:var(--fs-2xl);margin-bottom:var(--sp-6)}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-8)}
.kpi-card{
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:var(--sp-4);
}
.kpi-card h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--c-text-sec);margin-bottom:var(--sp-2)}
.kpi-card .kpi-value{font-size:var(--fs-3xl);font-weight:var(--fw-black)}
.kpi-card .kpi-change{font-size:var(--fs-xs);margin-top:var(--sp-1)}
.kpi-card .kpi-change.up{color:var(--c-cta)}
.kpi-card .kpi-change.down{color:var(--c-accent)}

.data-table{width:100%;border-collapse:collapse;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
.data-table th,.data-table td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--c-border);font-size:var(--fs-sm)}
.data-table th{background:var(--c-bg-alt);font-weight:var(--fw-bold);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.5px}
.data-table tr:hover{background:var(--c-bg-alt)}

.status-badge{
  display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;
}
.status-badge.published{background:#e8f5e9;color:#2e7d32}
.status-badge.draft{background:#fff3e0;color:#e65100}
.status-badge.archived{background:#efebe9;color:#4e342e}
.status-badge.active{background:#e8f5e9;color:#2e7d32}
.status-badge.expired{background:#fce4ec;color:#c62828}
.status-badge.open{background:#e3f2fd;color:#1565c0}
.status-badge.closed{background:#efebe9;color:#4e342e}
.status-badge.flagged{background:#fce4ec;color:#c62828}

.chart-placeholder{
  width:100%;min-height:180px;height:clamp(180px,35vw,240px);background:var(--c-bg-alt);border:1px solid var(--c-border);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  color:var(--c-text-sec);font-size:var(--fs-sm);
}

/* --- DEMO CHARTS -------------------------------------------- */
.demo-chart{
  width:100%;background:var(--c-bg-alt);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);
  min-height:0;height:auto;
}
.demo-chart-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--c-text-sec);margin-bottom:var(--sp-1)}
.demo-chart-canvas{width:100%;position:relative}
.demo-svg{width:100%;height:auto;display:block}
.demo-svg-donut{max-width:180px;margin:0 auto}
.demo-chart-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);justify-content:center;margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--c-text-sec)}
.demo-chart-legend-item{display:flex;align-items:center;gap:4px}
.demo-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* --- DETAIL MODAL (reusable for ticket/user/order details) --- */
.detail-modal .modal{max-width:700px}
.detail-modal .detail-section{margin-bottom:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--c-border)}
.detail-modal .detail-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.detail-modal .detail-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;color:var(--c-text-sec);margin-bottom:var(--sp-1)}
.detail-modal .detail-row{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.detail-modal .detail-col{flex:1;min-width:140px}
.detail-modal .detail-chat{display:flex;flex-direction:column;gap:var(--sp-3);max-height:280px;overflow-y:auto;padding:var(--sp-3);background:var(--c-bg-alt);border-radius:var(--radius);margin-bottom:var(--sp-3)}
.detail-modal .detail-chat-msg{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);max-width:80%;font-size:var(--fs-sm)}
.detail-modal .detail-chat-msg.customer{background:var(--c-bg);border:1px solid var(--c-border);align-self:flex-start}
.detail-modal .detail-chat-msg.agent{background:var(--c-primary);color:#fff;align-self:flex-end}
.detail-modal .detail-chat-msg .msg-meta{font-size:var(--fs-xs);opacity:.7;margin-top:2px}

/* --- TAB NAVIGATION (account, course-editor) ---------------- */
.tab-nav{display:flex;gap:0;border-bottom:2px solid var(--c-border);margin-bottom:var(--sp-6);overflow-x:auto}
.tab-nav-btn{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text-sec);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.tab-nav-btn:hover{color:var(--c-text)}
.tab-nav-btn.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* --- WIZARD STEPS ------------------------------------------- */
.wizard-steps{display:flex;gap:0;margin-bottom:var(--sp-6);counter-reset:step}
.wizard-step{flex:1;text-align:center;position:relative;padding:var(--sp-3) var(--sp-2);font-size:var(--fs-sm);color:var(--c-text-sec);font-weight:var(--fw-semibold)}
.wizard-step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--c-border);margin:0 auto var(--sp-2);font-weight:var(--fw-bold);background:var(--c-bg)}
.wizard-step.active{color:var(--c-primary)}
.wizard-step.active::before{border-color:var(--c-primary);background:var(--c-primary);color:#fff}
.wizard-step.done{color:var(--c-success, #2e7d32)}
.wizard-step.done::before{border-color:var(--c-success, #2e7d32);background:var(--c-success, #2e7d32);color:#fff;content:'✓'}
.wizard-step:not(:last-child)::after{content:'';position:absolute;top:44px;left:calc(50% + 20px);width:calc(100% - 40px);height:2px;background:var(--c-border)}
.wizard-step.done:not(:last-child)::after{background:var(--c-success, #2e7d32)}

/* --- CHECKOUT STEPPER --------------------------------------- */
.checkout-stepper{display:flex;gap:0;justify-content:center;margin-bottom:var(--sp-6)}
.checkout-stepper .step{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--c-text-sec)}
.checkout-stepper .step.active{color:var(--c-primary);font-weight:var(--fw-bold)}
.checkout-stepper .step.done{color:var(--c-success, #2e7d32)}
.checkout-stepper .step-num{width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-xs)}
.checkout-stepper .step.active .step-num{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.checkout-stepper .step.done .step-num{background:var(--c-success, #2e7d32);color:#fff;border-color:var(--c-success, #2e7d32)}
.checkout-stepper .step-divider{width:40px;height:2px;background:var(--c-border);margin:0 var(--sp-2)}

/* --- SORTABLE EPISODE TABLE --------------------------------- */
.episode-table{width:100%}
.episode-table td,.episode-table th{padding:var(--sp-2) var(--sp-3);text-align:left;font-size:var(--fs-sm)}
.episode-table .drag-handle{cursor:grab;opacity:.4;font-size:var(--fs-lg)}
.episode-table .drag-handle:hover{opacity:.8}
.episode-table .ep-status{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.episode-table .ep-status.live{background:#e8f5e9;color:#2e7d32}
.episode-table .ep-status.draft{background:#fff3e0;color:#e65100}

/* --- SUCCESS STATE ------------------------------------------ */
.success-state{text-align:center;padding:var(--sp-10) var(--sp-4)}
.success-state .success-icon{font-size:3rem;margin-bottom:var(--sp-3)}
.success-state h2{margin-bottom:var(--sp-2)}
.success-state p{color:var(--c-text-sec);margin-bottom:var(--sp-4)}

/* --- INLINE SAVE FEEDBACK ----------------------------------- */
.save-feedback{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--c-success, #2e7d32);font-size:var(--fs-sm);font-weight:var(--fw-semibold);opacity:0;transition:opacity .3s}
.save-feedback.show{opacity:1}

/* Admin / Instructor — 2-Spalten-Grids (eine Spalte auf Mobil) */
.admin-grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}

/* Horizontales Scrollen für breite Tabellen im Admin */
.admin-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:var(--sp-4);
  border-radius:var(--radius);
  border:1px solid var(--c-border);
}
.admin-table-scroll .data-table{
  min-width:520px;
  border-radius:0;
  border:none;
  margin:0;
}

/* Mobil: schlankere Instructor-/Admin-Kopfzeile */
.admin-instructor-hero{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
  flex-wrap:wrap;
}
.admin-instructor-avatar{
  width:56px;height:56px;border-radius:50%;background:var(--c-primary);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:1.35rem;font-weight:900;flex-shrink:0;
}
@media(min-width:768px){
  .admin-instructor-avatar{width:64px;height:64px;font-size:1.5rem}
}

/* --- MODAL ------------------------------------------------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3000;
  display:none;align-items:center;justify-content:center;padding:var(--sp-4);
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--c-bg);border-radius:var(--radius-lg);
  max-width:600px;width:100%;max-height:90vh;overflow-y:auto;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--c-border);
}
.modal-header h3{font-size:var(--fs-lg)}
.modal-close{font-size:var(--fs-2xl);line-height:1;opacity:.6;transition:opacity .2s}
.modal-close:hover{opacity:1}
.modal-body{padding:var(--sp-6)}
.modal-footer{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--c-border);display:flex;justify-content:flex-end;gap:var(--sp-3)}

/* --- TOAST ------------------------------------------------- */
.toast{
  position:fixed;bottom:var(--sp-8);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--c-text);color:#fff;padding:var(--sp-3) var(--sp-6);
  border-radius:var(--radius);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  box-shadow:var(--shadow-lg);z-index:5000;max-width:min(90vw,420px);text-align:center;line-height:1.4;
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;
  border-left:4px solid rgba(255,255,255,.35);
}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.toast.toast-success{border-left-color:var(--c-cta);background:#1b5e20}
.toast.toast-info{border-left-color:var(--c-info);background:#0d47a1}
.toast.toast-warn{border-left-color:var(--c-warning);background:#e65100}

/* Screenreader-only live region for tab changes */
#ariaLiveRegion{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* --- RESPONSIVE -------------------------------------------- */
@media(min-width:768px){
  .filter-sidebar-backdrop{display:none!important}
  .catalog-layout .filter-sidebar{
    position:static;
    width:auto;
    height:auto;
    max-height:none;
    transform:none!important;
    z-index:auto;
    border-radius:var(--radius);
    box-shadow:none;
  }
  .header-search{display:block}
  .catalog-layout{grid-template-columns:260px 1fr}
  .course-hero-inner{grid-template-columns:1.2fr .8fr}
  .cart-layout{grid-template-columns:1fr 360px}
  .checkout-layout{grid-template-columns:1fr 380px}
  .account-layout{grid-template-columns:220px 1fr}
  .deal-card{grid-template-columns:1fr 1fr}
  .player-layout{grid-template-columns:1fr 360px}
  .playlist-sidebar{max-height:100vh}
}
@media(min-width:1024px){
  .hero h1{font-size:var(--fs-4xl)}
  .product-card{width:280px}
}
@media(min-width:768px){
  .admin-grid-2{
    grid-template-columns:repeat(2,1fr);
    gap:var(--sp-6);
  }
}

@media(max-width:767px){
  /* --- Öffentlicher Shop (mobile) --- */
  .container{
    padding-left:max(var(--sp-3),env(safe-area-inset-left,0px));
    padding-right:max(var(--sp-3),env(safe-area-inset-right,0px));
  }
  .section{padding:var(--sp-6) 0}
  .section-header{align-items:flex-start;flex-direction:column;gap:var(--sp-2)}

  .announcement-bar{
    font-size:clamp(10px,2.8vw,var(--fs-sm));
    padding:var(--sp-2);
    line-height:1.3;
    height:auto;
    min-height:var(--announcement-h);
  }

  .header-inner{gap:var(--sp-2);min-width:0}
  .header-logo{
    font-size:clamp(1.05rem,4.2vw,1.45rem);
    white-space:normal;
    text-align:center;
    line-height:1.15;
    max-width:38vw;
  }
  .header-actions{gap:var(--sp-2);flex-shrink:0}

  .hero{min-height:min(68vh,400px)}
  .hero-content{padding:var(--sp-8) var(--sp-3)}
  .hero h1{font-size:clamp(1.35rem,6vw,2rem)}
  .hero p{font-size:var(--fs-base);margin-bottom:var(--sp-4)}
  .btn-lg{padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm)}

  .carousel-btn{width:36px;height:36px;font-size:var(--fs-base)}
  .carousel-btn.prev{left:2px}
  .carousel-btn.next{right:2px}

  .product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr));gap:var(--sp-3)}

  .mobile-menu{width:min(300px,92vw)}

  .chatbot-widget{
    bottom:max(var(--sp-3),env(safe-area-inset-bottom,0px));
    right:max(var(--sp-3),env(safe-area-inset-right,0px));
  }
  .chatbot-window{
    width:min(340px,calc(100vw - 1.25rem));
    max-height:min(480px,72dvh);
  }

  .feedback-widget{
    bottom:max(var(--sp-3),env(safe-area-inset-bottom,0px));
    left:max(var(--sp-3),env(safe-area-inset-left,0px));
  }

  .footer-grid{gap:var(--sp-6)}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center}

  .deal-countdown{font-size:clamp(1.2rem,5.5vw,1.75rem)}
  .deal-countdown span{min-width:46px;margin:var(--sp-1)}

  .cart-item{
    flex-direction:column;
    align-items:stretch;
    padding:var(--sp-3);
  }
  .cart-item-img{width:100%;max-width:180px;margin-inline:auto}
  .cart-item-price-col{text-align:left!important;margin-top:var(--sp-2)}
  .cart-item-meta{flex-direction:column;align-items:flex-start!important;gap:var(--sp-2)}
  .cart-summary,.order-summary{position:static!important;top:auto!important}
  .coupon-input{flex-direction:column;align-items:stretch}

  .payment-option{align-items:flex-start}

  .modal-footer{flex-wrap:wrap;justify-content:stretch;gap:var(--sp-2)}
  .modal-footer .btn{flex:1 1 auto;min-width:0}

  .instructor-stats{flex-wrap:wrap;justify-content:center;gap:var(--sp-4)}
  .instructor-avatar{width:96px;height:96px;font-size:var(--fs-3xl)}

  .onboarding-card{width:100%;max-width:320px}

  .auth-container{margin:var(--sp-6) auto var(--sp-10)}

  .course-hero{padding:var(--sp-6) 0}
  .course-hero-inner .price-box .price-current{font-size:clamp(1.65rem,8vw,2.25rem)}

  .course-instructor-block{
    flex-direction:column!important;
    align-items:center!important;
    text-align:center;
  }
  .course-instructor-block .course-instructor-avatar{margin-inline:auto}
  .course-instructor-block .course-instructor-bio{min-width:0;width:100%}

  /* Katalog: Filter als Drawer */
  .filter-sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:2098;
  }
  .filter-sidebar-backdrop.visible{display:block}
  .catalog-layout .filter-sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100dvh;
    max-height:100dvh;
    width:min(320px,91vw);
    z-index:2099;
    transform:translateX(-105%);
    transition:transform .28s ease;
    border-radius:0;
    margin:0;
    box-shadow:8px 0 28px rgba(0,0,0,.18);
    -webkit-overflow-scrolling:touch;
  }
  .catalog-layout .filter-sidebar.open{transform:translateX(0)}

  /* Tabellen (Konto & Co.) */
  .table-scroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:var(--sp-4) 0;
    border-radius:var(--radius);
    border:1px solid var(--c-border);
  }
  .table-scroll .order-table{
    min-width:480px;
    margin:0;
  }

  .legal-page{padding:0 var(--sp-1)}

  .hero-content .btn-primary + .btn{margin-left:0!important;margin-top:var(--sp-3)}
  .deal-card{padding:var(--sp-5);margin:var(--sp-4) 0}
  .deal-card h2{font-size:clamp(1.1rem,4vw,1.45rem)}
  .stack-mobile-flex{flex-direction:column!important;align-items:stretch!important}
  .stack-mobile-flex .btn{width:100%}
  .account-content{padding:var(--sp-4)}
  .course-hero h1{font-size:clamp(1.15rem,5.5vw,2rem)!important}
  .toast{
    bottom:max(var(--sp-6),env(safe-area-inset-bottom,0px));
    max-width:min(92vw,420px);
  }

  .player-controls{flex-wrap:wrap;gap:var(--sp-2);row-gap:var(--sp-2)}

  :root{--admin-mobile-bar-h:52px}

  .admin-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    min-height:100vh;
    min-height:100dvh;
  }

  .admin-mobile-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-3);
    grid-column:1/-1;
    min-height:var(--admin-mobile-bar-h);
    padding:var(--sp-2) var(--sp-4);
    background:var(--c-bg-dark);
    color:var(--c-text-inv);
    position:sticky;
    top:0;
    z-index:1999;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .admin-mobile-bar .admin-mobile-brand{
    font-weight:var(--fw-black);
    font-size:var(--fs-sm);
    letter-spacing:.3px;
    flex:1;
    text-align:center;
    line-height:1.2;
  }
  .admin-mobile-bar .admin-mobile-brand span:first-of-type{color:var(--c-accent)}
  .admin-mobile-bar .admin-mobile-brand small{color:rgba(255,255,255,.85)}
  .admin-menu-toggle{
    width:44px;min-width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:var(--radius);
    background:rgba(255,255,255,.12);color:#fff;
    font-size:1.25rem;line-height:1;cursor:pointer;
    touch-action:manipulation;
  }
  .admin-menu-toggle:active{background:rgba(255,255,255,.2)}
  .admin-mobile-home{
    min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-size:1rem;text-decoration:none;border-radius:var(--radius);
    background:rgba(255,255,255,.08);
    touch-action:manipulation;
  }

  .admin-sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    top:var(--admin-mobile-bar-h);
    background:rgba(0,0,0,.45);
    z-index:1997;
  }
  .admin-sidebar-backdrop.is-visible{display:block}

  .admin-sidebar{
    display:none;
  }
  .admin-sidebar.open{
    display:block;
    position:fixed;
    left:0;
    top:var(--admin-mobile-bar-h);
    width:min(288px,88vw);
    height:calc(100vh - var(--admin-mobile-bar-h));
    height:calc(100dvh - var(--admin-mobile-bar-h));
    max-height:calc(100dvh - var(--admin-mobile-bar-h));
    z-index:2000;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:8px 0 32px rgba(0,0,0,.35);
    border-radius:0;
  }

  .admin-main{
    padding:var(--sp-4);
    padding-bottom:var(--sp-10);
    max-width:100vw;
    overflow-x:hidden;
  }
  .admin-main h1{font-size:var(--fs-xl);margin-bottom:var(--sp-4)}
  .admin-main .sort-bar input[type="text"],
  .admin-main .sort-bar input[type="search"]{
    min-width:0;
    width:100%;
    max-width:100%;
  }

  .kpi-grid{
    grid-template-columns:1fr;
    gap:var(--sp-3);
    margin-bottom:var(--sp-6);
  }
  .kpi-card{padding:var(--sp-3)}
  .kpi-card .kpi-value{font-size:clamp(1.5rem,8vw,2rem)}
  .kpi-card h4{font-size:10px}
  .kpi-card .kpi-change{font-size:11px;line-height:1.35}

  .data-table th,.data-table td{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs)}
  .data-table th{font-size:10px}

  .chart-placeholder{font-size:var(--fs-xs);min-height:160px}

  .form-row{grid-template-columns:1fr}
  .hide-mobile{display:none}

  .tab-nav{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-nav-btn{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs)}
  .wizard-steps{flex-wrap:wrap}
  .wizard-step{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-1)}
  .wizard-step::before{width:26px;height:26px;font-size:var(--fs-xs)}
  .wizard-step:not(:last-child)::after{display:none}
  .checkout-stepper{flex-wrap:wrap;gap:var(--sp-1)}
  .checkout-stepper .step{font-size:var(--fs-xs)}
  .checkout-stepper .step-divider{width:20px}
  .detail-modal .modal{max-width:95vw}
  .detail-modal .detail-row{flex-direction:column;gap:var(--sp-2)}
  .demo-chart{padding:var(--sp-3)}
  .demo-svg-donut{max-width:140px}
}

/* --- STICKY CART CTA --------------------------------------- */
.cart-sticky-cta{
  position:sticky;bottom:0;z-index:900;
  background:var(--c-bg);
  border-top:2px solid var(--c-primary);
  box-shadow:0 -4px 20px rgba(0,0,0,.12);
  padding:var(--sp-3) 0;
}

/* --- NEWSLETTER FOOTER SECTION ----------------------------- */
.footer-newsletter{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-4) 0;margin-bottom:var(--sp-4);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-newsletter h4{color:#fff;margin:0;white-space:nowrap}
.footer-newsletter p{color:rgba(255,255,255,.6);font-size:var(--fs-sm);margin:0;flex:1;min-width:180px}
.footer-newsletter form{display:flex;gap:var(--sp-2)}
.footer-newsletter input{
  padding:var(--sp-2) var(--sp-3);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);background:rgba(255,255,255,.08);color:#fff;
  font-size:var(--fs-sm);min-width:200px;
}
.footer-newsletter input::placeholder{color:rgba(255,255,255,.4)}
.footer-newsletter .btn{white-space:nowrap}

/* --- WISHLIST HEART ---------------------------------------- */
.wishlist-btn{
  position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .15s;
}
.wishlist-btn:hover{transform:scale(1.15)}
.wishlist-btn.active{color:var(--c-accent)}

@media(min-width:768px){
  .admin-mobile-bar{display:none}
  .admin-sidebar-backdrop{display:none!important}
  .admin-grid-2{grid-template-columns:1fr 1fr}
}