.al-lessons {
  width: 100%;
  padding-inline: 12px;
}
@media (min-width: 1200px){
  .al-lessons { padding-inline: 20px; }
}

/* Rail Cards: angenehme Min-Breiten sind bereits gesetzt; 
   für sehr große Screens Cards nicht zu klein werden lassen: */
.al-rail { grid-auto-columns: minmax(240px, 1fr); }
@media (min-width: 1024px){
  .al-rail { grid-auto-columns: minmax(280px, 1fr); }
}

.al-lessons{
  --gap:14px; --radius:16px; --br:#e5e7eb; --ink:#0f172a; --sub:#64748b; --bg:#fff; --muted:#f8fafc; --shadow:0 10px 30px rgba(0,0,0,.08);
  --chip:#0f172a; --chip-ink:#fff;
}
.al-lessons *{box-sizing:border-box}
.al-lessons .al-header{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:4px 0 10px}
.al-lessons .al-count{color:var(--sub);font-size:.9rem}
.al-lessons .al-toolbar{
  position:sticky; top:0; z-index:2; padding:10px 0; background:#fff;
  display:grid; grid-template-columns:1fr auto auto; gap:10px; border-bottom:1px solid var(--br);
}
@media (min-width:768px){ .al-lessons .al-toolbar{ grid-template-columns:1fr 200px 200px } }
.al-lessons input[type="search"], .al-lessons select{
  width:100%; padding:12px 14px; border:1px solid var(--br); border-radius:12px; background:#fff; font:inherit
}
.al-lessons .al-chips{
  display:flex; gap:8px; overflow:auto; padding:8px 2px 2px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.al-lessons .chip{
  scroll-snap-align:start; white-space:nowrap; padding:8px 12px; border:1px solid var(--br); border-radius:999px; background:#fff; cursor:pointer; font-size:.95rem
}
.al-lessons .chip.is-active{ background:var(--chip); color:var(--chip-ink); border-color:var(--chip) }

.al-lessons .al-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
@media (min-width:480px){ .al-lessons .al-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) } }
@media (min-width:1024px){ .al-lessons .al-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) } }

.al-lessons .card{
  border:1px solid var(--br); border-radius:var(--radius); overflow:hidden; background:var(--bg);
  box-shadow:var(--shadow); transform:translateZ(0);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.al-lessons .card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.10); border-color:#dbe2ea }

.al-lessons .thumb{ display:block; aspect-ratio:16/9; background:var(--muted); position:relative; overflow:hidden }
.al-lessons .thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease }
.al-lessons .thumb img.is-ready{ opacity:1 }
.al-lessons .thumb::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
  opacity:.0; transition:opacity .25s ease;
}
.al-lessons .card:hover .thumb::after{ opacity:.55 }

.al-lessons .card-body{ padding:12px }
.al-lessons .title{ font-size:1.02rem; line-height:1.35; margin:.15rem 0 .35rem; color:var(--ink); font-weight:650 }
.al-lessons .title a{ color:inherit; text-decoration:none }
.al-lessons .desc{ color:var(--sub); font-size:.95rem }

.al-lessons .meta{ display:flex; gap:10px; color:var(--sub); font-size:.88rem; margin:.25rem 0 .5rem; align-items:center }
.al-lessons .tag{ font-size:.78rem; padding:4px 8px; border:1px solid var(--br); border-radius:999px; color:var(--sub); background:#fff }

.al-lessons .al-footer{ display:none } /* Load More entfällt */
.al-lessons .al-sentinel{ height:1px }

/* Skeletons */
.al-lessons .skeleton{ position:relative; overflow:hidden; background:#eef2f7 }
.al-lessons .skeleton::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-100%); animation:al-shimmer 1.4s infinite;
}
@keyframes al-shimmer{ 100%{ transform:translateX(100%) } }
.al-lessons .sk-card{ border:1px solid var(--br); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow) }
.al-lessons .sk-thumb{ aspect-ratio:16/9 }
.al-lessons .sk-line{ height:12px; margin:10px 12px; border-radius:8px }

/* ---------- NETFLIX RAILS NAV (Overlay + Fades) ---------- */
.al-row-head{ display:flex; align-items:center; justify-content:space-between; padding:0 4px 8px; }
.al-row-title{ font-size:1.1rem; font-weight:700; color:#0f172a; margin:0; }

.al-rail-wrap{ position:relative; }
.al-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr);
  gap:14px; overflow:auto; scroll-snap-type:x proximity; padding-bottom:2px;
}
@media (min-width:480px){ .al-rail{ grid-auto-columns:minmax(220px,1fr) } }
@media (min-width:1024px){ .al-rail{ grid-auto-columns:minmax(260px,1fr) } }
.al-rail > .card{ scroll-snap-align:start; }
.al-rail-sentinel{ width:1px; height:1px; }

/* Edge-Fades (zeigen „es geht weiter“) */
.al-rail-wrap::before, .al-rail-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; pointer-events:none; transition:opacity .2s ease; opacity:0;
}
.al-rail-wrap::before{ left:0;  background:linear-gradient(90deg,#fff 40%,rgba(255,255,255,0)); }
.al-rail-wrap::after { right:0; background:linear-gradient(270deg,#fff 40%,rgba(255,255,255,0)); }
.al-rail-wrap[data-left="1"]::before{ opacity:1; }
.al-rail-wrap[data-right="1"]::after{ opacity:1; }

/* Overlay-Buttons */
.al-rail-nav{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  pointer-events:none; opacity:0; transition:opacity .2s ease; padding:0 6px;
}
.al-rail-wrap:hover .al-rail-nav,
.al-rail-wrap:focus-within .al-rail-nav,
.al-rail-wrap.nav-visible .al-rail-nav{ opacity:1; }

.al-arrow{
  pointer-events:auto; width:44px; height:44px; border-radius:999px;
  background:rgba(15,23,42,.6); color:#fff; border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(15,23,42,.35);
  backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.al-arrow:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(15,23,42,.4); }
.al-arrow:active{ transform:translateY(0); }
.al-arrow[disabled]{ opacity:.35; cursor:default; }

@media (prefers-reduced-motion: reduce){
  .al-rail-nav, .al-arrow{ transition:none }
}

/* Netflix-Rails Overlay Nav – robust gegen Theme-Styles */
.al-lessons .al-rail-wrap{ position:relative; }
.al-lessons .al-rail-nav{
  position:absolute; inset:0; z-index:5;                 /* on top */
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none; opacity:0; transition:opacity .2s ease; padding:0 6px;
}
.al-lessons .al-rail-wrap:hover .al-rail-nav,
.al-lessons .al-rail-wrap:focus-within .al-rail-nav,
.al-lessons .al-rail-wrap.nav-visible .al-rail-nav{ opacity:1; }

.al-lessons .al-rail-nav .al-arrow{
  all: unset; box-sizing:border-box;                     /* reset fremde Button-Styles */
  pointer-events:auto; cursor:pointer;
  width:44px; height:44px; border-radius:999px;
  background:rgba(15,23,42,.6) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(15,23,42,.35) !important;
  backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.al-lessons .al-rail-nav .al-arrow:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(15,23,42,.4) !important; }
.al-lessons .al-rail-nav .al-arrow[disabled]{ opacity:.35 !important; cursor:default !important; }

/* Edge Fades (zeigen, dass es weitergeht) */
.al-lessons .al-rail-wrap::before, .al-lessons .al-rail-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; z-index:4; pointer-events:none;
  transition:opacity .2s ease; opacity:0;
}
.al-lessons .al-rail-wrap::before{ left:0;  background:linear-gradient(90deg,#fff 40%,rgba(255,255,255,0)); }
.al-lessons .al-rail-wrap::after { right:0; background:linear-gradient(270deg,#fff 40%,rgba(255,255,255,0)); }
.al-lessons .al-rail-wrap[data-left="1"]::before{ opacity:1; }
.al-lessons .al-rail-wrap[data-right="1"]::after{ opacity:1; }


/* === Rails: nur die Rail scrollt, Wrapper bleibt clean === */
.al-rail-wrap{
  overflow: hidden;
  position: relative;
}
.al-rail{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  padding: 4px 4px 12px;       /* etwas Luft für versteckte Scrollbar */
  scrollbar-width: none;       /* Firefox: Scrollbar ausblenden */
}
.al-rail::-webkit-scrollbar{ display:none; } /* WebKit: Scrollbar ausblenden */

/* Pfeile schweben oben drüber – blockieren keine Gesten */
.al-rail-nav{ pointer-events: none; }
.al-rail-nav .al-arrow{ pointer-events: all; }

/* === Card: konsistente Breite + Bild-Ratio === */
.al-row .card{
  flex: 0 0 300px;         /* Rail-Kartenbreite */
  scroll-snap-align: start;
}
.card .thumb{
  display:block;
  width:100%;
  aspect-ratio: 16/10;     /* Ratio fürs Thumb */
  background: var(--ui-muted, #f2f4f7);
  border-radius: 14px;
  overflow: hidden;
}
.card .thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

/* Topline + Text Clamping */
.card .topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.card .desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 3;   /* 2-3 Zeilen reichen für „Netflix“ */
  overflow:hidden;
  max-height: 4.8em;       /* Fallback für Browser ohne clamp */
}

/* Mobile: etwas schmalere Karte */
@media (max-width: 600px){
  .al-row .card{ flex-basis: 260px; }
  .card .thumb{ aspect-ratio: 16/11; }
}

/* === Rails nur horizontal scrollen, keine zweite Scrollbar === */
.al-rail-wrap{ overflow: hidden; position: relative; }
.al-rail{
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x proximity;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}
.al-rail::-webkit-scrollbar{ display:none; }

/* === Karten-Layout & Bilder === */
.al-row .card{ flex: 0 0 300px; scroll-snap-align: start; }
.card .thumb{
  display:block; width:100%;
  aspect-ratio: 16/10;
  background:#f3f5f7; border-radius:14px; overflow:hidden;
}
.card .thumb img,
.card img.thumb-img{
  display:block !important;
  width:100%; height:100%;
  object-fit:cover; opacity:1 !important; visibility:visible !important;
}

/* Text-Kürzungen -> Netflixiger */
.card .title{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; margin:6px 0 4px;
}
.card .desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; max-height:4.8em;
}
.topline{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* Mobile: schmalere Karten */
@media (max-width:600px){
  .al-row .card{ flex-basis:260px; }
  .card .thumb{ aspect-ratio:16/11; }
}

/* Overlay sitzt über der Rail, darf aber die Karten nicht blocken */
.al-rail-nav{ pointer-events: none; }
.al-rail-nav .al-arrow{ pointer-events: auto; } /* nur Buttons klickbar */

/* Modal robust sichtbar, ganz oben */
.alh-modal{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,.55);
  z-index: 2147483647; /* über allem */
  padding: 5vh 6vw;
}
.alh-modal[aria-hidden="false"]{ display:block; }
.alh-modal .alh-dialog{
  background:#fff; border-radius:14px; margin:auto; max-width:900px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

/* Scroll-Lock wenn Modal offen */
body.alh-open { overflow:hidden; }

/* Rail-Overlay darf Kartenklicks nicht blocken */
.al-rail-nav{ pointer-events:none; }
.al-rail-nav .al-arrow{ pointer-events:auto; }

.alh-modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.55);z-index:2147483647;padding:5vh 6vw;}
.alh-modal[aria-hidden="false"]{display:block;}
.alh-modal .alh-dialog{background:#fff;border-radius:14px;margin:auto;max-width:900px;box-shadow:0 24px 80px rgba(0,0,0,.35);}
body.alh-open{overflow:hidden;}
.al-rail-nav{pointer-events:none;}
.al-rail-nav .al-arrow{pointer-events:auto;}

/* === Modal robust & zentriert ========================================= */
.alh-modal{
  position: fixed;
  inset: 0;
  display: none;                 /* Grundzustand: aus */
  background: rgba(0,0,0,.55);
  z-index: 2147483647;           /* über allem */
  padding: 5vh 6vw;
  /* Zentrieren per Flex */
  display: none;
}
.alh-modal[aria-hidden="false"]{
  display: flex;                 /* sichtbar + Flex-Zentrierung */
  align-items: center;
  justify-content: center;
}

.alh-modal .alh-dialog{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  width: min(900px, 90vw);       /* responsive Breite */
  max-height: 90vh;              /* nicht höher als Viewport */
  overflow: auto;                /* scrollbarer Inhalt bei langen Texten */
  opacity: 0;
  transform: scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.alh-modal[aria-hidden="false"] .alh-dialog{
  opacity: 1;
  transform: scale(1);
}

/* Bild im Modal */
.alh-modal .alh-cover img{
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Body Scroll-Lock, wie im JS */
body.alh-open{ overflow: hidden; }

/* Rail-Overlay darf Kartenklicks nicht blocken */
.al-rail-nav{ pointer-events: none; }
.al-rail-nav .al-arrow{ pointer-events: auto; }

/* === Rails – weich scrollen, Kanten-Fade === */
.al-rail{
  display:flex; gap:18px;
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x proximity;
  padding:6px 8px 18px;
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.al-rail::-webkit-scrollbar{ display:none; }
.al-rail-wrap{ overflow:hidden; position:relative; }

/* === Karten (Netflix-Feeling) === */
.al-row .card{
  flex: 0 0 clamp(240px, 24vw, 320px);
  background:#fff; border-radius:16px;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor:pointer; overflow:hidden;
  scroll-snap-align:start;
}
.al-row .card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,24,40,.12); }

.card .thumb{ display:block; width:100%; aspect-ratio:16/9; background:#f3f5f7; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.card-body{ padding:12px 14px 14px; }
.card .topline{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card .tag{
  font: 500 12px/1 system-ui,-apple-system,Segoe UI,Roboto;
  padding:4px 8px; border-radius:999px; background:#eef2f6; color:#344054;
}
.card .meta span{
  font: 500 12px/1 system-ui,-apple-system,Segoe UI,Roboto;
  color:#667085; margin-left:10px;
}
.card .title{
  margin:6px 0 4px; font-weight:600; color:#101828;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.card .title a{ color:inherit; text-decoration:none; }
.card .title a:hover{ text-decoration:underline; }
.card .desc{
  color:#475467;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}

/* Mobile Karten etwas schmaler */
@media (max-width:600px){
  .al-row .card{ flex-basis:260px; }
  .card .thumb{ aspect-ratio:16/11; }
}

/* === Overlay-Pfeile (schweben, runde Buttons) === */
.al-rail-nav{ pointer-events:none; }
.al-rail-nav .al-arrow{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:9999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(16,24,40,.08);
  box-shadow:0 6px 18px rgba(16,24,40,.18);
  display:grid; place-items:center;
}
.al-rail-nav .al-arrow:hover{ transform:translateY(-50%) scale(1.04); }
.al-rail-nav .prev{ left:6px; }
.al-rail-nav .next{ right:6px; }

/* === Modal modern & zentriert === */
.alh-modal{
  position:fixed; inset:0;
  display:none; background:rgba(0,0,0,.55);
  z-index:2147483647; padding:5vh 6vw;
}
.alh-modal[aria-hidden="false"]{ display:flex; align-items:center; justify-content:center; }
.alh-modal .alh-dialog{
  background:#fff; border-radius:16px; width:min(920px, 92vw); max-height:90vh;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  overflow:auto; opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  padding:16px 18px;
}
.alh-modal[aria-hidden="false"] .alh-dialog{ opacity:1; transform:none; }
.alh-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.alh-head .alh-close{ font-size:22px; background:none; border:0; cursor:pointer; line-height:1; }
.alh-body{ display:grid; grid-template-columns:minmax(280px,1fr) 1.2fr; gap:18px; }
@media (max-width:800px){ .alh-body{ grid-template-columns:1fr; } }
.alh-cover img{ width:100%; height:auto; max-height:50vh; object-fit:cover; border-radius:12px; display:block; }
.alh-actions{ margin-top:12px; }
.alh-btn.primary{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background:#111; color:#fff; text-decoration:none; font-weight:600;
}
body.alh-open{ overflow:hidden; }

/* ==== NETFLIX THEME ===================================================== */

/* Rails: weiche Ränder + Swipe */
.al-rail { display:flex; gap:18px; overflow-x:auto; overflow-y:visible;
   scroll-snap-type:x proximity; padding:10px 8px 20px;
  mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.al-rail::-webkit-scrollbar{ display:none; }
.al-rail-wrap{ overflow:hidden; position:relative; }
.al-rail-nav{ pointer-events:none; }
.al-rail-nav .al-arrow{ pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:9999px; background:rgba(15,15,15,.92); color:#fff;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(0,0,0,.35); display:grid; place-items:center;
}
.al-rail-nav .al-arrow:hover{ transform:translateY(-50%) scale(1.05); }
.al-rail-nav .prev{ left:8px; } .al-rail-nav .next{ right:8px; }

/* Karten: Poster-first, Text als Hover-Overlay */
.al-row .card{
  position:relative; flex:0 0 clamp(220px, 24vw, 300px);
  border:0; background:transparent; border-radius:14px; overflow:hidden;
  transform:translateZ(0); cursor:pointer; scroll-snap-align:start;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.al-row .card:hover{ transform:translateY(-4px) scale(1.03); filter:brightness(1.05);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.card .thumb{ display:block; width:100%; aspect-ratio:16/9; background:#0f0f0f; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay unten: Titel + Meta; Beschreibung im Card-Overlay aus */
.card-body{
  position:absolute; inset:auto 0 0; padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.55) 55%, transparent);
  color:#fff; opacity:0; transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease;
}
.al-row .card:hover .card-body{ opacity:1; transform:translateY(0); }
.card .title{ margin:0 0 4px; font-weight:700; line-height:1.25; }
.card .title a{ color:#fff; text-decoration:none; }
.card .title a:hover{ text-decoration:underline; }
.card .topline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.card .tag{ font:600 12px/1 system-ui; color:#fff; background:rgba(255,255,255,.18); padding:4px 8px; border-radius:999px; }
.card .meta span{ font:600 12px/1 system-ui; color:#e5e7eb; margin-left:10px; }
.card .desc{ display:none; } /* Netflix: keine Beschreibung in der Kachel */

/* Mobile: schmaler, anderes Ratio */
@media (max-width:600px){ .al-row .card{ flex-basis:240px; } .card .thumb{ aspect-ratio:16/11; } }

/* Modal: dunkel, clean, zentriert */
.alh-modal{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.65);
  z-index:2147483647; padding:5vh 6vw; }
.alh-modal[aria-hidden="false"]{ display:flex; align-items:center; justify-content:center; }
.alh-modal .alh-dialog{
  background:#141414; color:#fff; border-radius:16px; width:min(920px, 92vw); max-height:90vh; overflow:auto;
  box-shadow:0 24px 90px rgba(0,0,0,.55); opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease; padding:18px 20px;
}
.alh-modal[aria-hidden="false"] .alh-dialog{ opacity:1; transform:none; }
.alh-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; }
#alh-title{ font-weight:800; }
.alh-head .alh-close{ color:#fff; font-size:22px; background:none; border:0; cursor:pointer; }
.alh-body{ display:grid; grid-template-columns:minmax(320px, .95fr) 1.2fr; gap:18px; }
@media (max-width:820px){ .alh-body{ grid-template-columns:1fr; } }
.alh-cover img{ width:100%; height:auto; max-height:52vh; object-fit:cover; border-radius:12px; display:block; }
.alh-text{ color:#e5e7eb; }
.alh-actions{ margin-top:14px; }
.alh-btn.primary{ display:inline-block; padding:10px 16px; border-radius:10px; font-weight:700;
  background:#e50914; color:#fff; text-decoration:none; }
.alh-btn.primary:hover{ filter:brightness(1.1); }

/* Scroll-Lock */
body.alh-open{ overflow:hidden; }

/* ==== AQUARIUMLesson — LIGHT "Netflix" THEME OVERRIDES ==================== */
/* Palette – passe den Primärton bei Bedarf an */
:root{
  --al-primary: #1fa77a;          /* Brand-Grün */
  --al-primary-600: #178e67;
  --al-text: #101828;
  --al-muted: #667085;
  --al-chip-bg: #e9f6f2;
  --al-chip-text: #0b5b43;
}

/* Rails & Arrows (hell) */
.al-rail{ mask-image:linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          -webkit-mask-image:linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.al-rail-nav .al-arrow{
  background: rgba(255,255,255,.96);
  color: var(--al-primary);
  border: 1px solid rgba(16,24,40,.08);
  box-shadow: 0 8px 20px rgba(2,8,23,.12);
}
.al-rail-nav .al-arrow:hover{ transform:translateY(-50%) scale(1.05); }

/* Karten: hell, Poster-first, Overlay ist WEISSER Verlauf */
.al-row .card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow: 0 8px 20px rgba(16,24,40,.08);
}
.al-row .card:hover{ transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 34px rgba(16,24,40,.14); filter:none; }
.card .thumb{ background:#f3f5f7; }
.card-body{
  background: linear-gradient(to top,
              rgba(255,255,255,.96) 0%,
              rgba(255,255,255,.82) 55%,
              rgba(255,255,255,0) 100%);
  color: var(--al-text);
}
.card .title a{ color: var(--al-text); }
.card .tag{
  background: var(--al-chip-bg);
  color: var(--al-chip-text);
}
.card .meta span{ color: var(--al-muted); }

/* Modal: heller Dialog, dezenter Rand, roter Button -> grün */
.alh-modal{ background: rgba(0,0,0,.40); }
.alh-modal .alh-dialog{
  background:#fff; color:#1f2937; border-radius:16px;
  box-shadow:0 24px 80px rgba(16,24,40,.20);
  border:1px solid rgba(16,24,40,.06);
}
.alh-head{ border-bottom:1px solid rgba(16,24,40,.06); }
#alh-title{ color:#0f172a; }
.alh-head .alh-close{ color:#475467; }
.alh-text{ color:#334155; }
.alh-btn.primary{
  background: var(--al-primary);
  color:#fff; border:1px solid rgba(0,0,0,.04);
}
.alh-btn.primary:hover{ background: var(--al-primary-600); filter:none; }
.alh-btn.primary:focus{ outline:2px solid rgba(31,167,122,.25); outline-offset:2px; }

/* Kleinigkeiten: Chips/Count harmonisieren (falls sichtbar) */
.al-chip{ background:var(--al-chip-bg); color:var(--al-chip-text); border:0; }
.al-count{ color:var(--al-muted); }


/* ==== AQUARIUMLesson — LIGHT "Netflix" THEME OVERRIDES ==================== */
/* Palette – passe den Primärton bei Bedarf an */
:root{
  --al-primary: #1fa77a;          /* Brand-Grün */
  --al-primary-600: #178e67;
  --al-text: #101828;
  --al-muted: #667085;
  --al-chip-bg: #e9f6f2;
  --al-chip-text: #0b5b43;
}

/* Rails & Arrows (hell) */
.al-rail{ mask-image:linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          -webkit-mask-image:linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.al-rail-nav .al-arrow{
  background: rgba(255,255,255,.96);
  color: var(--al-primary);
  border: 1px solid rgba(16,24,40,.08);
  box-shadow: 0 8px 20px rgba(2,8,23,.12);
}
.al-rail-nav .al-arrow:hover{ transform:translateY(-50%) scale(1.05); }

/* Karten: hell, Poster-first, Overlay ist WEISSER Verlauf */
.al-row .card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow: 0 8px 20px rgba(16,24,40,.08);
}
.al-row .card:hover{ transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 34px rgba(16,24,40,.14); filter:none; }
.card .thumb{ background:#f3f5f7; }
.card-body{
  background: linear-gradient(to top,
              rgba(255,255,255,.96) 0%,
              rgba(255,255,255,.82) 55%,
              rgba(255,255,255,0) 100%);
  color: var(--al-text);
}
.card .title a{ color: var(--al-text); }
.card .tag{
  background: var(--al-chip-bg);
  color: var(--al-chip-text);
}
.card .meta span{ color: var(--al-muted); }

/* Modal: heller Dialog, dezenter Rand, roter Button -> grün */
.alh-modal{ background: rgba(0,0,0,.40); }
.alh-modal .alh-dialog{
  background:#fff; color:#1f2937; border-radius:16px;
  box-shadow:0 24px 80px rgba(16,24,40,.20);
  border:1px solid rgba(16,24,40,.06);
}
.alh-head{ border-bottom:1px solid rgba(16,24,40,.06); }
#alh-title{ color:#0f172a; }
.alh-head .alh-close{ color:#475467; }
.alh-text{ color:#334155; }
.alh-btn.primary{
  background: var(--al-primary);
  color:#fff; border:1px solid rgba(0,0,0,.04);
}
.alh-btn.primary:hover{ background: var(--al-primary-600); filter:none; }
.alh-btn.primary:focus{ outline:2px solid rgba(31,167,122,.25); outline-offset:2px; }

/* Kleinigkeiten: Chips/Count harmonisieren (falls sichtbar) */
.al-chip{ background:var(--al-chip-bg); color:var(--al-chip-text); border:0; }
.al-count{ color:var(--al-muted); }

/* Brand */
:root{
  --al-primary:#1fa77a; --al-primary-600:#178e67;
  --al-text:#101828; --al-muted:#667085;
  --al-chip-bg:#e9f6f2; --al-chip-text:#0b5b43;
}

/* Modal hell & zentriert */
.alh-modal{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.45); z-index:2147483647; padding:5vh 6vw; }
.alh-modal[aria-hidden="false"]{ display:flex; align-items:center; justify-content:center; }
.alh-dialog{ background:#fff; color:var(--al-text); border-radius:16px; width:min(920px,92vw); max-height:90vh; overflow:auto;
             box-shadow:0 24px 80px rgba(16,24,40,.20); border:1px solid rgba(16,24,40,.06); }
.alh-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(16,24,40,.06); }
#alh-title{ font-weight:800; }

/* Netflix-Hero oben (Bild + Button) */
.alh-body{ padding:14px 16px 16px; }
.alh-cover{ position:relative; margin-bottom:12px; border-radius:12px; overflow:hidden; background:#f3f5f7; }
.alh-cover img{ width:100%; height:auto; display:block; max-height:52vh; object-fit:cover; }
.alh-cover::after{ content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }

/* Button im Bild */
.alh-btn.primary{
  position:absolute; left:16px; bottom:16px;
  display:inline-block; padding:10px 16px; border-radius:10px;
  background:var(--al-primary); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
}
.alh-btn.primary:hover{ background:var(--al-primary-600); }

/* Beschreibung darunter */
.alh-text{ color:#334155; margin-top:8px; }

/* Meta-Chips unten */
.alh-meta{ display:flex; gap:10px; margin-top:12px; }
.alh-meta .chip{ background:var(--al-chip-bg); color:var(--al-chip-text); padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }

/* Ganze Karte klickbar + hübsche Karten (optional, falls noch nicht gesetzt) */
.al-row .card{ cursor:pointer; }

/* --- Modal: Hero oben, Button im Bild, Text darunter, Meta unten --- */
.alh-modal[aria-hidden="false"]{ display:flex; align-items:center; justify-content:center; }
.alh-dialog{
  background:#fff; color:#101828; border-radius:16px;
  width:min(920px,92vw); max-height:90vh; overflow:auto;
  box-shadow:0 24px 80px rgba(16,24,40,.20); border:1px solid rgba(16,24,40,.06);
}
.alh-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid rgba(16,24,40,.06); }
#alh-title{ font-weight:800; }

/* Body jetzt EINSPALTIG (Bild oben) */
.alh-body{ padding:14px 16px 16px; display:block; }

/* Hero-Bild mit Overlay-Gradient & Button darin */
.alh-cover{ position:relative; margin-bottom:12px; border-radius:12px; overflow:hidden; background:#f3f5f7; }
.alh-cover img{ width:100%; height:auto; max-height:52vh; object-fit:cover; display:block; }
.alh-cover::after{
  content:""; position:absolute; inset:auto 0 0 0; height:40%;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events:none; z-index:1;            /* << blockiert NICHT mehr */
}
/* Button über dem Overlay */
.alh-btn.primary{
  position:absolute; left:16px; bottom:16px; z-index:2; /* << über Overlay */
  display:inline-block; padding:10px 16px; border-radius:10px;
  background:#1fa77a; color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
}
.alh-btn.primary:hover{ background:#178e67; }

/* Text darunter + Meta-Chips ganz unten */
.alh-text{ color:#334155; margin-top:8px; }
.alh-meta{ display:flex; gap:10px; margin-top:12px; }
.alh-meta .chip{ background:#e9f6f2; color:#0b5b43; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }

/* Scroll-Lock wenn offen */
body.alh-open{ overflow:hidden; }

/* Mehr Text, weniger Bild */
.alh-cover img{ max-height:38vh; }        /* vorher ~52vh */
@media (max-width:800px){
  .alh-cover img{ max-height:52vh; }      /* mobil weiter groß */
}

/* Plain X (ohne Rahmen/Karte) */
.alh-head .alh-close{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0; width:auto; height:auto;
  line-height:1; font-size:22px;
  color:#475467; cursor:pointer;
}
.alh-head .alh-close:hover{ color:#0f172a; }

/* Lesen angenehmer */
.alh-text{ font-size:.975rem; line-height:1.6; }

/* --- Karten-Infos immer sichtbar (kein Hover-Overlay) --- */
.al-lessons .card .card-body{
  position: static;              /* nicht mehr absolut am Bild kleben */
  inset: auto;
  background: transparent;       /* kein Verlauf */
  opacity: 1;                    /* immer sichtbar */
  transform: none;
  padding: 10px 12px 12px;       /* normaler Innenabstand */
}

/* Falls ein alter Hover-Effekt noch greift: neutralisieren */
.al-lessons .card:hover .card-body{
  opacity: 1;
  transform: none;
}

/* Typografie/Clamping beibehalten */
.al-lessons .card .title{
  margin: 6px 0 4px;
  font-weight: 600;
  color: #101828;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.al-lessons .card .desc{
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
  max-height: none;
}

/* Chips & Meta im hellen Stil */
.al-lessons .card .tag{
  background:#e9f6f2; color:#0b5b43;
  padding:4px 8px; border-radius:999px; font:600 12px/1 system-ui;
}
.al-lessons .card .meta span{ color:#667085; font:500 12px/1 system-ui; margin-left:10px; }

/* Optional: Kartenhebeeffekt behalten, aber ohne Overlay-Einblendung */
.al-row .card{ transition:transform .18s ease, box-shadow .18s ease; }
.al-row .card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,24,40,.12); }

/* Full-bleed für Rails */
.al-lessons.is-rails .al-rails{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Wrapper darf Schatten durchlassen */
.al-lessons.is-rails .al-rail-wrap{ overflow: visible; }

/* Mehr Rand im Rail, damit Inhalt nicht am Fensterrand klebt */
.al-lessons.is-rails .al-lesson-rail{ padding-inline: 24px; }

/* Fade an den Kanten etwas breiter, damit Pfeile drin liegen */
.al-lessons.is-rails .al-lesson-rail{
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 48px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 48px),
    transparent 100%);
}

/* Pfeile über allem, mit weichem Schatten */
.al-lessons .al-rail-nav{ pointer-events:none; }
.al-lessons .al-rail-nav .al-arrow{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:9999px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(16,24,40,.08);
  box-shadow:0 10px 28px rgba(16,24,40,.20);
  z-index:3;
}
.al-lessons .al-rail-nav .prev{ left:8px; }
.al-lessons .al-rail-nav .next{ right:8px; }

/* Full-bleed zurücksetzen */
.al-lessons.is-rails .al-rails{
  width:auto; margin-left:0; margin-right:0;
}

/* ========= Design-Token ========= */
:root{
  --al-container: min(1200px, 92vw);
  --al-radius: 18px;
  --al-gap: 18px;
  --al-border: 1px solid rgba(16,24,40,.06);
  --al-shadow: 0 8px 24px rgba(16,24,40,.06);
}

/* Containerbreite für Grid + Rails zentrieren */
.al-lessons .al-grid,
.al-lessons .al-rails{
  width: var(--al-container);
  margin-inline: auto;
}

/* Jede Kategorie-Reihe als „Card-Frame“ */
.al-lessons.is-rails .al-row{
  position: relative;
  background:#fff;
  border-radius: var(--al-radius);
  border: var(--al-border);
  box-shadow: var(--al-shadow);
  padding: 14px 12px 12px; /* Kopfzeile + Rail-Abstand */
  margin: 26px 0;          /* Abstand zwischen Reihen */
}

/* -------------------------------------------
   RAILS – clean framed look + edge fade
------------------------------------------- */

/* Der Frame selbst */
.al-lessons.is-rails .al-rail-wrap{
  overflow: hidden;                 /* hält Fade + verhindert dass es "ausfranst" */
  border-radius: 18px;
  background: rgba(0,0,0,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Die echte Rail (horizontal scroll area) */
.al-lessons.is-rails .al-lesson-rail{
  display: flex;
  gap: var(--al-gap);

  /* mehr "Premium spacing" */
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 18px);

  overflow-x: auto;
  overflow-y: visible;

  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(12px, 1.6vw, 18px);
  scroll-padding-right: clamp(12px, 1.6vw, 18px);

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* Edge-Fade */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );

  /* Scrollbar weg (Firefox/Edge) */
  scrollbar-width: none;
}
.al-lessons.is-rails .al-lesson-rail::-webkit-scrollbar{ display: none; }

/* Snap für Cards (falls noch nicht vorhanden) */
.al-lessons.is-rails .al-lesson-rail > *{
  scroll-snap-align: start;
}

/* Pfeile klein, unaufdringlich – im Frame, ohne dicken Schatten */
.al-lessons .al-rail-nav{ pointer-events:none; }
.al-lessons .al-rail-nav .al-arrow{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:9999px;
  background:#fff; border: var(--al-border);
  box-shadow: 0 4px 12px rgba(16,24,40,.10);
  z-index:2; /* über Rail-Karten */
}
.al-lessons .al-rail-nav .prev{ left:6px; }
.al-lessons .al-rail-nav .next{ right:6px; }
.al-lessons .al-rail-nav .al-arrow:hover{ transform:translateY(-50%) scale(1.05); }

/* Karten – leicht zurückgenommen, damit der Fokus auf der Reihe als Ganzes liegt */
.al-lessons.is-rails .card{
  flex: 0 0 clamp(260px, 23vw, 320px);
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
  background:#fff; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.al-lessons.is-rails .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16,24,40,.12);
}

/* Bildverhältnis stabil halten */
.al-lessons .card .thumb{ display:block; width:100%; aspect-ratio:16/9; background:#f3f5f7; }
.al-lessons .card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Texte immer sichtbar (kein Hover-Overlay) – schon gesetzt, hier nochmal scoped für Rails */
.al-lessons.is-rails .card .card-body{
  position:static; background:transparent; opacity:1; transform:none;
  padding:10px 12px 12px;
}

/* Typografie/Clamps */
.al-lessons .card .title{
  margin:6px 0 4px; font-weight:600; color:#101828;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

.al-lessons .card .desc{
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
  max-height: none;
}

/* Kategorie-Heading etwas näher an den Frame rücken (optional) */
.al-lessons h2, .al-lessons h3{
  letter-spacing:.2px;
}

/* === Schatten-Presets =================================================== */
/* Wähle EINE Zeile aktiv: */
/* :root{ --al-shadow-rail: 0 4px 10px rgba(2,8,23,.06);  --al-shadow-card: 0 3px 8px rgba(2,8,23,.06);}   */ /* Subtle */
:root{ --al-shadow-rail: 0 6px 16px rgba(2,8,23,.08);  --al-shadow-card: 0 5px 14px rgba(2,8,23,.08);}     /* Medium */
 /* :root{ --al-shadow-rail: 0 10px 28px rgba(2,8,23,.12); --al-shadow-card: 0 8px 22px rgba(2,8,23,.12);} */ /* Deeper */

.al-lessons.is-rails .al-row{ box-shadow: var(--al-shadow-rail); }
.al-lessons.is-rails .card{   box-shadow: var(--al-shadow-card); }

/* Nur auf Mobile */
@media (max-width: 768px){
  .al-lessons.is-rails .al-lesson-rail{
    scroll-snap-type: x mandatory;         /* paginiert */
    padding-inline: 14px 18px;             /* etwas Luft rechts */
  }
  .al-lessons.is-rails .card{
    scroll-snap-align: start;
    flex-basis: 82%;                       /* next-card „peek“ sichtbar */
  }
}

/* Swipe-Hinweis */
.alh-swipe-hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:rgba(17,24,39,.85); color:#fff; font-weight:600;
  padding:8px 12px; border-radius:999px; font-size:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  animation: alh-nudge 1.2s ease-in-out 2;
  pointer-events:none; z-index:3;
}
.alh-swipe-hint.out{ opacity:0; transition:opacity .35s ease; }
@keyframes alh-nudge{
  0%{ transform:translateX(-50%) translateX(0); opacity:0; }
  10%{ opacity:1; }
  50%{ transform:translateX(-50%) translateX(14px); }
  100%{ transform:translateX(-50%) translateX(0); opacity:1; }
}

.al-lessons.is-rails .al-lesson-rail{
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

/* Modal nimmt den Viewport komplett (Overlay bleibt fixed) */
.alh-modal{ position:fixed; inset:0; }

/* Dialog scrollt selbst – Body bleibt gelockt */
.alh-dialog{
  max-height: min(92dvh, 92vh);            /* mobile Browser-UI einkalkulieren */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;             /* kein Bounce/Chaining zum Body */
  touch-action: pan-y;                      /* vertikales Panning erlaubt */
}

/* Im Bild nicht „kleben“ – Gesten dürfen überall starten */
.alh-cover img{ pointer-events:none; }

/* Mehr Scroll-Fläche unter dem Text */
.alh-body{ padding-bottom: 24px; }

/* Mobile-Optimierungen */
@media (max-width: 768px){
  .alh-dialog{
    width:100vw; max-width:none;
    border-radius:14px;                     /* etwas kompakter */
    margin:0;                               /* zentriert ohne Außenabstand */
  }
  .alh-head{
    position:sticky; top:0; z-index:3;      /* Close-X bleibt erreichbar */
    background:#fff;
  }
  .alh-body{ padding:12px 14px 24px; }
  .alh-cover{ margin-bottom:10px; }
  .alh-cover img{ max-height:35dvh; }       /* mehr Platz für Text */
}

/* ==== RAIL EDGE-FADE FIX ================================================ */
/* 1) Alte Overlay-Fades auf dem Wrapper komplett deaktivieren */
.al-rail-wrap::before,
.al-rail-wrap::after{
  content: none !important;   /* verhindert den weißen Schleier über der 1. Karte */
}

/* 2) Fades direkt auf der Rail via Mask – links AUS am Start, rechts AN */
.al-rail{
  /* Standard: links kein Fade (Start ohne Schein), rechts dezent */
  --fade-left: 0px;
  --fade-right: 28px;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-left),
    #000 calc(100% - var(--fade-right)),
    transparent 100%
  ) !important;
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-left),
    #000 calc(100% - var(--fade-right)),
    transparent 100%
  ) !important;
}

/* Wenn nicht mehr am Anfang bzw. am Ende -> dynamisch per JS gesetzte Klassen */
.al-rail.is-at-start{ --fade-left: 0px; }
.al-rail.is-at-end  { --fade-right: 0px; }

/* 3) Sicherheitshalber: kein unerwünschtes Overlay auf Bildern im normalen Zustand */
.al-lessons .thumb::after{ opacity: 0 !important; }
.al-lessons .card:hover .thumb::after{ opacity: .55; } /* falls du den Hover-Effekt behalten willst */
/* Wenn du gar KEINEN Bild-Overlay möchtest, die Zeile darüber einfach auf 0 setzen:
   .al-lessons .card:hover .thumb::after{ opacity: 0; } */

/* === AL Auth — Signup • Anti-Conflict Patch (works with your existing rules) === */

/* 1) Headerhöhe einmal definieren/übernehmen (bei Bedarf anpassen) */
:root{ --al-fixed-top: 72px; } /* echte Headerhöhe hier eintragen */

/* 2) Overlay: Safe-Areas + Header-Puffer + Grid-Ausrichtung */
html body .al-auth-neo{
  /* Puffer oben/unten */
  --al-pad-top: calc(env(safe-area-inset-top, 0px) + var(--al-fixed-top) + 12px);
  --al-pad-bot: calc(env(safe-area-inset-bottom, 0px) + 18px);
  padding-top: var(--al-pad-top) !important;
  padding-bottom: var(--al-pad-bot) !important;

  /* WICHTIG: Deine bestehende Regel nutzt "max-height: calc(var(--al-vh, 100svh) - 24px)".
     Wir "füttern" diese Variable so, dass am Ende exakt (Viewport - Top/Bottom-Puffer) rauskommt. */
  --al-vh: calc(100dvh - var(--al-pad-top) - var(--al-pad-bot) + 24px) !important;
  place-items: start center !important;   /* mit Grid kompatibel: oben ausrichten, horizontal mittig */
}
@supports not (height: 100dvh){
  html body .al-auth-neo{ --al-vh: calc(100svh - var(--al-pad-top) - var(--al-pad-bot) + 24px) !important; }
}

/* 3) Karte: kein eigener Scroll, Höhe wird von deiner existierenden max-height geregelt */
html body .al-auth-neo .al-card{
  margin: 0 auto !important;
  overflow: hidden !important;   /* keine horizontale Leiste */
}

/* 4) Inhalt: nur vertikaler Scroll – unsichtbar (Scroll bleibt möglich) */
html body .al-auth-neo .al-card-body{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -ms-overflow-style: none !important;     /* IE/Edge alt */
  scrollbar-width: none !important;        /* Firefox */
}
html body .al-auth-neo .al-card-body::-webkit-scrollbar{ width:0 !important; height:0 !important; }

/* 5) Höhentuning – wird progressiv kompakter, damit es sich überall "ausgeht" */
@media (max-height: 820px){
  html body .al-auth-neo .al-card{ padding:22px 18px 14px !important; gap:12px !important; border-radius:18px !important; }
  html body .al-auth-neo h2{ font-size:24px !important; }
  html body .al-auth-neo .al-field{ gap:4px !important; }
  html body .al-auth-neo .al-input, html body .al-auth-neo select{ min-height:48px !important; }
  html body .al-auth-neo .al-btn{ height:48px !important; }
}
@media (max-height: 720px){
  html body .al-auth-neo .al-card{ padding:18px 16px 12px !important; gap:10px !important; }
  html body .al-auth-neo h2{ font-size:22px !important; margin:0 !important; }
  html body .al-auth-neo .al-kicker{ display:none !important; }
  html body .al-auth-neo .al-input, html body .al-auth-neo select{
    min-height:44px !important; padding:10px 12px !important; font-size:15px !important;
  }
  html body .al-auth-neo .al-btn{ height:44px !important; font-size:15px !important; border-radius:12px !important; }
}
@media (max-height: 640px){
  /* sehr kleine Höhen: sekundäres Zeug weg, damit es sauber passt */
  html body .al-auth-neo .al-sep,
  html body .al-auth-neo .al-providers,
  html body .al-auth-neo .al-card-foot{ display:none !important; }
}

/* 6) Passwort-Gruppe: absolut robust (kein Überstehen vom Eye-Button) */
html body .al-auth-neo .al-pass{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) max-content !important;
  column-gap:8px !important; align-items:stretch !important; width:100% !important;
}
html body .al-auth-neo .al-pass > .al-input,
html body .al-auth-neo .al-pass > input[type="password"]{
  width:100% !important; max-width:100% !important; min-width:0 !important;
}
html body .al-auth-neo .al-eye{
  width:44px !important; min-width:44px !important; height:52px !important; padding:0 !important; margin:0 !important;
  box-sizing:border-box !important;
}
@media (min-width:481px){ html body .al-auth-neo .al-eye{ height:48px !important; } }

.card .thumb-ph{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(11,31,22,.06), rgba(11,31,22,.10), rgba(11,31,22,.06));
  background-size:200% 100%;
  animation: alShimmer 1.2s linear infinite;
}
@keyframes alShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Primäre Button-Hover-Optimierung */
.alh-btn.primary {
  color: #ffffff; /* Standard: weiß auf grün */
}

.alh-btn.primary:hover,
.alh-btn.primary:focus {
  color: #ffffff; /* auch bei Hover/Fokus klar lesbar */
  background-color: #2c6b4a; /* dunkleres Grün (AL Primary) */
}

.alh-btn.primary:active {
  color: #ffffff;
  background-color: #24573b; /* noch dunkler beim Klick */
}

#alh-modal .alh-head { position: relative; z-index: 2; }
#alh-modal .al-heart-btn { position: relative; z-index: 3; }

/* Meta-Zeile im Modal: Herz sauber rechts andocken */
.alh-meta{ display:flex !important; align-items:center !important; gap:8px !important; }
.alh-meta .al-heart-wrap{ margin-left:auto !important; display:flex !important; }
.alh-meta .al-heart-btn{ padding:6px !important; border-radius:10px !important; }

/* falls Meta-Chips umbrechen, bleibt das Herz rechts stehen */
.alh-meta { flex-wrap: wrap !important; }


.al-meta, .alh-meta, .topline {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.al-meta .al-heart-wrap,
.alh-meta .al-heart-wrap,
.topline .al-heart-wrap {
  margin-left:auto !important; /* Herz nach rechts schieben */
  display:flex !important;
}

/* Meta-Zeile: Herz immer rechts außen */
.alh-meta{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.alh-meta .al-heart-wrap{
  margin-left:auto !important;
  display:flex !important;
}
.alh-meta .al-heart-btn{
  position:static !important;
  z-index:auto !important;
  padding:6px !important;
  border-radius:10px !important;
}

/* Wichtig: NICHTS im Header verstecken – entferne/überschreibe etwaige alte Hides */
#alh-modal .alh-head .al-heart-btn,
#alh-modal .alh-head .al-heart-wrap{
  display: inline-flex !important; /* neutralisiert evtl. frühere display:none */
}

/* Meta-Zeile im Modal: Chips links, Herz mit Label rechts */
.alh-meta, .al-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important; /* Chips dürfen umbrechen */
}
.alh-meta .al-heart-wrap,
.al-meta .al-heart-wrap {
  margin-left: auto !important;   /* Herz nach ganz rechts schieben */
  display: flex !important;
  align-items: center !important;
}
/* gelabelte Variante etwas „buttoniger“ */
.alh-meta .al-heart-btn,
.al-meta .al-heart-btn {
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

/* Modal: Label sichtbar erzwingen – egal was das Theme macht */
#alh-modal .al-heart-btn .al-label{
  display: inline-block !important;
  margin-left: 8px !important;
  white-space: nowrap !important;
  font-size: .95rem !important;
  line-height: 1 !important;
}

/* Falls der Button aus Versehen die -compact Klasse bekommt: Label trotzdem zeigen */
#alh-modal .al-heart-btn.-compact .al-label{
  display: inline-block !important;
}

/* Bild-Link als Anker: relative, damit Overlay absolut positioniert werden kann */
.al-lessons .card .thumb{
  position: relative !important;
}

/* Bild-Overlay blockiert keine Klicks (Herz bleibt klickbar) */
.al-lessons .card .thumb::after{
  pointer-events: none !important;
}

/* Herz-Overlay oben rechts im Bild */
.al-heart-abs{
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 3 !important;
  display: flex !important;
}

/* kompakter Herz-Button fürs Bild */
.al-heart-btn.-compact{
  padding: 6px !important;
  border-radius: 10px !important;
}

/* Gefüllt = grün (dein Brand) */
.al-heart-btn[aria-pressed="true"] .al-fillable{
  fill: #2C6B4A !important;
  stroke: #2C6B4A !important;
}

/* ========== Netflix-Rails – stabile, sichere Variante ========== */

/* Nur auf Touch-Geräten aktivieren */
@media (pointer: coarse) {
  .al-rail {
    /* iOS Momentum + Browser-Gesten sauber */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;    /* sanft bei Pfeil-Klicks */
  }
}


/* Seite selbst darf normal scrollen (keine Size-Containment! KEIN pan-y global) */

/* Optionale Fades – an Hintergrundfarbe binden (keine weißen Schleier auf dunklem Theme) */
.al-rail-wrap { position: relative; }
.al-rail-wrap::before,
.al-rail-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  transition: opacity .2s ease;
  opacity: 0;
}
.al-rail-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--al-bg, #fff), color-mix(in srgb, var(--al-bg, #fff) 0%, transparent));
}
.al-rail-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--al-bg, #fff), color-mix(in srgb, var(--al-bg, #fff) 0%, transparent));
}
.al-rail-wrap[data-left="1"]::before  { opacity: 1; }
.al-rail-wrap[data-right="1"]::after  { opacity: 1; }

/* ===== Netflix Rails – smooth aber NICHT blockierend ===== */
@media (pointer: coarse) {
  .al-rail {
    -webkit-overflow-scrolling: touch;  /* iOS Momentum */
    overscroll-behavior-x: contain;     /* kein Browser-Swipe stehlen */
    /* WICHTIG: KEIN touch-action hier! -> vertikales Scrollen bleibt möglich */
    scroll-behavior: smooth;            /* sanft bei Pfeil-Klicks */
  }
}

/* (Optional) sanftes Einrasten – fühlt sich sehr smooth an */
@media (pointer: coarse) {
  .al-rail { scroll-snap-type: x proximity; }
  .al-rail .card { scroll-snap-align: start; }
}
}

/* (Optionale) Fades – falls du sie nutzt */
.al-rail-wrap { position: relative; }
.al-rail-wrap::before,
.al-rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px;
  pointer-events: none; transition: opacity .2s ease; opacity: 0;
  /* Passe var(--al-bg) an dein Theme an */
}
.al-rail-wrap::before  { left: 0;  background: linear-gradient(to right, var(--al-bg,#fff), transparent); }
.al-rail-wrap::after   { right: 0; background: linear-gradient(to left,  var(--al-bg,#fff), transparent); }
.al-rail-wrap[data-left="1"]::before  { opacity: 1; }
.al-rail-wrap[data-right="1"]::after  { opacity: 1; }

/* Teaser über der Verdunkelung */
.al-teaser{
  position: fixed;            /* falls noch nicht fixed */
  right: 16px; bottom: 16px;
  z-index: 2147483647 !important;  /* gleich hoch wie Overlay */
}

/* Modal Overlay ohne direkten Hintergrund, Dimmer über ::before */
#alh-modal {
  background: none !important;
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* Basisebene fürs Modal */
}

#alh-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* Abdunklung */
  z-index: 1; /* liegt unterhalb vom Dialog */
}

/* Inhalt vom Modal sichtbar über dem Dimmer */
#alh-modal .alh-dialog {
  position: relative;
  z-index: 2;
}

/* Teaser bleibt global rechts unten, immer sichtbar */
.al-teaser {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 2147483648 !important; /* eine Stufe über dem Modal */
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  mix-blend-mode: normal !important;
}

/* --- FINAL STACK ORDER FOR MODAL + TEASER --- */
#alh-modal{
  background: transparent !important;      /* kein eigener BG */
  position: fixed; inset: 0; z-index: 2147483647;
}

/* Dimmer liegt UNTER Dialog und frisst keine Klicks */
#alh-modal::before{
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
  pointer-events: auto;                      /* wichtig! */
}

/* Dialog über Dimmer */
#alh-modal .alh-dialog{
  position: relative;
  z-index: 2;
}

/* Teaser ganz oben im Modal – klickbar */
#alh-modal .al-teaser{
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 3;                               /* über Dialog */
  pointer-events: auto;
}

/* WICHTIG: Globale Teaser-Z-Indizes neutralisieren */
.al-teaser{
  z-index: auto !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* --- FINAL OVERRIDES: Overlay blockiert NICHTS, Dialog & Teaser bleiben klickbar --- */

/* Das gesamte Modal nimmt KEINE Klicks an … */
#alh-modal {
  pointer-events: auto !important;
  background: transparent !important;
  position: fixed; inset: 0;
  z-index: 2147483646; /* unter Teaser (der gleich 2147483647 bekommt) */
}

/* … aber der Dialog selbst schon. */
#alh-modal .alh-dialog {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* Dimmer nur Optik, keine Klicks */
#alh-modal::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 0;
  pointer-events: none !important;
}

/* Teaser bleibt rechts unten ÜBER ALLEM und klickbar */
.al-teaser {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* ---------- Saved / Bookmark Button (Lessons + Modal + Single) ---------- */

.al-bookmark-btn{
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,.96);
  color: #0f172a;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}

.al-bookmark-btn .al-ico{
  display: inline-flex;
}

.al-bookmark-btn svg{
  display: block;
  width: 20px;
  height: 20px;
}

.al-bookmark-btn .al-fillable{
  fill: transparent;
  stroke: currentColor;
  transition: fill .18s ease, stroke .18s ease;
}

/* gespeicherter Zustand → voll gefüllt */
.al-bookmark-btn.is-saved .al-fillable{
  fill: currentColor;
}

.al-bookmark-btn .label{
  white-space: nowrap;
}

/* Positionierung im Grid / Rails */
.al-lessons .thumb.al-has-bookmark{
  position: relative;
}

.al-lessons .thumb .al-bookmark-abs{
  position: absolute;
  inset: 10px 10px auto auto;
  z-index: 3;
}

/* Positionierung im Modal */
.alh-cover{
  position: relative;
}

.alh-cover .al-bookmark-abs{
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 3;
}

/* Abstände im Single-Template */
.single-lesson .al-single-lesson-save{
  margin-top: 16px;
  margin-bottom: 24px;
}

/* =========================================================
   Saved / Bookmark – Lessons (Grid, Modal, Single)
   ========================================================= */

/* Basisbutton – angelehnt an Plant Library */
.al-bookmark-btn{
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,0.96);
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,0.08);
}

.al-bookmark-btn .al-ico{
  display: inline-flex;
}

.al-bookmark-btn svg{
  display: block;
  width: 20px;
  height: 20px;
}

.al-bookmark-btn .al-fillable{
  fill: transparent;
  stroke: currentColor;
  transition: fill 0.18s ease, stroke 0.18s ease;
}

/* aktiver Zustand – gefülltes Icon */
.al-bookmark-btn.is-saved .al-fillable{
  fill: currentColor;
}

.al-bookmark-btn .label{
  white-space: nowrap;
}

/* Overlay im Lessons-Grid */
.al-lessons .thumb.al-has-bookmark{
  position: relative;
}

.al-lessons .thumb .al-bookmark-abs{
  position: absolute;
  inset: 10px 10px auto auto;
  z-index: 3;
}

/* Overlay im Modal */
.alh-cover{
  position: relative;
}

.alh-cover .al-bookmark-abs{
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 3;
}

/* Abstand im Single-Header */
.single-lesson .al-single-lesson-save{
  margin-top: 16px;
  margin-bottom: 24px;
}

/* =========================
   Toolbar – SaaS 2026
========================= */
.al-lessons .al-toolbar{
  display:grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap:12px;
  align-items:center;
  margin: 12px 0 14px;
}

@media (max-width: 720px){
  .al-lessons .al-toolbar{
    grid-template-columns: 1fr;
  }
}

.al-lessons .al-search-wrap input,
.al-lessons .al-toolbar select{
  width:100%;
  min-height:44px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--al-border, #e5e7eb) 85%, #fff);
  background: color-mix(in srgb, var(--al-bg, #fff) 92%, #fff);
  padding: 10px 12px;
  outline: none;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

.al-lessons .al-search-wrap input:focus,
.al-lessons .al-toolbar select:focus{
  border-color: color-mix(in srgb, var(--al-accent, #2C6B4A) 40%, var(--al-border, #e5e7eb));
  box-shadow: 0 10px 30px rgba(44,107,74,.12);
}

/* Active chips schöner */
.al-lessons .al-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 10px 0 2px;
}
.al-lessons .al-chip{
  border-radius:999px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--al-border, #e5e7eb) 75%, #fff);
  background:#fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.al-lessons .al-row-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin: 18px 0 8px;
}
.al-lessons .al-row-meta{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.8;
}
.al-lessons .al-row-count{
  font-size:.9rem;
  color: color-mix(in srgb, #0f172a 45%, #64748b);
}
.al-lessons .al-row-seeall{
  font-size:.9rem;
  text-decoration:none;
  color: var(--al-accent, #2C6B4A);
}

.al-lessons .al-row-seeall:hover{
  text-decoration: underline;
}

.al-rail{
  touch-action: pan-y;
  overscroll-behavior: auto;
}

/* ✅ Lessons Rails dürfen niemals Off-Canvas-Styles erben */
.al-lessons.is-rails .al-row .al-rail{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  transform: none !important;
  transition: none !important;

  pointer-events: auto !important;
  height: auto !important;
  width: auto !important;
  z-index: auto !important;
}

/* =========================
   Lesson Top Back Link
========================= */
.single-lesson .al-lesson-topnav{
  margin: 18px 0 10px;
}

.single-lesson .al-lesson-back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,.72);
  transition: color .18s ease, transform .18s ease;
}

.single-lesson .al-lesson-back:hover{
  color: rgba(17,24,39,.92);
  transform: translateX(-1px);
}

.single-lesson .al-lesson-back__icon{
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
}

/* =========================
   Continue Learning Section
========================= */
.single-lesson .al-related{
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(17,24,39,.08);
}

.single-lesson .al-related__title{
  margin: 0 0 16px;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
}

.single-lesson .al-related__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px){
  .single-lesson .al-related__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .single-lesson .al-related__grid{ grid-template-columns: 1fr; }
}

.single-lesson .al-related__card{
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(16,24,40,.08);
  overflow: hidden;
  transform: translateZ(0);
}

.single-lesson .al-related__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.single-lesson .al-related__thumb{
  aspect-ratio: 16/9;
  background: rgba(17,24,39,.04);
  overflow: hidden;
}

.single-lesson .al-related__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .22s ease;
}

.single-lesson .al-related__body{
  padding: 14px 14px 16px;
}

.single-lesson .al-related__h{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.single-lesson .al-related__meta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.single-lesson .al-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: rgba(17,24,39,.06);
  color: rgba(17,24,39,.78);
}

@media (hover:hover){
  .single-lesson .al-related__card:hover .al-related__thumb img{
    transform: scale(1.04);
  }
  .single-lesson .al-related__card:hover{
    box-shadow: 0 18px 46px rgba(16,24,40,.12);
  }
}

/* ===== Lesson Back Link — Premium Chevron ===== */
.single-lesson .al-lesson-back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,.72);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .18s ease, transform .18s ease;
}

.single-lesson .al-lesson-back:hover{
  color: rgba(17,24,39,.92);
  transform: translateX(-1px);
}

.single-lesson .al-lesson-back__icon{
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,.06) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
}

.single-lesson .al-lesson-back__svg{
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  transform: translateX(-0.5px); /* optisch perfekt zentriert */
}

/* ===== Lesson Meta (ACF chips) — Premium ===== */
.single-lesson .al-lesson-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 6px;
}

.single-lesson .al-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.10);
  color: rgba(17,24,39,.78);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.single-lesson .al-chip__icon{
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: rgba(17,24,39,.62);
}

.single-lesson .al-chip__icon svg{
  width: 16px;
  height: 16px;
  display: block;
}

.single-lesson .al-chip__label{
  transform: translateY(.2px);
}

/* Subtle differentiation (still calm) */
.single-lesson .al-chip--level{ background: rgba(46, 125, 90, .10); border-color: rgba(46, 125, 90, .18); }
.single-lesson .al-chip--time{  background: rgba(17,24,39,.05);     border-color: rgba(17,24,39,.10); }

/* =========================================================
   SINGLE LESSON — HERO IMAGE ALIGN TO CONTENT COLUMN
   Targets: <figure class="hero-image"> ... <img> ...
========================================================= */

/* 1) Force the figure to behave like the same column as your content */
body.single-lessons figure.hero-image{
  width: 100% !important;
  max-width: 860px !important;          /* <- wenn nötig anpassen */
  margin: 0 auto 18px !important;       /* center + spacing below */
  padding: 0 !important;
  display: block !important;
}

/* 2) Make the image fill the figure and look premium */
body.single-lessons figure.hero-image > img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 22px !important;       /* match your premium radius */
  object-fit: cover !important;
}

/* 3) If the theme adds extra spacing via figure or img defaults */
body.single-lessons figure.hero-image::before,
body.single-lessons figure.hero-image::after{
  content: none !important;
}


/* =========================
   Lesson Meta → First H2 spacing
========================= */

/* Abstand NACH den ACF-Meta-Chips */
body.single-lessons .al-lesson-meta{
  margin-bottom: 20px; /* sweet spot */
}

/* Falls ein Theme margin killt: zusätzlich absichern */
body.single-lessons .al-lesson-meta + h2{
  margin-top: 0 !important;
}

/* =========================================================
   LESSONS — Table of Contents (LuckyWP) — Editorial 2026
   Scope: Lessons only
========================================================= */

/* Card */
body.single-lessons .lwptoc{
  width: 100% !important;
  max-width: 860px !important;
  margin: 22px auto 26px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: 0 10px 28px rgba(16,24,40,.06) !important;
  overflow: hidden !important;
}

/* Header */
body.single-lessons .lwptoc_header{
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  background: linear-gradient(180deg, #ffffff 0%, rgba(17,24,39,.02) 100%) !important;
  border-bottom: 1px solid rgba(17,24,39,.08) !important;
}

/* Title */
body.single-lessons .lwptoc_title{
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  color: rgba(17,24,39,.92) !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Tiny editorial marker (no HTML change) */
body.single-lessons .lwptoc_title::before{
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(46,125,90,.22), rgba(46,125,90,.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(46,125,90,.16) !important;
}

/* Toggle (texty, not pill) */
body.single-lessons .lwptoc_toggle{
  margin-left: auto !important;
}
body.single-lessons .lwptoc_toggle a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;

  color: rgba(17,24,39,.66) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;

  transition: background .14s ease, color .14s ease, transform .14s ease !important;
}
body.single-lessons .lwptoc_toggle a:hover{
  background: rgba(17,24,39,.05) !important;
  color: rgba(17,24,39,.92) !important;
  transform: translateY(-1px) !important;
}
body.single-lessons .lwptoc_toggle a:focus-visible{
  outline: 3px solid rgba(46,125,90,.22) !important;
  outline-offset: 2px !important;
}

/* Chevron (no HTML change) */
body.single-lessons .lwptoc_toggle a::after{
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  opacity: .9 !important;

  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat !important;

  transition: transform .16s ease !important;
}

/* LuckyWP open/closed states (covers common class names) */
body.single-lessons .lwptoc.lwptoc_items-hidden .lwptoc_toggle a::after,
body.single-lessons .lwptoc.lwptoc_itemsHidden .lwptoc_toggle a::after{
  transform: rotate(0deg) !important; /* closed */
}
body.single-lessons .lwptoc:not(.lwptoc_items-hidden) .lwptoc_toggle a::after,
body.single-lessons .lwptoc:not(.lwptoc_itemsHidden) .lwptoc_toggle a::after{
  transform: rotate(90deg) !important; /* open */
}

/* Items wrapper (DO NOT hard-hide globally) */
body.single-lessons .lwptoc_items{
  padding: 10px 12px 14px !important;
  background: rgba(17,24,39,.015) !important;
}
body.single-lessons .lwptoc.lwptoc_items-hidden .lwptoc_items,
body.single-lessons .lwptoc.lwptoc_itemsHidden .lwptoc_items{
  display: none !important;
}

/* List reset */
body.single-lessons .lwptoc_items ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.single-lessons .lwptoc_items li{
  margin: 0 !important;
  padding: 0 !important;
}

/* Link rows */
body.single-lessons .lwptoc_items a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;

  color: rgba(17,24,39,.78) !important;
  text-decoration: none !important;
  font-weight: 650 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;

  transition: background .14s ease, color .14s ease, transform .14s ease !important;
}

/* Subtle dot */
body.single-lessons .lwptoc_items a::before{
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(46,125,90,.42) !important;
  box-shadow: 0 0 0 3px rgba(46,125,90,.10) !important;
  flex: 0 0 auto !important;
}

/* Hover */
body.single-lessons .lwptoc_items a:hover{
  background: rgba(46,125,90,.08) !important;
  color: rgba(17,24,39,.92) !important;
  transform: translateX(2px) !important;
}

/* Active row */
body.single-lessons .lwptoc .lwptoc_item_active > a,
body.single-lessons .lwptoc .lwptoc_itemActive > a{
  background: rgba(46,125,90,.12) !important;
  color: rgba(17,24,39,.95) !important;
}

/* Nested */
body.single-lessons .lwptoc_items ul ul a{
  padding-left: 26px !important;
  font-weight: 620 !important;
  color: rgba(17,24,39,.70) !important;
}

/* Mobile */
@media (max-width: 640px){
  body.single-lessons .lwptoc{
    border-radius: 16px !important;
    margin: 18px auto 20px !important;
  }
  body.single-lessons .lwptoc_header{ padding: 12px 12px !important; }
  body.single-lessons .lwptoc_items{ padding: 10px 10px 12px !important; }
  body.single-lessons .lwptoc_items a{ padding: 10px 10px !important; }
}

/* =========================================================
   LuckyWP ToC — Flatten nested containers (no box-in-box)
========================================================= */

/* Kill inner wrapper panel look */
body.single-lessons .lwptoc .lwptoc_i,
body.single-lessons .lwptoc .lwptoc_i .lwptoc_header,
body.single-lessons .lwptoc .lwptoc_i .lwptoc_items{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove inner frame/padding that creates "container in container" */
body.single-lessons .lwptoc .lwptoc_i{
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Header stays, but without extra “panel” feel */
body.single-lessons .lwptoc .lwptoc_header{
  border-radius: 0 !important;
}

/* Items area: keep spacing, but no extra panel */
body.single-lessons .lwptoc .lwptoc_items{
  padding: 10px 12px 14px !important;
}

/* Optional: reduce outer card padding so it doesn't feel like a “big empty box” */
body.single-lessons .lwptoc{
  padding: 0 !important; /* outer card already uses header/items padding */
}

body.single-lessons .lwptoc{
  margin: 18px auto 22px !important;
}

body.single-lessons .lwptoc_header{
  padding: 12px 14px !important;
}

body.single-lessons .lwptoc_items{
  padding: 8px 10px 12px !important;
}

/* =========================================================
   LuckyWP ToC — remove [ show ] brackets
========================================================= */

body.single-lessons .lwptoc_toggle::before,
body.single-lessons .lwptoc_toggle::after{
  content: none !important;
  display: none !important;
}

body.single-lessons .lwptoc_toggle{
  gap: 6px !important;
}

body.single-lessons .lwptoc_toggle_label{
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  opacity: .8 !important;
}

@media (max-width: 640px){
  body.single-lessons .lwptoc_toggle a{
    padding: 10px 10px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 640px){
  body.single-lessons .lwptoc_header{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  body.single-lessons .lwptoc_title{
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.single-lessons .lwptoc_toggle{
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }
}

@media (hover: none){
  body.single-lessons .lwptoc_items a:hover{
    transform: none !important;
  }
  body.single-lessons .lwptoc_toggle a:hover{
    transform: none !important;
  }
}

@media (max-width: 640px){
  body.single-lessons .lwptoc_items a{
    align-items: flex-start !important;
  }
}


/* =========================================================
   LESSONS — Premium Share (SaaS 2026)
========================================================= */

body.single-lessons .al-share{
  max-width: 860px;
  margin: 26px auto 18px;
}

body.single-lessons .al-share__inner{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;

  padding: 14px 16px;
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 20px 45px rgba(16,24,40,.08), 0 1px 0 rgba(255,255,255,.75) inset;
  backdrop-filter: blur(10px);
}

body.single-lessons .al-share__label{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: rgba(17,24,39,.70);
  margin-right: 6px;
  white-space: nowrap;
}

body.single-lessons .al-share__label::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(92,168,146,.95), rgba(44,107,74,.95));
  box-shadow: 0 10px 18px rgba(44,107,74,.18);
}

body.single-lessons .al-share__btn{
  appearance:none;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.86);
  color: rgba(17,24,39,.86);

  border-radius: 12px;
  padding: 10px 12px;

  display:inline-flex;
  align-items:center;
  gap: 10px;

  font-weight: 750;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-decoration: none;

  box-shadow: 0 10px 18px rgba(16,24,40,.06), 0 1px 0 rgba(255,255,255,.8) inset;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

body.single-lessons .al-share__ico{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
}

body.single-lessons .al-share__ico svg{
  display:block;
  width: 18px;
  height: 18px;
}

/* Primary: Copy */
body.single-lessons .al-share__btn[data-share="copy"]{
  background: linear-gradient(135deg, rgba(44,107,74,.10), rgba(92,168,146,.10));
  border-color: rgba(44,107,74,.22);
  color: rgba(17,24,39,.92);
}

/* Hover lift */
@media (hover:hover){
  body.single-lessons .al-share__btn:hover{
    transform: translateY(-1px);
    border-color: rgba(17,24,39,.18);
    box-shadow: 0 16px 28px rgba(16,24,40,.10), 0 1px 0 rgba(255,255,255,.85) inset;
  }
}

/* Focus */
body.single-lessons .al-share__btn:focus-visible{
  outline: 3px solid rgba(44,107,74,.22);
  outline-offset: 2px;
}

/* Success state (Copied) */
body.single-lessons .al-share__btn.is-done{
  background: linear-gradient(135deg, rgba(44,107,74,.16), rgba(92,168,146,.16));
  border-color: rgba(44,107,74,.30);
}

/* Mobile: 2-per-row feel, still premium */
@media (max-width: 560px){
  body.single-lessons .al-share__inner{
    gap: 10px;
  }
  body.single-lessons .al-share__btn{
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }
  body.single-lessons .al-share__label{
    flex: 0 0 100%;
    margin-bottom: 2px;
  }
}

/* Single Lesson — Save button (scoped) */
.single-lesson .al-lesson-save{
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 6px;
  z-index: 5;
}

/* wenn du ihn im Hero “oben rechts” willst */
.single-lesson .hero-image{
  position: relative; /* wichtig für absolutes Overlay */
}
.single-lesson .hero-image + .al-lesson-topnav + .lesson-header .al-lesson-save{
  position: absolute;
  top: 14px;
  right: 14px;
}

/* =========================================
   Lesson Typography Rhythm (Premium Editorial)
   Single Source of Truth (no duplicates)
========================================= */

body.single-lessons :where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content){
  /* Base rhythm tokens */
  --al-p: 18px;        /* paragraph spacing */
  --al-ul: 20px;       /* list/figure spacing */

  --al-h2-top: 40px;
  --al-h2-bottom: 10px;

  --al-h3-top: 28px;
  --al-h3-bottom: 8px;
}

/* Kill heading padding (your “18px we can’t remove” issue) */
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content)
:is(h2.wp-block-heading, h3.wp-block-heading, h4.wp-block-heading){
  padding: 0 !important;
}

/* Baseline blocks */
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) p{
  margin: 0 0 var(--al-p) !important;
}
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) ul.wp-block-list,
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) ol{
  margin: 0 0 var(--al-ul) !important;
}
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) figure,
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) table{
  margin: 0 0 var(--al-ul) !important;
}

/* Headings */
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) h2.wp-block-heading{
  margin: var(--al-h2-top) 0 var(--al-h2-bottom) !important;
}
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content) h3.wp-block-heading{
  margin: var(--al-h3-top) 0 var(--al-h3-bottom) !important;
}

/* KEY: never allow extra “top gap” after headings */
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content)
:is(h2.wp-block-heading, h3.wp-block-heading) + :is(p, ul.wp-block-list, ol, figure, table){
  margin-top: 0 !important;
}

/* Control spacing BEFORE headings (prevents those 45px jumps) */
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content)
:is(p, ul.wp-block-list, ol, figure, table) + h2.wp-block-heading{
  margin-top: 36px !important;
}
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content)
:is(p, ul.wp-block-list, ol, figure, table) + h3.wp-block-heading{
  margin-top: 22px !important;
}

/* Optional: H2 immediately followed by H3 */
body.single-lessons
:where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content)
h2.wp-block-heading + h3.wp-block-heading{
  margin-top: 18px !important;
}

/* Optional: Mobile tighten (only if it feels too airy) */
@media (max-width: 520px){
  body.single-lessons :where(.lesson-content, .lesson__content, .entry-content, .single-entry-content, .wp-block-post-content){
    --al-h2-top: 32px;
    --al-h3-top: 22px;
    --al-p: 16px;
    --al-ul: 18px;
  }
}

/* =========================================================
   SINGLE LESSON – HERO IMAGE (16:9 – optimized for 2000x750)
   ========================================================= */

body.single-lessons article.ast-article-single figure.hero-image{
  margin: 0 auto 18px;
  width: 100%;
  max-width: 812px;              /* exakt dein Content-Container */

  height: auto;

  overflow: hidden;
  border-radius: 22px;
}

/* Image base */
body.single-lessons article.ast-article-single figure.hero-image > img{
  display: block;
  width: 100%;
  height: auto;        /* wichtig */
  object-fit: contain; /* kein Crop */
  object-position: 50% 60%;      /* leicht nach unten priorisiert */
}

/* ---------------------------------------------------------
   Mobile – etwas kompakter, aber gleiches Verhältnis
   --------------------------------------------------------- */
@media (max-width: 640px){
  body.single-lessons article.ast-article-single figure.hero-image{
    border-radius: 18px;
    margin-bottom: 16px;
  }

  body.single-lessons article.ast-article-single figure.hero-image > img{
    object-position: 50% 55%;
  }
}

/* =========================================================
   SINGLE LESSON – HERO OVERRIDE (per page)
   Aquarium Glass (Elementor ID 34953)
   ========================================================= */

@media (min-width: 900px){
  body.single-lessons [data-elementor-id="34953"] figure.hero-image > img{
    object-position: 50% 65% !important;
  }
}

@media (max-width: 640px){
  body.single-lessons [data-elementor-id="34953"] figure.hero-image > img{
    object-position: 50% 58% !important;
  }
}

/* =========================================================
   HERO – NO BOTTOM CROP (force)
========================================================= */
body.single-lessons article.ast-article-single figure.hero-image{
  overflow: visible !important;   /* optional, falls irgendwo clipped wird */
}

body.single-lessons article.ast-article-single figure.hero-image > img{
  height: auto !important;
  max-height: none !important;    /* kill any earlier max-height */
  object-fit: contain !important; /* kill any earlier cover */
  object-position: 50% 100% !important; /* bottom anchored (safe) */
}

body.single-lessons article.ast-article-single figure.hero-image{
  margin: 0 auto 18px;
  width: 100%;
  max-width: 812px;
  overflow: hidden;
  border-radius: 22px;
}

body.single-lessons article.ast-article-single figure.hero-image > img{
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important; /* kein Crop */
}

/* =========================================================
   SINGLE LESSON – HERO IMAGE (NO CROP, bottom safe)
   Optimized for 2000x750 (wide hero, content column 812px)
   ========================================================= */

body.single-lessons article.ast-article-single figure.hero-image{
  margin: 0 auto 18px;
  width: 100%;
  max-width: 812px;                 /* exakt dein Content-Container */
  padding: 0 !important;

  overflow: hidden;                  /* nur für Radius */
  border-radius: 22px;
}

/* Image base (no crop, no forced height) */
body.single-lessons article.ast-article-single figure.hero-image > img{
  display: block;
  width: 100% !important;
  height: auto !important;

  max-height: none !important;       /* kill any earlier max-height */
  object-fit: contain !important;    /* ✅ kein Crop */
  object-position: 50% 100% !important; /* ✅ unten geschützt */
}

/* ---------------------------------------------------------
   Mobile – Radius etwas kleiner
--------------------------------------------------------- */
@media (max-width: 640px){
  body.single-lessons article.ast-article-single figure.hero-image{
    border-radius: 18px;
    margin-bottom: 16px;
  }
}

/* =========================================================
   SINGLE LESSON – HERO OVERRIDE (per page)
   Aquarium Glass (Elementor ID 34953)
   (bei "contain" praktisch irrelevant, aber ok falls du später cover nutzt)
   ========================================================= */
@media (min-width: 900px){
  body.single-lessons [data-elementor-id="34953"] figure.hero-image > img{
    object-position: 50% 100% !important;
  }
}
@media (max-width: 640px){
  body.single-lessons [data-elementor-id="34953"] figure.hero-image > img{
    object-position: 50% 100% !important;
  }
}

/* =========================================================
   SINGLE LESSON – HERO IMAGE (4:3 – fits 812px column)
   Goal: no letterboxing, bottom stays visible
   ========================================================= */

body.single-lessons article.ast-article-single figure.hero-image{
  margin: 0 auto 18px;
  width: 100%;
  max-width: 812px;          /* dein Content-Container */
  aspect-ratio: 4 / 3;       /* <- passt zu 812x~609 */
  overflow: hidden;
  border-radius: 22px;
  background: #0000;         /* kein “grauer” Balken */
}

body.single-lessons article.ast-article-single figure.hero-image > img{
  display: block;
  width: 100% !important;
  height: 100% !important;   /* wichtig bei aspect-ratio container */
  object-fit: cover !important;        /* füllt ohne Balken */
  object-position: 50% 100% !important;/* unten priorisieren */
}

/* Mobile */
@media (max-width: 640px){
  body.single-lessons article.ast-article-single figure.hero-image{
    border-radius: 18px;
    margin-bottom: 16px;
  }
}

/* -------------------------------------------
   FIX: Rails-Row darf nicht auf 772px begrenzt sein
------------------------------------------- */

/* Greift auf Single-Lesson + allgemein als Fallback */
body.single-lessons .al-lessons.is-rails .al-row,
body.post-type-lessons .al-lessons.is-rails .al-row,
.al-lessons.is-rails .al-row{
  max-width: none !important;
  width: 100% !important;
}

/* Wrapper ebenfalls nicht begrenzen */
body.single-lessons .al-lessons.is-rails .al-rail-wrap,
body.post-type-lessons .al-lessons.is-rails .al-rail-wrap,
.al-lessons.is-rails .al-rail-wrap{
  max-width: none !important;
  width: 100% !important;
}

/* -------------------------------------------
   RAILS: Full-bleed Wrapper + editorial centered inner
------------------------------------------- */

/* 1) Der Gutenberg Full-Width Wrapper darf wirklich full sein */
.al-rails-bleed.wp-block-group.alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible; /* wichtig, falls ein Parent clippt */
}

/* 2) Aber der Inhalt bleibt editorial zentriert */
.al-rails-bleed .al-row{
  width: min(1380px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

/* 3) Rail “cool”, ohne am Rand zu kleben */
.al-rails-bleed .al-rail-wrap{ overflow: hidden; }

.al-rails-bleed .al-lesson-rail{
  display:flex;
  gap: 16px;
  padding: 12px 14px 18px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x proximity;

  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* 4) 5 Cards wirken “Pillar” auf Desktop */
.al-rails-bleed .al-lesson-card{
  flex: 0 0 clamp(220px, 18vw, 260px);
  scroll-snap-align: start;
}

/* 5) Scrollbar verstecken */
.al-rails-bleed .al-lesson-rail::-webkit-scrollbar{ display:none; }
.al-rails-bleed .al-lesson-rail{ scrollbar-width:none; }

/* =========================================
   STYLE HUB – centered cinematic rail
========================================= */

/* 1) Die gesamte Rails-Section darf breiter sein */
.wp-block-post-content .al-lessons.is-rails,
.entry-content .al-lessons.is-rails{
  width: 100%;
  max-width: none;
}

/* 2) Die eigentliche Rail-Row wird zentriert */
.wp-block-post-content .al-lessons.is-rails .al-row,
.entry-content .al-lessons.is-rails .al-row{
  width: min(1380px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

/* 3) Rail Layout */
.wp-block-post-content .al-lessons.is-rails .al-lesson-rail,
.entry-content .al-lessons.is-rails .al-lesson-rail{
  display: flex;
  gap: 18px;
  padding: 16px 20px 22px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
}

/* 4) Cards so dimensionieren, dass 5 sichtbar werden */
.wp-block-post-content .al-lessons.is-rails .al-lesson-card,
.entry-content .al-lessons.is-rails .al-lesson-card{
  flex: 0 0 clamp(220px, 18vw, 260px);
  scroll-snap-align: start;
}

/* 5) Scrollbar unsichtbar */
.wp-block-post-content .al-lessons.is-rails .al-lesson-rail::-webkit-scrollbar,
.entry-content .al-lessons.is-rails .al-lesson-rail::-webkit-scrollbar{
  display: none;
}
.wp-block-post-content .al-lessons.is-rails .al-lesson-rail,
.entry-content .al-lessons.is-rails .al-lesson-rail{
  scrollbar-width: none;
}

/* =========================================================
   STYLE HUB – Rails in .al-rails-bleed zentriert (override)
   ========================================================= */

.al-rails-bleed.wp-block-group.alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible;
}

/* Wichtig: hier NICHT full-bleed – sondern editorial centered */
/* Zentrierbreite minimal erhöhen (damit 5 Karten + Gaps reinpassen) */
.al-rails-bleed .al-lessons,
.al-rails-bleed .al-lessons.is-rails,
.al-rails-bleed .al-rails{
  width: min(1480px, 96vw) !important;
  max-width: min(1480px, 96vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Falls irgendwo das alte Full-bleed für .al-rails reingrätscht: zurücksetzen */
.al-rails-bleed .al-rails{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* nur innerhalb dieses Blocks */
.al-rails-bleed .al-lessons.is-rails .al-row-head{
  display:none !important;
}

/* Mobile: hide meta row in rails/cards (shown in modal anyway) */
@media (max-width: 768px) {
  .al-lessons .card .meta,
  .al-lessons .lesson-card .meta,
  .al-lessons .al-lesson-card .meta,
  .al-lessons .meta {
    display: none !important;
  }
}

/* Mobile: meta ausblenden (level + reading time) */
@media (max-width: 640px){
  .al-lessons .card .topline .meta{
    display: none !important;
  }

  /* Mobile: desc kürzer (Clamp statt JS) */
  .al-lessons .card .desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }
}

/* ==============================
   Deep Dives Rail (Single Lesson)
   Hard override against "fullwidth card"
   ============================== */

.wp-block-group.al-rails-bleed .al-rails .al-row-items{
  display: flex;
  gap: 14px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px 14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* verhindert: einzelne Card streckt auf volle Breite */
.wp-block-group.al-rails-bleed .al-rails .al-row-items > .al-card{
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  scroll-snap-align: start;
}

/* verhindert: Link/Inneres zieht Layout auf */
.wp-block-group.al-rails-bleed .al-rails .al-card__link{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Thumbnail bekommt definierte Höhe (sonst riesiges Bild -> riesige Card) */
.wp-block-group.al-rails-bleed .al-rails .al-card__thumb{
  height: 180px;
  overflow: hidden;
  border-radius: 14px;
}

/* Bild sauber croppen */
.wp-block-group.al-rails-bleed .al-rails .al-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* optional: Scrollbar etwas cleaner */
.wp-block-group.al-rails-bleed .al-rails .al-row-items::-webkit-scrollbar{ height: 10px; }
.wp-block-group.al-rails-bleed .al-rails .al-row-items::-webkit-scrollbar-thumb{ border-radius: 999px; }