/* === Video Popup === */
#video_popup_overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}
#video_popup_overlay.active {
    display: flex;
}
#video_popup_inner {
    width: 80vw;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #808080;
    border-radius: 30px;
    padding: 10px;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
}
#video_popup_player {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
#video_popup_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
#video_popup_title {
    text-align: left;
    color: #cfcfd2;
    font-family: reg;
    font-size: 24px;
    line-height: 28px;
    pointer-events: none;
    position: relative;
    top: -5px;
    margin-left: 15px;
}
#video_popup_player iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 20px;
}
#video_popup_close {
    background: #cfcfd2;
    border: none;
    color: #1d1d1f;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
    position: relative;
    top: -5px;
    right: 5px;
}
#video_popup_close:hover {
    background: #bcbcc0;
}
/* =================== */

@font-face {
    font-family: bla;
    src: url(font/GoodSans-Black.ttf);
  }


  @font-face {
    font-family: bol;
    src: url(font/GD_bold.otf);
  }



  @font-face {
    font-family: med;
    src: url(font/GD_med.otf);
  }


    @font-face {
    font-family: umr;
    src: url(font/umr.otf);
  }



@font-face {
    font-family: reg;
    src: url(font/GoodSans-Regular.ttf);
  }

  @font-face {
    font-family: lig;
    src: url(font/GoodSansText-Light.ttf);
  }


    @font-face {
    font-family: tin;
    src: url(font/GoodSans-Thin.ttf);
  }



    @font-face {
    font-family: mono;
    src: url(font/GoodMono-Thin.ttf);
  }



   @font-face {
    font-family: instserf;
    src: url(font/InstrumentSerif-Italic.ttf);
  }


   @font-face {
    font-family: inst;
    src: url(font/InstrumentSerif-Regulat.ttf);
  }



     @font-face {
    font-family: sl;
    src: url(font/sl.otf);
  }





  :root {
    --small:12px;
    --normal:18px;
	--bigger:26px;
    --big:46px;
    --verybig:55px;
    --gutter:20px; /* vorher 0px: Seitenabstand, sobald das Fenster schmaler als 1300px ist */
  }



a {
    cursor: pointer;
}

/* Kreiszahlen im Fließtext (➊➋➌...): das Unicode-Zeichen wird per Script (footer.php)
   erkannt und als data-ziffer gesetzt, hier bauen wir den Kreis selbst mit der Website-Schrift.
   background-color:currentColor -> Kreis übernimmt die Textfarbe der Umgebung; die Ziffer selbst
   kommt über ::before mit eigener (weißer) Farbe, damit sie sich vom Kreis abhebt. */
.zahl_kreis {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: middle;
    transform: translateY(-1.5px);
}
.zahl_kreis::before {
    content: attr(data-ziffer);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: med;
    font-size: 10px;
    line-height: 1;
}


body {
    margin: 0;
    padding: 0;
    font-family: reg;
    font-size:   var(--normal);
    hyphens: auto;
    transition: background-color 300ms;
    overflow-x: hidden;

}






#navlinks {
    height: 240px;
    position: fixed;
    width: 0px;
    background-color: #333;
    z-index: 100;
    box-shadow: 4px 4px 20px rgba(9,4,0,0.1);
    transition: all 200ms;
    width: 40px;
    left: 10px;
    top: calc(50vh - 180px);
    padding-top: 50px;
    padding-left: 15px;
    border-radius: 30px;
    color: #ddd;
    cursor: pointer;
    overflow: hidden;
    transition: padding-left left 150ms, width 150ms,  background-color 300ms, opacity 200ms;
}

#navlinks_titel {
    background: #ebebeb;
    margin-left: -30px;
    margin-top: -16px;
    padding: 0 30px;
    padding-left: 35px !important ;
    width: calc(100% + 30px);
    box-sizing: border-box;
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    transition: opacity 150ms, background 300ms;
}

#navlinks_kursname {
    font-family: med;
    color: #222;
    margin-bottom: 60px;
    transition: color 300ms;
}

#navlinks #navlinks_uebersicht_link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #666;
    transition: opacity 150ms, transform 150ms;
}

#navlinks #navlinks_uebersicht_link:hover {
    opacity: 0.5;
    transform: translateX(7px);
}

.navlinks_4dots {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-template-rows: repeat(2, 8px);
    gap: 3px;
    width: 42px;
    flex-shrink: 0;
}

.navlinks_4dots span {
    background: #666;
    border-radius: 50%;
}

#navlinks.nav-dark #navlinks_titel {
    background: #252525;
}

#navlinks.nav-dark #navlinks_kursname {
    color: #ddd;
}

#navlinks.nav-dark #navlinks_uebersicht_link {
    color: #666;
}

#navlinks.nav-dark .navlinks_4dots span {
    background: #666;
}




#navlinks:hover {
    width: 350px;
    padding-left: 30px;
    padding-top: 16px;
    transition: all 300ms;
    left: 0px;
    height: 100vh;
    top: 0;
    border-radius: 0;
    opacity: 1;
}



#navlinks:hover #navlinks_titel {
    max-height: 300px;
    padding: 16px 30px 14px 30px;
    margin-bottom: 20px;
    opacity: 1;
}

#navlinks:hover #navlinks_wrapper {
    margin-top: 0;
}




#navlinks:hover  th:nth-child(2) {
    margin-left: 20px;
    opacity: 1;
}

#navlinks:hover .navlinks_tablewarapper  {
    padding-bottom: 20px;
}
#navlinks:hover  #navlinks_tablewarapper_open {
    max-height: 180px;
}


th:nth-child(2) {
    margin-left: 0px;
    opacity: 0;
    transition: all 150ms;
}





.navlinks_tablewarapper {
    color: #aaa;
    margin-top: 5px;
    padding-bottom: 8px;
    max-height: 20px;
    overflow: hidden;
    transition: max-height 350ms ease-out, padding-bottom 300ms ease-out;
}

.navlinks_tablewarapper:hover {
    max-height: 800px;
}

.navlinks_tablewarapper:hover td  {
    opacity: 1;

}  

.navlinks_tablewarapper_open {
    max-height: 20px;

}

.navlinks_tablewarapper_open td {
    opacity: 1;
}
#navlinks_aktiv {
    color: black;
}


#navlinks_wrapper {
    top: auto;
    position: relative;
    height: auto;
    width: 100%;
    margin-top: -26px;
}
    

#navlinks #navlinks_wrapper div table {
    width: 334px;
    text-align: left;
}



tr {
    height: 30px;
}
th:nth-child(1) {
  width: 42px;
  vertical-align: middle;
}
th:nth-child(1) div {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    position: relative;
    top: 1px;
}

td {
    color: #B3B3B3;
    opacity: 0;
    transition: opacity 450ms;
    vertical-align: top;
    padding-bottom: 4px;
}

td:nth-child(1) {
    font-family: mono;
    letter-spacing: -0.15em;
}

td:nth-child(3) {
    font-size: var(--small);
    font-family: mono;
    text-align: right;
    color: #B3B3B3;
    opacity: 0;
    white-space: nowrap;
    padding-left: 30px;
}

.navlinks_tablewarapper:hover td:nth-child(3),
.navlinks_tablewarapper_open td:nth-child(3) {
    opacity: 0.5;
}


.tb_1 th, .tb_1 td:nth-child(1){
    color:#aaa
}
.tb_2 th, .tb_2 td:nth-child(1)  {
    color:#2DDD04
}
.tb_3 th, .tb_3 td:nth-child(1)  {
    color:#FFDD04
}
.tb_4 th, .tb_4 td:nth-child(1){
    color:#8F66FF
}
.tb_5 th, .tb_5 td:nth-child(1)  {
    color:#A67C52
}
.tb_6 th, .tb_6 td:nth-child(1)  {
    color:#FF4500
}
.tb_7 th, .tb_7 td:nth-child(1)  {
    color:#FFA3DE
}
.tb_8 th, .tb_8 td:nth-child(1)  {
    color:#0066FF
}

.tb_1 th:nth-child(1) div {  
    background-color: #aaa;
  }
.tb_2 th:nth-child(1) div {  
background-color: #2DDD04;
}
.tb_3 th:nth-child(1) div {  
    background-color: #FFDD04;
    }
.tb_4 th:nth-child(1) div {  
    background-color: #8F66FF;
  }
.tb_5 th:nth-child(1) div {  
background-color: #A67C52;
}
.tb_6 th:nth-child(1) div {  
    background-color: #FF4500;
    }
.tb_7 th:nth-child(1) div {  
    background-color: #FFA3DE;
    }
.tb_8 th:nth-child(1) div {  
    background-color: #0066FF;
    }
/*
.tb_2 th:nth-child(1) div {  
    background-color:transparent;
}
 span {
    font-size: var(--small);

}
    */


table tr {
      transition: all 100ms;
  }

  td:nth-child(2) {
      transition: opacity 150ms, transform 150ms;
  }

table tr:hover td:nth-child(2)  {
    opacity: 0.5 !important;
    transform: translateX(7px);
}

#navlinks_aktiv_kreis {

    opacity: 1 !important;}


#navlinks a {
    text-decoration: none;
    color: inherit;
}

#navlinks.nav-dark td {
    color: #888;
}
#navlinks.nav-dark td#navlinks_aktiv {
    color: #fff;
}
#navlinks.nav-dark #navlinks_wrapper {
    color: #F9F8F6;
}

#clip_autoplay_toggle {
    position: fixed;
    left: 10px;
    bottom: 73px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color:#fff;
    color: #999999;
    box-shadow: 4px 4px 20px rgba(9,4,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: background-color 300ms, transform 150ms, opacity 300ms;
}

#clip_autoplay_toggle.cat_sichtbar {
    opacity: 1;
    pointer-events: auto;
}

#clip_autoplay_toggle:hover {
    transform: scale(1.08);
}

#clip_autoplay_toggle svg {
    width: 16px;
    height: 16px;
}

#clip_autoplay_toggle .cat_icon_play {
    display: none;
}

#clip_autoplay_toggle.active .cat_icon_pause {
    display: none;
}

#clip_autoplay_toggle.active .cat_icon_play {
    display: block;
}








#navunten {
    width: 100%;
    height: 60px;
    background-color: #333;
    box-shadow: 0 -10px 30px rgba(9,4,0,0.08);
    border-radius: 16px 16px 0 0;
    z-index: 110;
    display: flex;
    justify-content: space-between;
    line-height: 60px;
    color: black;
    transition: all 300ms;
    position: sticky;
    bottom: 0;
}

body.kapitel-seite #navunten {
    background-color: #333;
    color: #F9F8F6;
}

#navunten_links, #navunten_mitte div, #navunten_rechts a {
    transition: all 150ms;
    cursor: pointer;

}
#navunten_links:hover, #navunten_mitte div:hover, #navunten_rechts a:hover {
    opacity: 0.3;
    transform: scale(1.06);
}

#navunten_links, #navunten_rechts {
    margin: 0 20px;
    width: 200px;
}

#navunten_rechts {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

#navunten_mitte {
    display: flex;
    justify-content:space-between;
    gap: 30px;

}

#navunten a{
	display: block;
	width: 100%;
	height: 100%;
	color:black;
	text-decoration:none;
}
#navunten_rechts a {
	width: auto;
	height: auto;
	flex: 0 0 auto;
}
#navunten a:hover{
    opacity: 0.3;
}

/* MotionMasterClub unten links: statt Ausblenden eine La Ola Welle durchs Wort */
#navunten_links:hover,
#navunten_links a.navunten_laola:hover {
    opacity: 1;
    transform: none;
}
.navunten_laola span {
    display: inline-block;
}
.navunten_laola.navunten_laola_aktiv span {
    animation: navunten_laola 350ms ease-in-out calc(var(--i) * 22ms) 1;
}
@keyframes navunten_laola {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-9px); }
    70%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

.navunten_werkzeuge { position: relative; }
.navunten_disabled { color: rgba(0,0,0,0.5); cursor: default; }
.navunten_badge_soon {
    position: absolute;
    top: 12px;
    right: -16px;
    background-color: #FFDD04;
    color: #000;
    font-size: 10px;
    font-family: reg;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 8px;
    transform: rotate(-12deg);
    white-space: nowrap;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
    transition: background-color 300ms;
}
.navunten_badge_soon.navunten_badge_dark { background-color: #4a4a4a; }
@keyframes navunten_badge_pop {
    0%   { transform: rotate(-12deg) scale(1); }
    30%  { transform: rotate(-18deg) scale(1.35); }
    60%  { transform: rotate(-6deg) scale(1.15); }
    100% { transform: rotate(-12deg) scale(1); }
}
.navunten_badge_soon.navunten_badge_pop,
.navunten_werkzeuge:hover .navunten_badge_soon { animation: navunten_badge_pop 0.5s ease; }



/* Content Kurs Videoseite */


#section_wrapper {
    width: 100%;
}

body.kapitel-seite #section_wrapper {
    overflow-y: scroll;
    height: 100vh;
}

#section_wrapper section {
    scroll-snap-align: start;
}


#video_wrapper {
    width: 100%;
    height: calc(100vh - 60px);
    background-color: #1c1c1c;
    position: relative;
}

#video_wrapper video {
    height: calc(100vh - 0px);
    width: calc(100% - 0px);
    margin-left: 0px;
}

#video_wrapper iframe {
    background-color: #1c1c1c;
    height: calc(100vh - 60px);
    width: calc(100% - 0px);
    margin-left: 0px;
}

/* Nur Intro-Kapitel 0.1 und 0.2: Grau aus dem Video, damit die Ränder nahtlos übergehen */
#video_wrapper.video_bg_grau,
#video_wrapper.video_bg_grau iframe {
    background-color: #acacac;
}

/* Unsichtbare Fläche über dem Vimeo-iframe, fängt Mausbewegungen fürs
   Ein/Ausblenden von Titel und Navi ab (Klick = Play/Pause). */
#video_maus_fang {
    position: absolute;
    inset: 0;
    cursor: pointer;
    touch-action: manipulation; /* kein Doppeltipp-Zoom auf dem iPad, der Doppeltipp spult */
}

/* Eigener Player: Steuerleiste unten (Play/Pause + Zeitleiste), bündig mit dem
   Inhaltsbereich. Blendet zusammen mit Titel und Navi aus (zeige/versteckeKopfElemente). */
#mmc_steuerung {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(1260px, calc(100% - 40px)); /* bündig mit Titel und Boxen im Inhalt (1300px minus 20px Rand je Seite) */
    bottom: 24px;
    /* Zeitleiste beginnt dort, wo unten der Kapiteltitel eingerückt ist. Die Nummernspalte
       schrumpft je nach Titellänge, darum misst das JS den Einzug (--mmc-einzug). */
    display: grid;
    /* Reichen die Knöpfe weiter als der Einzug, wird die Spalte so breit wie die Knöpfe */
    grid-template-columns: minmax(var(--mmc-einzug, 210px), max-content) 1fr;
    align-items: center;
    transition: opacity 0.5s;
}

#mmc_play_btn {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #262626;
    background-color: var(--kapitel-farbe, #2DDD04);
    border-radius: 12px;
    transition: transform 150ms, box-shadow 150ms;
}

@supports (corner-shape: superellipse(2)) {
    #mmc_play_btn {
        border-radius: 20px;
        corner-shape: superellipse(2);
    }
}

#mmc_play_btn:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

#mmc_play_btn .mmc_icon_pause,
#video_wrapper.mmc_spielt #mmc_play_btn .mmc_icon_play {
    display: none;
}

#video_wrapper.mmc_spielt #mmc_play_btn .mmc_icon_pause {
    display: block;
}

/* Zeitleiste gleich hoch wie der Play-Button, gleiche Ecken */
#mmc_zeitleiste {
    flex: 1;
    cursor: pointer;
}

#mmc_zeitleiste_spur {
    position: relative;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 150ms;
}

/* Hover wie beim Play-Button: in der Höhe 1.12, in der Breite nur so viel,
   dass es ein paar Pixel wächst (gleichmässig 1.12 wäre bei der Breite riesig) */
#mmc_zeitleiste:hover #mmc_zeitleiste_spur {
    transform: scale(1.008, 1.12);
}

@supports (corner-shape: superellipse(2)) {
    #mmc_zeitleiste_spur {
        border-radius: 20px;
        corner-shape: superellipse(2);
    }
}

#mmc_zeitleiste_fortschritt {
    position: relative;
    height: 100%;
    width: 0;
    background-color: var(--kapitel-farbe, #2DDD04);
    /* Ecken links wie die Spur, rechts gerade: damit der Glanz (::after)
       der Rundung folgt. Glanz nur auf dem farbigen Teil, nicht auf dem Grau. */
    border-radius: inherit;
    corner-shape: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Bereits geladener Teil des Videos: eine Stufe heller als die Spur */
#mmc_zeitleiste_geladen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: rgba(255,255,255,0.4);
    transition: width 300ms, left 300ms;
}

/* Abspielposition: dunkelgrauer Strich am Ende des Fortschritts */
#mmc_zeitleiste_fortschritt::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 4px;
    background-color: #262626;
}

/* Aktuelle Zeit / Gesamtdauer rechts in der Zeitleiste */
#mmc_zeitleiste_zeit {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #262626;
    font-family: reg;
    font-size: var(--small);
    white-space: nowrap;
    pointer-events: none;
}

/* Eigener Player: kurze Rückmeldung in der Mitte (Play, Pause, 3s vor/zurück),
   3:2 wie der Play-Button */
#mmc_feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 120px;
    margin: -60px 0 0 -90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: rgba(255,255,255,0.2); /* wie die Spur der Zeitleiste */
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    color: #262626;
    font-family: reg;
    font-size: var(--normal);
    pointer-events: none;
    opacity: 0;
}

#mmc_feedback_icon svg {
    display: block;
}

#mmc_feedback_text:empty {
    display: none;
}

#mmc_feedback.mmc_feedback_aktiv {
    animation: mmc_feedback_puls 700ms ease-out forwards;
}

/* Glanz oben links wie bei den Clips (.content_carussel_box::after) auf
   Player-Elementen und Kapitel-Overlay. Ohne z-index: liegt so oder so über
   dem nicht positionierten Inhalt, und die Box bleibt ohne eigene Ebene
   (wichtig fürs Quadrat mit z-index:-1 dahinter). */
/* Play-Button und Tempo-Kreis nebeneinander in der linken Spalte */
#mmc_knoepfe {
    padding-right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Kreise neben dem Play-Button (zurück, vor, Tempo): dunkelgrau, leicht transparent */
.mmc_kreis_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(38, 38, 38, 0.7);
    color: #666;
    font-family: reg;
    font-size: var(--small);
    transition: transform 150ms, background-color 150ms, color 150ms;
}
/* Kreise untereinander enger (4px statt 10px) */
.mmc_kreis_btn + .mmc_kreis_btn {
    margin-left: -6px;
}
#mmc_steuerung .mmc_kreis_btn:hover {
    transform: scale(1.12);
    background-color: rgba(70, 70, 70, 0.8);
    color: #aaa;
}

#mmc_play_btn::after,
#mmc_start_play::after,
#mmc_zeitleiste_fortschritt::after,
#mmc_feedback::after,
#kapitel_transition_box::after,
#kapitel_transition_anim::after,
#kapitel_ende_box::after,
#kapitel_ende_pfeil::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 10px 10px 16px -6px rgba(255, 255, 255, 0.12); /* dezenter als bei den Clips (0.22) */
    pointer-events: none;
}

@keyframes mmc_feedback_puls {
    0%   { opacity: 0; transform: scale(0.9); }
    15%  { opacity: 1; transform: scale(1); }
    65%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05); }
}

#video_wrapper img {
    height: calc(100vh - 60px);
    display: block;
    margin: 0 auto;
}



#video_titel {
    position: absolute;
    z-index: 1; /* über dem iframe, auch wenn das beim Kapitel-Overlay per filter eine eigene Ebene bekommt */
    top: 0px;
    width: 100%;
    box-sizing: border-box;
    color: #eee;
    font-size: var(--normal);
    background-color: var(--kapitel-farbe, #2DDD04);
    /* bündig mit #content_titel_wrapper: 1300px mittig plus --gutter innen. 100% statt 50vw,
       sonst zählt die Scrollleiste von #section_wrapper mit und unter 1300px fehlt der Rand */
    padding: 10px max(var(--gutter), calc((100% - 1300px) / 2 + var(--gutter)));
    box-shadow: 0px 15px 15px rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    transition: opacity 400ms;

}












#main_content {
    width: calc(100vw - 00px);
    margin-left: 0px;
}


#content {
    max-width: 1300px;
    margin: 0 auto;
    margin-bottom: 75px;
}

#content_titel_wrapper_wrapper {
        background-color: #333;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  margin-bottom: 30px;
}

#content_titel_wrapper {
    
    width: 100%;
    padding: 60px 0 120px 0;
    font-size: var(--big);
    display: flex;
    max-width: 1300px;
    margin: 0 auto;

    gap: 30px;



}

#content_titel_links, #content_titel_rechts {
   flex: 1;

}

#content_titel_links {
    mix-blend-mode: multiply;
}

#video_titel_links {
    mix-blend-mode: multiply;
}

#content_titel_links, #video_titel_links {
    color: #444;
    display: flex;



}

.content_titel_links_zahl {
    width:160px;
    font-family: mono;
    font-weight: 400;
}


.content_titel_links_kat {
    font-size: var(--normal);
    margin-bottom: -3px;
    font-family: lig;
    opacity: 0.4;
}

.content_titel_links_zahl .content_titel_links_kat {
    font-family: mono;
}

.content_titel_links_titel {
    padding-left: 50px;
}

.content_titel_links_titel div {
    font-family: reg;
}


#content_titel_rechts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0; /* Beschreibung oben bündig mit der Überkapitel Zeile links */
}

#content_titel_beschreibung {
    color: #aaa;
    font-size: var(--normal);
    line-height: calc( var(--normal) + 4px);
    mix-blend-mode: multiply;
    flex: 1;
    align-self: stretch;
    margin-bottom: 30px;
}

#content_titel_inhalt {
    color: #ccc;
    font-size: var(--small);
    line-height: calc( var(--small) + 4px);
    margin-top: 12px;
}

/* Weisser "Nächstes Kapitel"-Button unter dem Video vorerst ausgeblendet (Markup bleibt,
   zum Wieder-Einblenden diese Regel löschen). Der im Kapitelbalken oben bleibt sichtbar. */
#content_titel_rechts .naechstes_kapitel_btn {
    display: none;
}

.naechstes_kapitel_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0px 26px;
    background-color: #fff;
    color: #333;
    font-size: var(--normal);
    text-decoration: none;
    white-space: nowrap;
    transition: all 150ms;
}

.naechstes_kapitel_btn:hover {
     opacity:0.6;
    transform: scale(1.05);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);  
}

.naechstes_kapitel_btn svg {
    flex-shrink: 0;
}

.kapitel_download_btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    height: 40px;
    color: #333;
    font-size: var(--normal);
    text-decoration: none;
    white-space: nowrap;
    transition: all 150ms;
}

/* Download und Vertiefung nebeneinander */
.kapitel_download_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    align-self: flex-start;
    margin-top: 0; /* vorher -20px, alle Download-/Vertiefung-Buttons 20px tiefer */
    margin-bottom: 34px;
}

.kapitel_download_btn img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.kapitel_download_btn:hover {
    opacity: 0.5;
    transform: scale(1.05);
}

#kapitel_vertiefung_btn img {
    opacity: 0.4;
}

/* === Kapitel-Wechsel Overlay (bei jedem Aufruf eines Kapitels) === */
/* absolute im #video_wrapper statt fixed: scrollt mit dem Video mit */
#kapitel_transition_overlay,
#kapitel_ende_overlay {
    position: absolute;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    
}

#kapitel_transition_overlay.active {
    animation: kapitel_transition_fade 3s ease forwards;
}

/* Nur das Vimeo-Video (samt eigener Steuerleiste) hinter dem Overlay leicht unscharf und dunkler. Gleiche Dauer und
   Taktung wie das Overlay (startet mit .active), pausiert auch beim Hover mit (per JS, siehe single-kapitel.php). */
body:has(#kapitel_transition_overlay.active) #video_wrapper iframe,
body:has(#kapitel_transition_overlay.active) #mmc_steuerung {
    animation: kapitel_video_blur 3s ease forwards;
}

@keyframes kapitel_video_blur {
    0%   { filter: blur(0) brightness(1); }
    15%  { filter: blur(6px) brightness(0.6); }
    85%  { filter: blur(6px) brightness(0.6); animation-timing-function: ease-in; }
    100% { filter: blur(0) brightness(1); }
}


/* Mit der Maus drauf: Overlay bleibt stehen, beim Verlassen läuft es weiter (per JS).
   Klickbar nur solange .active, sonst würde die unsichtbare Box die Seite blockieren. */
#kapitel_transition_overlay.active #kapitel_transition_box,
#kapitel_ende_overlay.active #kapitel_ende_link,
#kapitel_ende_overlay.active #kapitel_ende_nochmal {
    pointer-events: auto;
}

@keyframes kapitel_transition_fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; animation-timing-function: ease-in; }
    100% { opacity: 0; }
}

#kapitel_transition_box,
#kapitel_ende_box {
    padding: 40px 60px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    align-items: baseline;
    position: relative;
}

/* Quadrat so hoch wie die Box, startet bündig mit der linken Kante
   hinter der Box (gleiche Ecken, nichts blitzt durch) und fährt ganz nach
   links raus. Die weisse Fläche ist doppelt so breit wie das Quadrat
   (Video sitzt links), damit sie auch ausgefahren noch hinter die Box
   reicht und an den runden Ecken nichts durchblitzt. Kein z-index/transform an der Box, damit z-index:-1 das
   Quadrat hinter den Box-Hintergrund legt, aber noch über der Seite. */
#kapitel_transition_anim {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    aspect-ratio: 2 / 1;
    z-index: -1;
    background-color: #fff;
    transform: translateX(0);
    overflow: hidden;
    isolation: isolate;
}

#kapitel_transition_anim video {
    display: block;
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    corner-shape: inherit;
}

#kapitel_transition_overlay.active #kapitel_transition_anim {
    animation: kt_anim_rein 600ms cubic-bezier(0.22, 1, 0.36, 1) 150ms forwards;
}

@keyframes kt_anim_rein {
    to { transform: translateX(-50%); }
}

#kapitel_transition_nummer,
#kapitel_ende_nummer {
    font-family: mono;
    font-size: 28px;
    opacity: 0.5;
    margin-bottom: 0px;
    margin-right: 20px;
    color: #000;
}

#kapitel_transition_titel,
#kapitel_ende_titel {
    font-family: reg;
    font-size: 28px;
    color: #000;
}

#kapitel_transition_titel span,
#kapitel_ende_titel span {
    display: inline-block;
    opacity: 0;
    transform: translateY(4px);
}

#kapitel_transition_overlay.active #kapitel_transition_titel span,
#kapitel_ende_overlay.active #kapitel_ende_titel span {
    animation: kt_word_fade 350ms ease-out forwards;
}

/* Kapitel-Ende-Overlay: blendet ein und bleibt stehen (bis Klick, erneutes Abspielen oder Esc) */
#kapitel_ende_overlay {
    transition: opacity 400ms ease;
}

#kapitel_ende_overlay.active {
    opacity: 1;
}

/* Gruppe aus Link und "Nochmals anschauen". Bekommt per JS rechts Platz für den
   ausgefahrenen Kreis, ist selbst so breit wie die weisse Box. */
#kapitel_ende_gruppe {
    position: relative;
}

/* "Nochmals anschauen" hellgrau unter der weissen Box, mittig zu ihr */
#kapitel_ende_nochmal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: #aaa;
    font-family: reg;
    font-size: var(--normal);
    text-align: center;
    cursor: pointer;
    transition: color 150ms;
}

#kapitel_ende_nochmal:hover {
    color: #fff;
}

/* Link um weisse Box samt Kreis */
#kapitel_ende_link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Weisse Box: "Nächstes Kapitel 1.2" mittelachsig und vertikal mittig
   (Höhe und Innenabstand setzt das JS) */
#kapitel_ende_box {
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kapitel_ende_zeile {
    display: flex;
    align-items: baseline;
}

/* "Nächstes Kapitel 1.2": Nummer steht hier rechts vom Text */
#kapitel_ende_nummer {
    margin-right: 0;
    margin-left: 20px;
}

/* Kreis mit Pfeil, in der Farbe des nächsten Kapitels (inline gesetzt). Liegt wie das
   Video-Quadrat beim Kapitel-Wechsel hinter der weissen Box (rechts bündig) und fährt
   nach rechts raus, mit 16px Abstand. Grösse setzt das JS auf die Höhe der Box. */
#kapitel_ende_pfeil {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: scale 150ms; /* scale statt transform, das gehört der Raus-Animation */
}

#kapitel_ende_overlay.active #kapitel_ende_pfeil {
    animation: kt_pfeil_raus 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}

@keyframes kt_pfeil_raus {
    to { transform: translateX(calc(100% + 16px)); }
}

#kapitel_ende_link:hover #kapitel_ende_pfeil {
    scale: 1.12;
}

/* Video und Steuerleiste dahinter unscharf und dunkler, solange das Ende-Overlay steht */
#video_wrapper iframe,
#mmc_steuerung {
    transition: opacity 0.5s, filter 400ms;
}

body:has(#kapitel_ende_overlay.active) #video_wrapper iframe,
body:has(#kapitel_ende_overlay.active) #mmc_steuerung {
    filter: blur(6px) brightness(0.6);
}

@keyframes kt_word_fade {
    to { opacity: 1; transform: translateY(0); }
}


.content_box_wrapper_grau {
    background-color: #f9f9fb;
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw); ;
    padding-top: 20px;

}

.content_box_wrapper_grau_dunkel {
    background-color: #eeeef1;
}

.content_box_wrapper {
    width: calc(100% - (var(--gutter) * 2));
    padding: 0px 0 30px 0;
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    margin-bottom: 0px;
    margin-top: 0px;

}

/* Kapitel: Shortcuts und Tricks & Tools liegen in #content (selbst schon max. 1300px),
   100% - 2*gutter wäre dort nur 1260px, die Karten rechnen aber mit 1300px/4 bzw. /3.
   Deshalb wie im Lexikon volle 1300px, Seitenabstand erst wenn das Fenster schmaler ist. */
body.kapitel-seite #content .content_box_wrapper {
    width: min(100%, 100vw - (var(--gutter) * 2));
}

.content_box_titel {
    width: 100%;
    padding-bottom: 40px;
    border-top: 0px solid #E2DFD4;
    padding-top: 25px;
    font-size: var(--big);
    margin-bottom: 0px;
    
}

.content_carussel_wrapper {
    width: calc(100vw - 00px);
    margin-left: calc(-1 * max(var(--gutter), (100vw - 1300px) / 2));
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(var(--gutter), calc((100vw - 1300px) / 2));
    display: flex;
    /* ORIGINAL: gap: 15px; */
    gap: 10px; /* TEST 2026-09-09 */
    justify-content: flex-start;
    scroll-behavior: smooth;
}



.content_carussel_wrapper_3, .content_carussel_wrapper_2 {
    width: calc(100vw - 00px);
    padding-bottom: 30px;
    padding-top: 15px;
    margin-top: -15px;
    margin-left: calc(-1 * max(var(--gutter), (100vw - 1300px) / 2));
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(var(--gutter), calc((100vw - 1300px) / 2));
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    scroll-behavior: smooth;
}

.content_carussel_wrapper_3{

} 


.content_carussel_wrapper::-webkit-scrollbar, .content_carussel_wrapper_3::-webkit-scrollbar {
    display: none;
  }


.content_carussel_button {
    height: 40px;
    width: 84px;
    right: 0px;
    bottom: 0px;
    position:absolute;
    z-index: 100;
    display: flex;
    justify-content:space-between
}

/* In der Titel-Zeile: rechts neben "Alle anzeigen", kein Absolute-Positioning */
.content_box_titel_right .content_carussel_button {
    position: static;
    right: auto;
    bottom: auto;
}

.content_carussel_button div {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: #cfcfd2;
    line-height: 40px;
    text-align: center;
    color: black;
    cursor: pointer;
    transition: all 150ms;
}

.content_carussel_button div:hover {
    opacity:0.6;
    transform: scale(1.15);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);    

}

.content_carussel_box_wrapper {
    width: calc(1300px/4 - 7px );
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin-bottom: 20px;
}


.content_carussel_box_wrapper_3 {
    width: calc(1300px/3 - 4px );
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: all 150ms;
}

.content_carussel_box_wrapper_3 .content_carussel_box {
    height: auto;
    aspect-ratio: 876 / 640;
}

/* TEST 2026-09-09: Karten-Hintergrund (umschliesst Video + Text), siehe Rückbau-Hinweis
   oben bei .content_carussel_box. box-sizing:border-box -> die bestehenden width-Formeln
   (1300px/4, /3, /2 weiter oben) bleiben unverändert gültig, das Padding geht vom
   vorhandenen Platz ab statt die Karte zu vergrössern. */
.content_carussel_box_wrapper,
.content_carussel_box_wrapper_3,
.content_carussel_box_wrapper_2 {
    background-color: #f9f9fb; /* TEST 2026-09-09: Standard (auf weißer Sektion) = helles Grau */
    box-sizing: border-box; /* TEST 2026-09-09 */
    padding: 10px; /* TEST 2026-09-09 */
}

.content_box_wrapper_grau .content_carussel_box_wrapper,
.content_box_wrapper_grau_dunkel .content_carussel_box_wrapper,
.content_box_wrapper_grau .content_carussel_box_wrapper_3,
.content_box_wrapper_grau_dunkel .content_carussel_box_wrapper_3,
.content_box_wrapper_grau .content_carussel_box_wrapper_2,
.content_box_wrapper_grau_dunkel .content_carussel_box_wrapper_2 {
    background-color: #fff; /* TEST 2026-09-09: Karte auf grauer Sektion = weiß */
}

.content_box_wrapper[data-typ="hilfe"] .content_carussel_box {
    aspect-ratio: 1 / 1;
}

.content_box_wrapper[data-typ="hilfe"] .content_carussel_box_wrapper_click .clip_progress {
    display: none;
}

.content_box_wrapper[data-typ="hilfe"] .content_carussel_box_wrapper_click:hover video {
    transform: scale(1.05);
}

.content_carussel_box_wrapper_2 {
    width: calc(1300px/2 - 4px );
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;

}

/* Vertiefung (Kapitel-Seite): eigene volle Zeile, Video links / Text rechts, je halbe Breite */
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_box_wrapper_2 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_box_wrapper_2 .content_carussel_box {
    flex: 0 0 calc(1300px/2 - 4px);
    width: auto;
    height: calc(1300px/3 - 4px);
}
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_box_wrapper_2 .content_carussel_box_bottom {
    flex: 0 0 calc(1300px/3 - 4px);
    margin: 0;
    padding-left: 50px; /* TEST 2026-09-09 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 900px) {
    .content_box_wrapper[data-typ="vertiefungen"] .content_carussel_box_wrapper_2 {
        flex-direction: column;
    }
}
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper_3 {
    width: 100%;
    margin-left: 0;
    overflow-x: visible;
    scroll-padding-left: 0;
    scroll-snap-type: none;
}
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper_3::before,
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper_3::after {
    content: none;
}
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_box_titel {
    font-size: var(--bigger);
    line-height: calc(var(--bigger) + 4px);
    margin-bottom: 8px;
    margin-top: 50px; /* TEST 2026-09-09: Titel rechts 50px runtergesetzt */
}

.content_box_wrapper[data-typ="konzepte"] .content_carussel_box_titel {
    font-size: var(--bigger); /* TEST 2026-09-09 */
    line-height: calc(var(--bigger) + 4px); /* TEST 2026-09-09 */
    margin-top: 0; /* TEST 2026-09-09: Basis-margin-top (5px) entfernt */
}

.content_carussel_box_wrapper_click:hover {
    transform: scale(1.02);
    box-shadow: 3px 8px 12px rgba(0,0,0,0.18);    
    z-index: 3;
}

.content_carussel_box_wrapper_click:hover video {
    transform: scale(1.2);
   
}









/* ===== TEST 2026-09-09: Karussell-Karten (Shortcuts/Tricks&Tools/Hilfe/Lexikon/Vertiefungen/Konzepte)
   Hintergrund + Padding + Radius wandern auf den äußeren Karten-Wrapper (umschliesst Video UND
   Text), siehe .content_carussel_box_wrapper(_2/_3)-Regel weiter unten. Die Video-Box hier behält
   bewusst ihren eigenen 30px-Squircle-Radius + overflow:hidden als Maske. Rückbau: alle mit
   "TEST 2026-09-09" markierten Zeilen entfernen bzw. ORIGINAL-Kommentare reaktivieren. ===== */
.content_carussel_box {
    width: 100%;
    height: calc(1270px/4 - 8px );
    position: relative;
    background-color: #F5F5EB;

    z-index: 1;


}


.content_carussel_box.speaking {
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);
    outline: 2px solid rgba(255, 255, 255, 0.4);
}

.content_carussel_box::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 10px 10px 16px -6px rgba(255, 255, 255, 0.22);
    pointer-events: none;
    z-index: 2;
    transition: all 150ms;

  }

/* .content_carussel_box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-bottom: 3px solid rgba(177, 177, 177, 0.04);
    border-right: 3px solid rgba(184, 184, 184, 0.04); 
    border-radius: 20px;
    pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: multiply; 
    z-index: 3;

 }*/


 .content_carussel_box_wrapper_click:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 10px 10px 11px -3px rgba(255, 255, 255, 0.26);
    pointer-events: none;
    z-index: 2;

  }





  .content_carussel_box_wrapper_click {
    transition: all 150ms;
    cursor: pointer;

  }




.content_carussel_box_quadrat {
    transition: all 150ms;

    height: calc(1270px/3 - 8px );

    
}




/* minus 10px gap: sonst stehen bei wenigen Karten (nichts zu scrollen, Scroll Snap greift nicht) alle 10px eingerückt */
.content_carussel_wrapper::before, .content_carussel_wrapper_3::before {
    content: "";
    flex: 0 0 calc(max(var(--gutter), (100vw - 1300px) / 2) - 10px);
  }
  .content_carussel_wrapper::after, .content_carussel_wrapper_2::after, .content_carussel_wrapper_3::after {
    content: "";
    flex: 0 0 calc(max(var(--gutter), (100vw - 1300px) / 2) - 10px);
  }




.save_button {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100px;
    border: 3px solid #888;
    z-index: 5;
    top: 12px;
    right: 12px;
    mix-blend-mode: multiply;
    transition: all 150ms;
}
.save_button:hover {
    background-color: #888 ;
    transform: scale(1.2);
}

.content_carussel_box video {
    width: 100%;
    transition: all 150ms;

}

.clip_progress {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 150px;
    height: 5px;
    z-index: 4;
    overflow: visible;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.4;
    transition: all 150ms;

}

.clip_progress_line {
    fill: none;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    transition: all 150ms;

}

.clip_progress:hover .clip_progress_line {
    stroke-width: 8px;
}

.clip_progress:hover  {
    bottom: 10px;
    opacity: 0.9;

}

.content_carussel_box_bottom {
    /* ORIGINAL: margin: 25px 0 0 0 ; */
    margin: 25px 0 0 10px; /* TEST 2026-09-09: Textblock (Titel/Text) 10px eingerückt */


}




.content_carussel_box_bottom_innen {
    width: calc(100% - 40px);
    position: absolute;
    bottom: 10px;
    left: 25px;
    z-index: 2;
    mix-blend-mode:multiply;
}

.content_carussel_box_kat {
    font-size:  var(--small);
    margin-bottom: 1px;
    color: #a7a7ab;
    font-family: lig;
}

.content_carussel_box_titel {
    margin-top: 5px;
    margin-bottom: 17px;
    width: 100%;
    color: #1d1d1f;
    line-height: 20px;
    font-family: reg;

   
}

.clip-badge-neu {
    display: inline-block;
    font-size: 0.47em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--kapitel-farbe, #2DDD04);
    color: #333;
    mix-blend-mode: multiply;
    padding: 0px 4px;
    border-radius: 100px;
    vertical-align: middle;
    margin-left: 1px;
    font-family: reg;
    line-height: 14px;
    margin-top: -6px;
}

.content_carussel_box_videoplay {
    position: absolute;
    right: 25px;
    bottom: 27px;
    display: flex;
    gap: 8px;
    z-index: 2;

}



.content_carussel_box_videoplay a {
    color: black;
    background-color: #e6e3d9;
    padding: 8px 18px;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.08);
    transition: all 150ms;
    margin-top: 3px;
    margin-bottom: 0;

}

.content_carussel_box_wrapper_click:hover .content_carussel_box_videoplay a {
   transform: scale(1.14);
   box-shadow: 9px 9px 15px rgba(0,0,0,0.1);

}


.content_carussel_box_text {
    width: calc(100% - 30px);
    color: #a7a7ab;
    transition: top 200ms;
    line-height: calc( var(--normal) + 4px) ;
    font-family: lig;

}

.content_carussel_box_text .lex_break_gap {
    display: block;
    height: 8px;
}

.content_carussel_box:hover .content_carussel_box_text{
    top: 30%;
    box-shadow: 0px -20px 25px rgba(27, 13, 1, 0.15);


}

.content_carussel_code_wrapper {
    position: relative;
    background: #ebebeb;
    border-radius: 10px;
    padding: 10px;
    margin-top: 8px;
    width: calc(100% - 10px);
    margin-left: -10px;
    font-family: mono;
    font-size: var(--small);
    line-height: 1.4;
    color: #1d1d1f;
    overflow-x: auto;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    tab-size: 4;
    -moz-tab-size: 4;
}


.hljs {
    background: #ebebeb;
    color: #8f8a8a;
        font-family: mono;

}
.hljs-string { color: #ffa3de; }  /* Orange für Strings */
.hljs-variable { color: #a373ff; }  /* Grün für Variablen */
.hljs-keyword { color: #ffa3de; }  /* Orange für Keywords */
.hljs-number { color: #008CFF; }  /* Blau für Zahlen */
.hljs-title { color: #CEB47C; }  /* Blau für Zahlen */
.hljs-property{ color: #CEB47C; } 
.hljs-comment { color: #00cf2d; } 


.content_carussel_code_wrapper pre {
    margin: 0;
    padding: 0;
}

.content_carussel_code_wrapper code {
    display: block;
    word-break: break-word;
    white-space: pre-wrap;
}

.expression_copy_btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 41px;
    height: 41px;
    background: #cfcfd2;
    border-radius: 60px;
    border: 0px solid;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    corner-shape: squircle;
    color: black;
    font-size: 16px;
    transition: all 180ms;
}

.expression_copy_btn:hover {
    transform: scale(1.03);
   opacity: 0.6;
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);
}

.expression_copy_btn.copied {
    background: #000;
    color: #00cf2d;
    border-color: #000;
}

.expression_copy_icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}






#lexikon_wrap {
	background:white;
	position:relative;
	width:100%;
	z-index:2
}

/* === Lexikon Sidenav === */
#lex_sidenav {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #fff;
    border-radius: 30px;
    padding: 10px;
    box-shadow: 4px 4px 20px rgba(9,4,0,0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
}

#lex_sidenav.lex_sidenav_visible {
    opacity: 1;
    pointer-events: auto;
}

.lex_sidenav_item {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #666;
    text-decoration: none;
    transition: background-color 150ms, color 150ms;
    padding: 5px 0;
}

.lex_sidenav_item img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 150ms;
}

.lex_sidenav_item:hover {
    color: #000;
}

.lex_sidenav_item:hover img {
    transform: scale(1.1);
}

.lex_sidenav_item_hidden {
    display: none;
}

.lex_sidenav_label {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 24px;
    transform: translateY(-50%) translateX(-2px);
    color: #000;
    font-size: var(--normal);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms, transform 150ms;
}

.lex_sidenav_item:hover .lex_sidenav_label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 900px) {
    #lex_sidenav {
        display: none;
    }
}

#page_hero_wrap {
    background-color: #eee;
    width: 100vw;
    height: 650px;
	overflow:hidden;
	position:relative;
	z-index: 0;
}

#page_hero_wrap video {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

#page_hero_titelwrap {
    width: 100vw;
    text-align: center;
    position: relative;
    top: 270px;
}
#page_hero_titel {
	font-family:bol;
  font-size: 5vw;
	line-height:calc( 5vw - 1px)
}
#page_hero_sub {
    margin-top: 20px;
    font-size: var(--bigger);
    opacity: 0.4;
    padding: 0 35%;

}


#page_hero_btn {
    margin-top: 20px;
}
#page_hero_btn a {
    background: #cfcfd2;
    border: none;
    padding: 14px 18px;
    font-size: var(--normal);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms;
    color: black;
    text-decoration: none;
    display: inline-block;
}
#page_hero_btn a:hover {
    opacity: 0.6;
    transform: scale(1.03);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);
}


#profil_hero_wrap {
    background-color: white;
    width: 100vw;
    height: 450px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

#profil_hero_titelwrap {
    width: 100vw;
    text-align: center;
    position: relative;
    top: 170px;
    color: black;
    z-index: 1;
}
#profil_hero_titel {
    font-size: 5vw;
    line-height: calc(5vw - 1px);
	font-family:bol
}
#profil_hero_sub {
    margin-top: 20px;
    font-size: var(--normal);
    opacity: 0.85;
}
#profil_hero_wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#profil_hero_sub a, .page_hero_btn {
       background: #cfcfd2;
    border: none;
    padding: 14px 18px;
    font-size: var(--normal);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms;
    flex-shrink: 0;
    color: black;
    text-decoration: none;
    margin-bottom: 8px;
    transition: all 150ms;
    display: inline-block;

}


#profil_hero_sub a:hover {
          opacity:0.6;
    transform: scale(1.03);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);   
}



#profil_content_wrap {
    background-color: #eee;
    width: 100vw;
    min-height: calc(100vh - 340px);
	padding: 30px 0 80px;
	position: relative;
	z-index: 1;
}



#profil_content_wrap_titel {
    font-size: var(--big);
    color: #bbb;
    text-align: center;
    padding: 80px 0 50px;
}

#profil_keine_kurse {
    text-align: center;
    font-size: var(--bigger);
}

#profil_mehr_kurse {
    text-align: center;
    margin-top: 100px;
}
#profil_mehr_kurse_text {
    font-size: var(--normal);
    color: #bbb;
    margin-bottom: 15px;
}
#profil_mehr_kurse_btn {
    display: inline-block;
    background-color: #cfcfd2;
    color: black;
    padding: 14px 28px;
    border-radius: 200px;
    text-decoration: none;
    font-size: var(--normal);
    font-family: reg;
    transition: opacity 150ms, transform 150ms;
    corner-shape: squircle;
}
#profil_mehr_kurse_btn:hover {
    opacity: 0.7;
    transform: scale(1.06);
}
#tools_content_wrap {
    background-color: white;
    width: 100vw;
    min-height: calc(100vh - 650px);
	padding: 55px 0;
	position: relative;
	z-index: 1;
}

.tools_grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	max-width: 1300px;
	margin: 0 auto;
}

.tools_grid .profil_kurs {
	margin: 0;
}

.profil_kurs {
	background:white;
	width:980px;
	height:400px;
	margin:55px auto;
	display:flex;
	flex-direction:row;
	overflow:hidden;
	cursor:pointer;
	box-shadow:6px 6px 30px rgba(0,0,0,0.1);
    transition: all 150ms;

}

.profil_kurs:hover {
    transform: scale(1.01);
	box-shadow:12px 12px 30px rgba(0,0,0,0.14)

}

.profil_kurs video {
	order:2;
	width:calc(50% - 30px);
	height:calc(100% - 30px);
	margin:15px;
	object-fit:cover;
	flex-shrink:0;
}
.profil_kurs_sub {
	order:1;
	background:white;
	padding:30px;
	width:60%;
	height:100%;
	box-sizing:border-box;
	overflow:hidden;
	display:flex;
	flex-direction:column;

}

.profil_kurs_btnbeschr {
    	font-size:var(--small);
        color: #cfcfd2;
        margin: 5px 0;


}

.profil_kurs_buttons {
	margin-top:auto;
}

.profil_kurs_titel {
	font-size:var(--bigger);
	opacity:1;
    margin-bottom: 20px;
    hyphens: none;
}

.profil_kurs_text {
	font-size:var(--normal);
	color: #cfcfd2;
	margin-bottom: 20px;
}


.profil_kurs_sub a,
.profil_kurs_sub .content_carussel_box_wrapper_click {
       background: #cfcfd2;
    border: none;
    padding: 14px 18px;
    font-size: var(--normal);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms;
    flex-shrink: 0;
    color: black;
    text-decoration: none;
    margin-bottom: 8px;
    transition: all 150ms;
    display: inline-flex;
    align-items: center;
    gap: 8px;

}


.profil_kurs_sub .navlinks_4dots {
    width: 20px;
}

.profil_kurs_arrow_down {
    font-size: var(--small);
}

.profil_kurs_sub a.profil_kurs_kapitel {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.profil_kurs_nr {
    font-family: mono;
    letter-spacing: -0.15em;
}

.profil_kurs_sub a:hover,
.profil_kurs_sub .content_carussel_box_wrapper_click:hover {
          opacity:0.6;
    transform: scale(1.03);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);
}





















/* ===== SCROLL WRAPPER ===== */

body.kapitel-seite #section_wrapper {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100vh;
  width: 100%;
}

body.kapitel-seite #content {
  margin-bottom: 0;
}

body.kapitel-seite .content_box_wrapper:last-of-type {
  padding-bottom: 90px; /* TEST 2026-09-09: letztes Karussell im Kapitel */
}


/* ===== HERO ===== */

#hero_section {
  height: 114vh;
  position: relative;
  background: white;
  /* Karussell Karten ragen seitlich raus; iOS Safari ignoriert overflow-x am body */
  overflow-x: clip;
}

#hero_title {
  position: absolute;
  top: calc(76vh - 377px);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

#hero_main_title {
  font-family: med;
  font-size: 5vw;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -1px;
      font-weight: bold;

}

#hero_sub_title {
  font-family: lig;
  font-size: var(--bigger);
  color: #a7a7ab;
  margin-top: 14px;
}

#cards_container {
  position: absolute;
  top: calc(90vh - 240px);
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  height: 480px;
}

.hero_card {
  position: absolute;
  width: 390px;
  height: 480px;
  border-radius: 30px;
  background: var(--c);
  will-change: transform;
  overflow: hidden;
}

.hero_card video {
    height: 100%;
    pointer-events: none;
}

/* Glanz oben links wie bei den Lexikon-Clips (.content_carussel_box::after) */
.hero_card::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 10px 10px 16px -6px rgba(255, 255, 255, 0.22);
    pointer-events: none;
    z-index: 2;
}


/* ===== CAROUSEL ===== */

#carousel_section {
  background: white;
  padding: 60px 0 80px;
}

#cards_carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  scroll-behavior: smooth;
}
#cards_carousel:active { cursor: grabbing; }
#cards_carousel::-webkit-scrollbar { display: none; }
#cards_carousel::before,
#cards_carousel::after {
  content: '';
  flex: 0 0 calc((100vw - var(--max)) / 2);
}

.ccard {
  width: 260px;
  height: 320px;
  border-radius: 30px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin-bottom: 20px;
}


/* ===== CONTENT SECTIONS ===== */

.v_section {
  padding: 80px 0 0px;
  background: white;
}

.v_section_grey { background: #f9f9fb; }

.v_text_narrow {
  max-width: 760px;
  margin: 0 auto 0px;
  padding: 0 20px;
}

.v_intro_text {
  font-family: lig;
  font-size: var(--big);
  color: #a7a7ab;
  line-height: calc(var(--big) + 1px);
  text-align: center;
  margin: 0;
}

.v_section_bold {
  font-family: reg;
  font-size: 22px;
  color: #1d1d1f;
  line-height: 32px;
  margin: 0;
}

.v_body_text {
  font-family: lig;
  font-size: var(--normal);
  color: #a7a7ab;
  line-height: 28px;
  margin: 0;
}




/* 2-col und 3-col */

.v_two_col {
  display: flex;
  gap: 45px;
  max-width: 1300px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.v_three_col {
  display: flex;
  gap: 45px;
  max-width: 1300px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.v_item { flex: 1; }

.v_image_box {
  width: 100%;
  aspect-ratio: 1.5;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
}

.v_image_box video {
    width: 100%;
}


.v_image_box_3 {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
}

.v_item_label {
  font-family: lig;
  font-size: var(--bigger);
  text-align: center;
  padding-left: 5px;
}


/* Icons */

.v_icon_tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 55px 85px;
  border-color: transparent transparent transparent currentColor;
}

.v_icon_circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  opacity: 0.8;
}

.v_icon_diamond {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  transform: rotate(45deg);
}

.v_section:last-child { padding-bottom: 140px; }











#lex_filter_area {
    width: 100%;
    max-width: 1300px;
    margin: 40px auto 50px auto;
    padding: 10px;
    background: #f9f9fb;
        box-shadow: 8px 8px 12px rgba(0,0,0,0.045);

}

#lexikon_filter_bar {
	display:flex;
	width: 100%;
    padding: 0;
    position: relative;
    gap:10px;


}

.lex_hidden { display: none !important; }

#lex_reset_btn {
	aspect-ratio: 1;
	align-self: stretch;
	background: #cfcfd2;
	color: black;
    opacity: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--bigger);
	transition: background 200ms, color 200ms, opacity 200ms;
	flex-shrink: 0;
	user-select: none;
            width: 80px;
            padding: 0 3px;
            text-align: center;
            position: relative;

}

#lex_reset_btn::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 10px 10px 16px -6px rgba(255, 255, 255, 0.52);
    pointer-events: none;
}



#lex_reset_btn.dimmed {
	background: #cfcfd2;
	color: black;
	opacity: 1
}

.lex_filter_btn  {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	background:#cfcfd2;
	padding: 25px 40px;
	font-size:var(--bigger);
	cursor: pointer;
        color:black;
        text-align: center;
        position: relative;


	transition: all 150ms;
}

.lex_filter_btn::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 10px 10px 16px -6px rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.lex_filter_btn:hover, #lex_reset_btn:hover {
       opacity:0.6;
    transform: scale(1.03);
}

.lex_filter_btn.active {
	opacity: 1;
	background: black;
	color: white;
}

.lex_filter_btn.active input {
	color: white !important;
}

.lex_filter_btn.active #lex_suche::placeholder {
	color: white;
}

#lex_suche_wrap {
	position: relative;
	padding: 0;
}

#lex_suche {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	padding: 25px 40px;
	border-width:0;
	border-style: none;
	border-radius: 30px;
	font-size:var(--bigger);
	background:transparent;
	width:100%;
	height: 100%;
	text-align: center;
	color:black;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

#lex_suche:focus {
	outline: none;
	box-shadow: none;
}

#lex_suche:-webkit-autofill,
#lex_suche:-webkit-autofill:hover,
#lex_suche:-webkit-autofill:focus,
#lex_suche:-webkit-autofill:active {
	border-radius: 30px;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px transparent inset;
	box-shadow: 0 0 0px 1000px transparent inset;
	transition: background-color 9999s ease-in-out 0s;
}

.lex_filter_btn input {
	color:black !important;
}

#lex_suche::placeholder {
	color: black;
	opacity: 1;
}

/* Beim Reinklicken "Suche" ausblenden, beim Wegklicken (leeres Feld) wieder zeigen */
#lex_suche:focus::placeholder,
.lex_filter_btn.active #lex_suche:focus::placeholder {
	color: transparent;
}

.lex_filter_gruppe {
    min-width: 0;
}

.lex_filter_grid_3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: column;
    column-gap: 10px;
    row-gap: 10px;
    margin-top: 20px;
    min-width: 0;
}

.lex_filter_item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
    font-size: var(--normal);
    text-decoration: none;
    color: #898989;
    background: #eaeaee;
    padding: 10px 18px;
    transition: all 150ms;
}

.lex_filter_item:hover {
    opacity: 0.6;
    transform: scale(1.03);
}

.lex_filter_item.active {
    background: black;
    color: white;
}

.lex_filter_item_dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lex_filter_dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

#lex_suche_info {
    width: 100%;
    margin: 20px 0 10px 0;
    padding: 20px;
    font-size: var(--normal);
    color: #1d1d1f;
    text-align: center;
    box-sizing: border-box;
    white-space: pre-line;
}

.lex_suche_info_bigger {
    font-size: var(--bigger);
}

.lex_suche_info_grau {
    color: #999999;
}

#lex_filter_dropdown {
    width: 100%;
    padding: 30px 20px 10px 20px;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;

}



/* Titel-Zeile mit "Alle anzeigen"-Button */
.content_box_titel_row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-bottom: 30px;
    padding-top: 20px;
    margin-bottom: 0px;
}

.content_box_titel_row .content_box_titel {
    padding-bottom: 0;
    margin-bottom: 0;
    width: auto;
}

.content_box_titel_right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.content_box_count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--normal);
    color: #cfcfd2;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.lex_expand_btn {
    background: #cfcfd2;
    height: 40px;
    border: none;
    padding: 8px 18px;
    font-size: var(--normal);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms;
    flex-shrink: 0;
    color: black;
}

.lex_expand_btn:hover {
    opacity:0.6;
    transform: scale(1.05);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);   
}

.lex_expand_btn_bottom {
    display: none;
    margin-top: 30px;
}

.content_carussel_wrapper.grid-expanded ~ .lex_expand_btn_bottom {
        display: flex;
    justify-self: center;
}

/* Grid-Expanded-Zustand: alle Karten als Grid anzeigen */
.content_carussel_wrapper.grid-expanded {
    display: grid;
    overflow-x: visible;
    width: 100%;
    margin-left: 0;
    scroll-snap-type: none;
    /* ORIGINAL: gap: 15px; */
    gap: 10px; /* TEST 2026-09-09 */
}

.content_carussel_wrapper.grid-expanded::before,
.content_carussel_wrapper.grid-expanded::after {
    display: none;
}

.content_carussel_wrapper.grid-expanded .content_carussel_box_wrapper,
.content_carussel_wrapper.grid-expanded .content_carussel_box_wrapper_3,
.content_carussel_wrapper.grid-expanded .content_carussel_box_wrapper_2 {
    width: 100%;
    flex: none;
    scroll-snap-align: none;
}

/* Spaltenanzahl passend zur Kartenbreite je Kategorie */
.content_box_wrapper[data-typ="shortcuts"] .content_carussel_wrapper.grid-expanded {
    grid-template-columns: repeat(4, 1fr);
}
.content_box_wrapper[data-typ="trickstools"] .content_carussel_wrapper.grid-expanded,
.content_box_wrapper[data-typ="hilfe"] .content_carussel_wrapper.grid-expanded,
.content_box_wrapper[data-typ="glossar"] .content_carussel_wrapper.grid-expanded,
.content_box_wrapper[data-typ="expressions"] .content_carussel_wrapper.grid-expanded {
    grid-template-columns: repeat(3, 1fr);
}
.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper.grid-expanded,
.content_box_wrapper[data-typ="konzepte"] .content_carussel_wrapper.grid-expanded {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .content_box_wrapper[data-typ="shortcuts"] .content_carussel_wrapper.grid-expanded,
    .content_box_wrapper[data-typ="trickstools"] .content_carussel_wrapper.grid-expanded,
    .content_box_wrapper[data-typ="hilfe"] .content_carussel_wrapper.grid-expanded,
    .content_box_wrapper[data-typ="glossar"] .content_carussel_wrapper.grid-expanded,
    .content_box_wrapper[data-typ="expressions"] .content_carussel_wrapper.grid-expanded {
        grid-template-columns: repeat(2, 1fr);
    }
    .content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper.grid-expanded,
    .content_box_wrapper[data-typ="konzepte"] .content_carussel_wrapper.grid-expanded {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .content_carussel_wrapper.grid-expanded {
        grid-template-columns: 1fr;
    }
}

/* content_carussel_wrapper_3 grid-expanded (Kapitel: Vertiefungen) */
.content_carussel_wrapper_3.grid-expanded {
    display: grid;
    overflow-x: visible;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    scroll-snap-type: none;
    /* ORIGINAL: gap: 15px; */
    gap: 10px; /* TEST 2026-09-09 */
}

.content_carussel_wrapper_3.grid-expanded::before {
    display: none;
}

.content_carussel_wrapper_3.grid-expanded .content_carussel_box_wrapper,
.content_carussel_wrapper_3.grid-expanded .content_carussel_box_wrapper_3,
.content_carussel_wrapper_3.grid-expanded .content_carussel_box_wrapper_2 {
    width: 100%;
    flex: none;
    scroll-snap-align: none;
}

.content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper_3.grid-expanded {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .content_box_wrapper[data-typ="vertiefungen"] .content_carussel_wrapper_3.grid-expanded {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .content_carussel_wrapper_3.grid-expanded {
        grid-template-columns: 1fr;
    }
}

/* Prev/Next-Pfeile ausblenden wenn Sektion expanded */
.content_carussel_wrapper.grid-expanded ~ .content_carussel_button,
.content_carussel_wrapper_3.grid-expanded ~ .content_carussel_button,
.content_box_wrapper:has(.content_carussel_wrapper.grid-expanded) .content_carussel_button,
.content_box_wrapper:has(.content_carussel_wrapper_3.grid-expanded) .content_carussel_button {
    display: none;
}

.lex_placeholder {
	    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 24px;
	opacity:0.6;
	width:40px;
}
.lex_placeholder video,
.content_carussel_box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clip_loading_anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.3s ease;
}
.content_carussel_box.clip_loaded .clip_loading_anim {
    opacity: 0;
    pointer-events: none;
}
.content_carussel_box_text.gesperrt {
    background-color: #f1f1f1 !important;
    /* Normale Clip-Texte sind 30px schmaler + Bottom ist 10px eingerückt –
       der graue Block soll bündig mit dem Video darüber sein */
    width: auto;
    margin-left: -10px;
}

/* Gesperrte Karte als Spalte: grauer Block füllt die volle Texthöhe der Reihe */
.lex_clip:has(> .content_carussel_box_bottom.gesperrt) {
    display: flex;
    flex-direction: column;
}
.lex_clip:has(> .content_carussel_box_bottom.gesperrt) > .content_carussel_box {
    flex-shrink: 0;
}

.content_carussel_box_bottom.gesperrt {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content_carussel_box_bottom.gesperrt a{
    color:#00cf2d;
	text-decoration:none;
}

.content_carussel_box_bottom.gesperrt a:hover{
    opacity:0.4;
}

.content_carussel_box_text.gesperrt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #eee !important;
    min-height: 100px;
    gap: 4px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.save_button.saved {
    background-color: #888;
}










#kurs_video_wrap {
    width: 100%;
    background: white;
    position: relative;
    z-index: -1;
}

#kurs_video_wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 460px;
    background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
}


#kurs_titel_hero {
    position: absolute;
    bottom: 180px;
    left: 0;
    right: 0;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    z-index: 2;
}

#kurs_titel_hero_inner {
    display: block;
    max-width: 50%;
    font-family: bol;
    font-size: var(--verybig);
    line-height: 1.05;
    text-align: left;
    color: #fff;
    text-shadow: 3px 4px 20px rgba(0,0,0,0.2);
}

#kurs_inhalt_wrap {
    background: #fff;
    padding: 0 20px 30px 20px;
}

#kurs_kapitel_grid {
    display: flex;
    gap: 40px;
    max-width: 1300px;
    margin: 40px auto 80px auto;
}

.kurs_spalte {
    flex: 1;
    min-width: 0;
}

.kurs_gruppe {
    margin-bottom: 40px;
}


.kurs_gruppe_titel {
    display: flex;
    align-items: center;
    gap: 44px;
    margin-left: 17px;
    font-size: var(--bigger);
    font-family: reg;
    margin-bottom: 15px;
}

.kurs_gruppe_kreis {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kurs_kapitel_item {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 8px;
    padding: 14px 18px;
    background: #f9f9fb;
    font-size: var(--normal);
    transition: opacity 150ms, transform 150ms;
    cursor: pointer;
}

.kurs_kapitel_item:hover {
    opacity: 0.7;
    transform: scale(1.01);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);
}

.kurs_kapitel_nr {
    font-family: mono;
    flex-shrink: 0;
    width: 32px;
    font-size: var(--normal);
}

.kurs_kapitel_item.gesperrt {
    opacity: 0.3;
}

/* Gesperrtes Kapitel angeklickt → "Nein"-Wackeln */
.kurs_kapitel_item.gesperrt.kurs_wackeln {
    animation: kurs_wackeln 450ms ease-in-out;
}

@keyframes kurs_wackeln {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-8px); }
    35%      { transform: translateX(7px); }
    55%      { transform: translateX(-5px); }
    75%      { transform: translateX(3px); }
}

.kurs_schloss {
    height: 1em;
    width: auto;
    vertical-align: -0.1em;
    margin-right: 4px;
}

/* Kapitel-Menü: gleiches Schloss, aber als Maske in Textfarbe */
.nav_schloss {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    margin-right: 4px;
    background-color: currentColor;
    -webkit-mask: url(https://motionmaster.club/wp-content/uploads/2026/06/schloss2.png) center / contain no-repeat;
    mask: url(https://motionmaster.club/wp-content/uploads/2026/06/schloss2.png) center / contain no-repeat;
}

/* Schloss wie ein Aufzählungszeichen: bei zwei Zeilen bleibt der Text bündig */
.nav_gesperrt {
    display: block;
    padding-left: calc(1em + 6px);
    text-indent: calc(-1em - 6px);
}
.nav_gesperrt .nav_schloss,
.nav_gesperrt .kurs_schloss {
    width: 1em;
    margin-right: 6px;
}

.kurs_kapitel_item a,
.singlekurs_weiter_btn {
    transition: opacity 150ms, transform 150ms;
      transition: all 150ms;

}

.singlekurs_weiter_btn:hover {
    opacity: 0.7;
    transform: scale(1.01);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);   }

.kurs_kapitel_item a {
    text-decoration: none;
    color: #000;
    font-size: var(--normal);
}

.kurs_kapitel_dauer {
    margin-left: auto;
    font-family: mono;
    font-size: var(--small);
    color: #B3B3B3;
    white-space: nowrap;
}




#kurs_video_inner {
    margin: 0;
    position: relative;
}

#kurs_video_inner video {
    width: 100%;
    display: block;
    /* Höhe schon vor dem Laden reservieren, sonst springt der Inhalt beim Laden nach unten */
    aspect-ratio: 5 / 2;
    height: auto;
    object-fit: cover;
}

/* Kapitel Video: grosser Play Button in der Mitte, bis das Video zum ersten Mal läuft.
   Kapitelfarbe und Play Zeichen wie #mmc_play_btn unten links. Erst sichtbar (.mmc_start_play_da),
   wenn das Kapitel Overlay am Anfang durch ist (per JS in single-kapitel.php). */
#mmc_start_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 84px;
    padding: 0;
    border: 0;
    background-color: var(--kapitel-farbe, #2DDD04);
    color: #262626;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: transform 150ms, opacity 300ms, box-shadow 150ms;
    --squircle-radius: 16px;
    --squircle-radius-boost: 40px;
    border-radius: var(--squircle-radius);
}

#mmc_start_play svg {
    display: block;
}

#mmc_start_play.mmc_start_play_da {
    opacity: 1;
    pointer-events: auto;
}

#mmc_start_play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.26);
}

#mmc_start_play.mmc_start_play_weg {
    opacity: 0;
    pointer-events: none;
}

.singlekurs_ansprache {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 1300px;
	margin: 0 auto;
	padding: 30px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	z-index: 2;
}

.singlekurs_ansprache_ubersichttitel{
	font-size: var(--big);
	color: #bbb;
	text-align: center;
	padding: 80px 0 50px;
}

.singlekurs_ansprache_text {
	max-width: 50%;
	color: #ccc;
	font-size: var(--bigger);
	line-height: 1.18;
}

.singlekurs_name {
	color: #fff;
	font-weight: bold;
}

.singlekurs_ansprache_button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
}

.singlekurs_weiter_label {
	color: #ccc;
	font-size: var(--normal);
}

.singlekurs_weiter_btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 100px;
	color: #000;
	text-decoration: none;
	font-size: var(--normal);
	font-weight: bold;
	white-space: nowrap;
}



















/* === Impressum & Datenschutz === */

#impressum_wrap {
    background-color: #ffffff;
    min-height: calc(100vh - 60px);
    padding: 80px 20px 120px;
}

#impressum_inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.impressum_col {
    flex: 1;
    min-width: 0;
}

.impressum_col_titel {
    font-family: reg;
    font-size: var(--big);
    line-height: 1.05;
    margin: 0 0 60px 0;
    font-weight: normal;
}

.impressum_adresse {
    font-family: reg;
    font-size: var(--normal);
    color: #0066FF;
    line-height: calc(var(--normal) + 4px);
    margin: 0 0 50px 0;
}

.impressum_subtitel {
    font-family: reg;
    font-size: var(--normal);
    font-weight: normal;
    margin: 0 0 8px 0;
}

.impressum_text {
    font-family: lig;
    font-size: var(--normal);
    color: #999999;
    line-height: calc(var(--normal) + 4px);
    margin: 0 0 40px 0;
}

/* ============================== */

.pmpro_card {
	background-color:#f1f0f0 !important;
    box-shadow: 0 0 0 transparent !important;
    margin: 0  !important;
    padding: 0 !important;
    border-width: 0px  !important;
     font-size: var(--normal)  !important;
    font-family: reg  !important;
    color: #262626

};

.promo .pmpro_card_content {
    padding: 0 !important;
    margin: 0  !important;

}

.pmpro_section #loginform .input {
    border-width:0 !important ;
}
.pmpro_form_input {
	border-width:0 !important
}

.pmpro_btn-submit-update-profile {
	background-color:#00cf2d !important;
		border-width:0 !important;
	color:black !important;

}

.pmpro_card_actions {
    background-color: transparent !important;
    opacity: 0.4 ;
}
.pmpro_btn-submit-update-profile:hover {
	opacity:0.4
}

.pmpro_form_input, .pmpro_form_input-text, #first_name {
    width: 100% !important;
}
.button, .button-primary {
        background-color: #2DDD04 !important;
        border-width: 0 !important;
    color: white !important;
    padding: 14px 28px  !important;
    border-radius: 200px  !important;
    text-decoration: none ;
    font-size: var(--normal)  !important;
    font-family: reg  !important;
    transition: opacity 150ms, transform 150ms, box-shadow 150ms;
    margin-bottom: 20px;
    corner-shape: squircle  !important;
}

.button:hover, .button-primary:hover {
    opacity:0.6;
    transform: scale(1.05);
    box-shadow: 6px 8px 12px rgba(0,0,0,0.1);
}

.button-secondary {
    background-color: #888 !important;
}

.login-remember {
    opacity: 0.4;
}
.pmpro_card_actions {
    padding: 0 !important;
}
.pmpro_actions_nav {
    color: black !important;
}
/* ============================== */
/* Newsletter */
/* ============================== */

/* Styles für die Newsletter-Seite stehen in page-newsletter.php (Karten-Layout wie Login/Checkout) */

#mmc_footer {
    background: #F9F8F6;
    padding: 60px 20px 20px;
    display: flex;
    flex-direction: column;
    z-index: 111;
    position: relative;
}

#mmc_footer_brand {
    text-align: center;
    font-size: clamp(48px, 5vw, 100px);
    /* Echter Bold Schnitt statt künstlichem Fett, gilt so auf allen Seiten */
    font-family: bol;
    font-weight: normal;
    font-synthesis: none;
    color: #000;
    line-height: 1;
    padding-bottom: 68px;
}

#mmc_footer_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mmc_footer_tagline {
    font-size: 13px;
    color: #c0c0c0;
}

/* Easteregg: Hover auf "We like to move it" lässt den Schriftzug tanzen (Script in footer.php) */
.mmc_footer_wort {
    display: inline-block;
    white-space: nowrap;
}
.mmc_footer_wort span {
    display: inline-block;
    --r: 8deg;
}
.mmc_footer_wort span:nth-child(even) {
    --r: -8deg;
}
#mmc_footer_brand.mmc_footer_tanzt .mmc_footer_wort span {
    animation: mmc_footer_tanz 520ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 35ms) 3;
}
@keyframes mmc_footer_tanz {
    0%   { transform: translateY(0) rotate(0) scale(1, 1); margin: 0; }
    15%  { transform: translateY(0.04em) rotate(0) scale(1.08, 0.88); margin: 0 0.03em; }
    45%  { transform: translateY(-0.28em) rotate(var(--r)) scale(1.3, 1.45); margin: 0 0.12em; }
    75%  { transform: translateY(0.03em) rotate(calc(var(--r) * -0.5)) scale(1.1, 1); margin: 0 0.04em; }
    100% { transform: translateY(0) rotate(0) scale(1, 1); margin: 0; }
}
#mmc_footer_tagline:hover {
    animation: mmc_footer_blinken 360ms steps(1) infinite;
}
@keyframes mmc_footer_blinken {
    0%   { color: #00cf2d; }
    33%  { color: #ffa3de; }
    66%  { color: #ff2a00; }
}
/* Zweites Easteregg: Hover auf "Copyright" dreht die Buchstaben von rechts nach links */
#mmc_footer_brand.mmc_footer_dreht .mmc_footer_wort span {
    animation: mmc_footer_dreh 700ms ease-in-out calc((var(--n) - 1 - var(--i)) * 40ms) 2;
}
@keyframes mmc_footer_dreh {
    0%   { transform: perspective(400px) translateY(0) rotateY(0) scale(1); margin: 0; }
    50%  { transform: perspective(400px) translateY(-0.15em) rotateY(180deg) scale(1.3); margin: 0 0.12em; }
    100% { transform: perspective(400px) translateY(0) rotateY(360deg) scale(1); margin: 0; }
}
#mmc_footer_copy:hover {
    animation: mmc_footer_blinken_copy 240ms steps(1) infinite;
}
/* Lustige Mauszeiger auf beiden Eastereggs: Tänzer bzw. Wirbel (Emoji als SVG) */
#mmc_footer_tagline {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%95%BA%3C/text%3E%3C/svg%3E") 16 16, pointer;
}
#mmc_footer_copy {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%8C%80%3C/text%3E%3C/svg%3E") 16 16, pointer;
}
@keyframes mmc_footer_blinken_copy {
    0%   { color: #0066ff; }
    50%  { color: #c0c0c0; }
}
@media (prefers-reduced-motion: reduce) {
    #mmc_footer_brand.mmc_footer_tanzt .mmc_footer_wort span,
    #mmc_footer_brand.mmc_footer_dreht .mmc_footer_wort span { animation: none; }
    #mmc_footer_tagline:hover { animation: none; color: #00cf2d; }
    #mmc_footer_copy:hover { animation: none; color: #0066ff; }
}

#mmc_footer_links {
    display: flex;
    gap: 28px;
}

#mmc_footer_links a {
    text-decoration: none;
    font-size: 14px;
    transition: all 150ms;
}

#mmc_footer_links a[href="/instagram"]       { color: #00cf2d; }
#mmc_footer_links a[href="/newsletter"]   { color: #ffa3de; }
#mmc_footer_links a[href="/about"] { color: #ff2a00; }
#mmc_footer_links a[href="/AGB"] { color: #0066ff; }
#mmc_footer_links a[href="/impressumdaten"] { color: #c0c0c0; }


#mmc_footer_links a:hover {
    opacity: 0.6;
    transform: translateY(-3px);
}

#mmc_footer_copy {
    font-size: 13px;
    color: #c0c0c0;
}


.kurs_hilfe_wrap {
    background: #f2f2f2;
    padding-bottom: 60px;
}

.kurs_hilfe_inner {
    max-width: 1300px;
    margin: 0 auto;
    padding-top: 40px;
    position: relative;
}

.kurs_hilfe_titel_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.kurs_hilfe_titel_row .content_carussel_button {
    position: static;
    right: auto;
    bottom: auto;
    flex-shrink: 0;
}

.kurs_hilfe_text {
    padding: 0 20px;
    font-size: var(--bigger);
    line-height: 1.1;
    margin-top: 10px;
    margin-bottom: 70px;
    max-width: 50%;
    color:#ccc;
}

.kurs_hilfe_text_dunkel {
    color: #000;
}

.kurs_hilfe_carussel .content_carussel_box {
    height: auto;
    aspect-ratio: 1 / 1;
}


/* === Alle Kurse Seite === */

#allekurse_section {
    width: 100%;
    background-color: #f9f9f9;
    padding: 0 0 80px;
    position: relative;
    z-index: 1;
}

#allekurse_section_titel {
    font-size: var(--big);
    color: #bbb;
    text-align: center;
    padding: 80px 0 50px;
}

#cta_register_section {
    width: 100%;
    background-color: #2DDD04;
    font-size: var(--big);
    line-height: calc(var(--big) + 1px);
    color: #000;
    text-align: center;
    padding: 80px 0 140px;
}

#cta_register_section_inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Subtitel im CTA-Bereich grau */
#cta_register_section_inner .v_section_bold {
    opacity: 0.4;
    margin-bottom: 80px;
}

.cta_fact_row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 40px;
    row-gap: 20px;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 20px;
}

.cta_fact_item {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

/* 1. Reihe 3 Items, 2. Reihe 2 Items zentriert (6er-Raster, je 2 Spalten) */
.cta_fact_item {
    grid-column: span 2;
}
.cta_fact_item:nth-child(4) {
    grid-column: 2 / span 2;
}

@media (max-width: 900px) {
    .cta_fact_row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 840px;
    }
    .cta_fact_item,
    .cta_fact_item:nth-child(4) {
        grid-column: auto;
    }
    .cta_fact_item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

.cta_fact_icon_video {
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    margin: 0;
}

.cta_fact_icon_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cta_fact_text {
    font-size: var(--normal);
    font-family: reg;
    line-height: calc(var(--normal) + 6px);
    color: #000;
    text-align: left;
    max-width: 250px;
}

.cta_fact_text_wrap {
    position: relative;
    display: inline-block;
    text-align: left;
}

.cta_fact_text_soon {
    color: rgba(0,0,0,0.35);
}

.cta_fact_text_wrap .navunten_badge_soon {
    top: -6px;
    right: -20px;
}

.cta_register_btn {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 6px 24px;
    border-radius: 200px;
    text-decoration: none;
    font-size: var(--normal);
    font-family: reg;
    transition: opacity 150ms, transform 150ms;
    corner-shape: squircle;
}

.cta_register_btn:hover {
    opacity: 0.7;
    transform: scale(1.06);
}

@media (max-width: 500px) {
    .cta_fact_item { gap: 14px; }
    .cta_fact_icon_video { width: 64px; height: 64px; }
}

.allekurse_kurs_container {
    width: 980px;
    max-width: calc(100% - 40px);
    margin: 40px auto 55px auto;
    background: white;
    display: flex;
    overflow: hidden;
    box-shadow: 7px 7px 20px rgba(0,0,0,0.06);
        transition:  all 220ms;


}
.allekurse_kurs_container:hover {

        transform: scale(1.005);
            box-shadow: 12px 17px 22px rgba(0,0,0,0.07);

}

.allekurse_kurs_links {
    flex: 1;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.allekurse_kurs_titel {
    font-size: var(--big);
    font-family: reg;
    color: #000;
    line-height: 1.05;
    margin-bottom: 30px;
}

.allekurse_kurs_video {
    width: 420px;
    flex-shrink: 0;
    background-color: #eee;
    margin: 15px;


}

.allekurse_kurs_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.allekurse_kurs_body {
    font-size: var(--normal);
    font-family: lig;
    color: #aaa;
    line-height: calc(var(--normal) + 6px);
}

.allekurse_kurs_meta {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.allekurse_kurs_meta_item {
    flex: 1;
    text-align: center;
    font-size: var(--normal);
    font-family: reg;
    color: #2DDD04;
    line-height: calc(var(--normal) + 4px);
}

.allekurse_kurs_footer {
    margin-top: auto;
    text-align: center;
}

.allekurse_kurs_btn {
    display: inline-block;
    background-color: #2DDD04;
    color: white;
    padding: 14px 28px;
    border-radius: 200px;
    text-decoration: none;
    font-size: var(--normal);
    font-family: reg;
    transition: opacity 150ms, transform 150ms;
    margin-bottom: 20px;
              corner-shape: squircle;

}

.allekurse_kurs_btn:hover {
    opacity: 0.7;
    transform: scale(1.06);
}

#allekurse_mehr_wrap {
    width: 100%;
    background-color: #ffa3de;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 200px 0;
}

#allekurse_mehr_text {
    font-size: var(--big);
    color: #bbb;
    mix-blend-mode: multiply;
}

/* "Demnächst" macht immer wieder mal eine La Ola Welle (Buchstaben als <span style="--i:n">) */
.allekurse_laola span {
    display: inline-block;
    animation: allekurse_laola 1.5s ease-in-out calc(var(--i) * 40ms) infinite;
}
@keyframes allekurse_laola {
    0%        { transform: translateY(0); }
    10%       { transform: translateY(-12px); }
    17%       { transform: translateY(3px); }
    24%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .allekurse_laola span { animation: none; }
}


/* === Über MMC Seite === */

#ubermmc_hero {
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    padding: 160px 20px 180px;
    box-sizing: border-box;
}

#ubermmc_hero_titel {
    font-family: bol;
    font-size: 68px;
    line-height: 1.05;
    color: #000;
}

.ubermmc_titel_blau {
    color: #0066FF;
}

#ubermmc_grau_section {
    background-color: #f9f9fb;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-bottom: 100px;
}

#ubermmc_intro {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 20px 60px;
}

#ubermmc_intro_titel {
    font-family: reg;
    font-size: var(--big);
    color: #bbb;
    margin-bottom: 40px;
    line-height: 1;
}

#ubermmc_intro_sub {
    font-family: reg;
    font-size: var(--bigger);
    color: #bbb;
    line-height: 1.3;
}

.ubermmc_carussel {
    padding-bottom: 40px;
    padding-top: 10px;
}

.ubermmc_card_wrapper {
    width: calc(1300px / 3 - 7px);
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
}

.ubermmc_card {
    background: #ffffff;
    padding: 36px 32px;
    font-family: reg;
    font-size: var(--bigger);
    color: #b0b0b0;
    line-height: 1.2;
    flex: 1;
    box-sizing: border-box;
}

.ubermmc_card_video {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: var(--squircle-radius);
    margin-bottom: 20px;
    overflow: hidden;
    isolation: isolate;
}

.ubermmc_card_video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ubermmc_card_titel {
    font-family: reg;
    font-size: var(--bigger);
    line-height: 1.2;
    color: #000;
    margin-bottom: 0.6em;
}

.ubermmc_card_titel_1 { color: #a373ff; }
.ubermmc_card_titel_2 { color: #ffd218; }
.ubermmc_card_titel_3 { color: #ff4500; }
.ubermmc_card_titel_4 { color: #ffa3de; }
.ubermmc_card_titel_5 { color: #00cf2d; }

.ubermmc_c1 { color: #FF4500; }
.ubermmc_c2 { color: #0066FF; }
.ubermmc_c3 { color: #FFDD04; }
.ubermmc_c4 { color: #2DDD04; }
.ubermmc_c5 { color: #8F66FF; }


/* ==========================================================================
   Squircle-System
   ==========================================================================
   Zentrale Stelle für alle "squircle"-Ecken der Seite (vorher verstreut über
   dieses Stylesheet und mehrere Seiten-Templates: einzelne border-radius-
   Werte + corner-shape: squircle pro Selektor, dazu ein @supports-not-Block
   ganz am Ende dieser Datei als Rückbau-Fallback).

   Custom Properties:
   --squircle-radius        normaler Eckenradius. Gilt IMMER als Fallback,
                             auch wenn der Browser corner-shape nicht kennt
                             (z.B. Safari macOS/iOS/iPadOS, Stand jetzt).
   --squircle-radius-boost  erhöhter Radius für den "echten" Squircle. Wird
                             nur innerhalb der @supports-Abfrage unten aktiv.

   Browser ohne corner-shape-Unterstützung sehen dadurch automatisch die
   normale, moderat abgerundete Variante.

   WICHTIG für Komponenten mit eigener Grösse (z.B. .profil_kurs): die lokale
   Zuweisung von --squircle-radius/-boost muss unter @supports NOCHMAL lokal
   auf den Boost-Wert umgeschaltet werden. Ein einziges Update an :root reicht
   nicht, weil eine eigene Zuweisung immer Vorrang vor dem geerbten
   :root-Wert hat. Deshalb kommt jede Komponente mit eigener Grösse unten in
   zwei Blöcken vor: einmal die Basis-Zuweisung, einmal die Aktivierung
   innerhalb von @supports.

   Verschachtelung: ein inneres Element bekommt einen anderen Radius, indem
   es --squircle-radius (und --squircle-radius-boost) einfach neu setzt -
   nie über einen hartcodierten border-radius-Wert. Liegt ein Element in
   einer Komponente mit eigener Grösse (z.B. .content_carussel_box in
   .content_carussel_box_wrapper), muss es aus demselben Grund seinen
   eigenen Normalwert (hier wieder 16/30) explizit neu setzen, sonst erbt es
   den Wert des Wrappers.

   Hinweis: liegt bewusst hier am Ende von style.css statt in einer eigenen
   Datei (squircle.css existiert als fertige Datei ebenfalls im Theme-Ordner,
   war aber über den Datei-Upload nicht zuverlässig auf den Server zu
   bekommen - falls squircle.css später sauber hochgeladen und in
   functions.php eingebunden wird, diesen Block hier wieder entfernen, um
   Dopplungen zu vermeiden).
   ========================================================================== */

:root {
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
}

/* -----------------------------------------------------------------------
   Bucket A: Elemente ohne eigene Grösse. Sie übernehmen --squircle-radius
   ganz normal von :root (16px normal, 30px sobald @supports unten greift).
   ----------------------------------------------------------------------- */
.squircle-btn,
.squircle-container,
.squircle-bg,
.squircle-media,
.squircle-media video,
.squircle-media img,
#page_hero_btn a,
#profil_hero_sub a, .page_hero_btn,
.profil_kurs_sub a, .profil_kurs_sub .content_carussel_box_wrapper_click,
#lex_reset_btn,
.lex_filter_btn,
.lex_filter_item,
.lex_expand_btn,
.kurs_kapitel_item a,
.kurs_kapitel_item,
.content_carussel_box_videoplay a,
.aeb_hero_video_wrap,
.aeb_hero_video_wrap video,
.aeb_intro_placeholder,
.aeb_josh_bild {
  border-radius: var(--squircle-radius);
}

/* Medien-Wrapper unter Bucket A (overflow:hidden bringen sie schon aus dem
   Seiten-Template mit, isolation:isolate ergänzt hier). */
.aeb_hero_video_wrap,
.aeb_intro_placeholder,
.aeb_thema_placeholder,
.aeb_josh_bild {
  isolation: isolate;
}

/* Dekorative ::after-Overlays übernehmen Radius/Shape einfach vom
   Original-Element (border-radius/corner-shape: inherit funktioniert auch
   für nicht per se vererbte Eigenschaften) - kein eigener Eintrag nötig. */
#lex_reset_btn::after,
.lex_filter_btn::after,
.content_carussel_box::after,
.content_carussel_box_wrapper_click:hover::after,
#mmc_play_btn::after,
#mmc_start_play::after,
#mmc_zeitleiste_fortschritt::after,
#mmc_feedback::after,
#kapitel_transition_box::after,
#kapitel_transition_anim::after,
#kapitel_ende_box::after,
#kapitel_ende_pfeil::after,
.hero_card::after,
.aeb_hero_video_wrap::after,
.aeb_intro_placeholder::after,
.aeb_thema_placeholder::after,
.aeb_quote_box::after {
  border-radius: inherit;
  corner-shape: inherit;
}

@supports (corner-shape: superellipse(2)) {
  .squircle-btn,
  .squircle-container,
  .squircle-bg,
  .squircle-media,
  .squircle-media video,
  .squircle-media img,
  #page_hero_btn a,
  #profil_hero_sub a, .page_hero_btn,
  .profil_kurs_sub a, .profil_kurs_sub .content_carussel_box_wrapper_click,
  #lex_reset_btn,
  .lex_filter_btn,
  .lex_filter_item,
  .lex_expand_btn,
    .kurs_kapitel_item a,
  .kurs_kapitel_item,
  .content_carussel_box_videoplay a,
  .aeb_hero_video_wrap,
  .aeb_hero_video_wrap video,
  .aeb_intro_placeholder,
  .aeb_josh_bild {
    corner-shape: superellipse(2);
  }
}

/* -----------------------------------------------------------------------
   Bucket B: Komponenten mit eigener Grösse (oder die den Normalwert einer
   verschachtelten Elternkomponente zurücksetzen müssen). Jede Komponente
   bekommt hier ihre Basis-Zuweisung, weiter unten in @supports die
   Aktivierung.
   ----------------------------------------------------------------------- */

/* Buttons */
.naechstes_kapitel_btn {
  --squircle-radius: 16px;
  --squircle-radius-boost: 40px;
  border-radius: var(--squircle-radius);
}

.aeb_hero_play_btn {
  --squircle-radius: 16px;
  --squircle-radius-boost: 40px;
  border-radius: var(--squircle-radius);
}

/* Container */
.content_carussel_box_wrapper,
.content_carussel_box_wrapper_2,
.content_carussel_box_wrapper_3,
.ubermmc_card {
  --squircle-radius: 16px;
  --squircle-radius-boost: 40px;
  border-radius: var(--squircle-radius);
}

.profil_kurs {
  --squircle-radius: 34px;
  --squircle-radius-boost: 65px;
  border-radius: var(--squircle-radius);
}

.allekurse_kurs_container {
  --squircle-radius: 34px;
  --squircle-radius-boost: 60px;
  border-radius: var(--squircle-radius);
}

.mmc_checkout_card {
  --squircle-radius: 34px;
  --squircle-radius-boost: 60px;
  border-radius: var(--squircle-radius);
}

/* .mmc_checkout_form liegt innerhalb von .mmc_checkout_card und setzt den
   Normalwert deshalb bewusst wieder auf 16/30 zurück (Verschachtelung). */
.mmc_checkout_form {
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
  border-radius: var(--squircle-radius);
}

.aeb_akk_item {
  --squircle-radius: 16px;
  --squircle-radius-boost: 24px;
  border-radius: var(--squircle-radius);
}

.aeb_gratis_box,
.aeb_quote_box,
.aeb_preis_wrap {
  --squircle-radius: 16px;
  --squircle-radius-boost: 40px;
  border-radius: var(--squircle-radius);
}

/* Hintergrundflächen */
#kapitel_transition_box,
#kapitel_transition_anim,
#kapitel_ende_box,
#mmc_feedback {
  --squircle-radius: 16px;
  --squircle-radius-boost: 40px;
  border-radius: var(--squircle-radius);
}

#lex_filter_area {
  --squircle-radius: 16px;
  --squircle-radius-boost: 45px;
  border-radius: var(--squircle-radius);
}

/* Gesperrt-Hinweis unter Clips: liegt im Wrapper (40px Boost), braucht
   wieder den normalen 16/30-Satz. */
.content_carussel_box_text.gesperrt {
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
  border-radius: var(--squircle-radius);
}

/* Medien-Wrapper (Video/Bild) */
.content_carussel_box {
  /* Liegt innerhalb von .content_carussel_box_wrapper (40px Boost), braucht
     hier bewusst wieder den normalen 16/30-Satz (Verschachtelung). */
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
  border-radius: var(--squircle-radius);
  overflow: hidden;
  isolation: isolate;
}

.content_carussel_box video {
  border-radius: var(--squircle-radius);
}

.aeb_hero_video_wrap,
.aeb_thema_placeholder,
.aeb_josh_bild {
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
  border-radius: var(--squircle-radius);
}

.aeb_hero_video_wrap video,
.aeb_thema_placeholder video {
  border-radius: var(--squircle-radius);
}

.profil_kurs video {
  --squircle-radius: 20px;
  --squircle-radius-boost: 35px;
  border-radius: var(--squircle-radius);
}

.allekurse_kurs_video {
  --squircle-radius: 24px;
  --squircle-radius-boost: 45px;
  border-radius: var(--squircle-radius);
  overflow: hidden;
  isolation: isolate;
}

.allekurse_kurs_video video {
  border-radius: var(--squircle-radius);
}

.aeb_gratis_bild,
.aeb_preis_bild {
  /* Liegen innerhalb von .aeb_gratis_box / .aeb_preis_wrap (40px Boost),
     brauchen hier bewusst wieder den normalen 16/30-Satz. */
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
  border-radius: var(--squircle-radius);
  overflow: hidden;
  isolation: isolate;
}

.aeb_kursaufbau_bild {
  --squircle-radius: 16px;
  --squircle-radius-boost: 30px;
  border-radius: var(--squircle-radius);
  overflow: hidden;
  isolation: isolate;
}

.aeb_kursaufbau_bild video {
  border-radius: var(--squircle-radius);
}

@supports (corner-shape: superellipse(2)) {
  .naechstes_kapitel_btn,
  .aeb_hero_play_btn,
  #mmc_start_play,
  .content_carussel_box_wrapper,
  .content_carussel_box_wrapper_2,
  .content_carussel_box_wrapper_3,
  .ubermmc_card,
  .profil_kurs,
  .allekurse_kurs_container,
  .mmc_checkout_card,
  .mmc_checkout_form,
  .aeb_akk_item,
  .aeb_gratis_box,
  .aeb_quote_box,
  .aeb_preis_wrap,
  #lex_filter_area,
  #kapitel_transition_box,
  #kapitel_transition_anim,
  #kapitel_ende_box,
  #mmc_feedback,
  .content_carussel_box,
  .content_carussel_box_text.gesperrt,
  .profil_kurs video,
  .allekurse_kurs_video,
  .aeb_gratis_bild,
  .aeb_preis_bild,
  .aeb_kursaufbau_bild,
  .aeb_hero_video_wrap,
  .aeb_thema_placeholder,
  .aeb_josh_bild {
    --squircle-radius: var(--squircle-radius-boost);
  }

  .naechstes_kapitel_btn,
  .aeb_hero_play_btn,
  #mmc_start_play,
  .content_carussel_box_wrapper,
  .content_carussel_box_wrapper_2,
  .content_carussel_box_wrapper_3,
  .ubermmc_card,
  .profil_kurs,
  .allekurse_kurs_container,
  .mmc_checkout_card,
  .mmc_checkout_form,
  .aeb_akk_item,
  .aeb_gratis_box,
  .aeb_quote_box,
  .aeb_preis_wrap,
  #lex_filter_area,
  #kapitel_transition_box,
  #kapitel_transition_anim,
  #kapitel_ende_box,
  #mmc_feedback,
  .content_carussel_box,
  .content_carussel_box video,
  .content_carussel_box_text.gesperrt,
  .profil_kurs video,
  .allekurse_kurs_video,
  .allekurse_kurs_video video,
  .aeb_gratis_bild,
  .aeb_preis_bild,
  .aeb_kursaufbau_bild,
  .aeb_kursaufbau_bild video,
  .aeb_hero_video_wrap,
  .aeb_hero_video_wrap video,
  .aeb_thema_placeholder,
  .aeb_thema_placeholder video {
    corner-shape: superellipse(2);
  }
}

/* Für neue Elemente reichen die vier Utility-Klassen ohne alte Selektoren:

   <a class="squircle-btn">...</a>
   <div class="squircle-container">...</div>
   <div class="squircle-bg">...</div>
   <div class="squircle-media"><video>...</video></div>

   Eigene Grösse pro Instanz (auch verschachtelt) über die Custom Property,
   nie über einen hartcodierten border-radius. Wichtig: bei einer eigenen
   Grösse IMMER auch die @supports-Aktivierung mitgeben, siehe Bucket B oben:

   .meine-komponente {
     --squircle-radius: 24px;
     --squircle-radius-boost: 44px;
     border-radius: var(--squircle-radius);
   }
   @supports (corner-shape: superellipse(2)) {
     .meine-komponente {
       --squircle-radius: var(--squircle-radius-boost);
       corner-shape: superellipse(2);
     }
   }
   ========================================================================== */






/* Kapitel gesperrt – Buttons (wie .aeb_btn) */
.kapitel_gesperrt_btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kapitel_gesperrt_btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 200px;
    corner-shape: squircle;
    text-decoration: none;
    font-size: var(--normal);
    font-family: reg;
    transition: opacity 150ms, transform 150ms;
}
.kapitel_gesperrt_btn:hover { opacity: 0.7; transform: scale(1.05); }
.kapitel_gesperrt_btn_green { background-color: #2DDD04; color: #fff; }
.kapitel_gesperrt_btn_grau { background-color: #cfcfd2; color: #000; }


/* Seitenabstand links/rechts (var(--gutter)), wenn das Fenster schmaler als die
   1300px max-width ist. .content_box_wrapper und die Karussells rechnen schon mit
   --gutter; hier die übrigen 1300px Container ohne eigenen Seitenabstand. */
#content_titel_wrapper,
#kurs_kapitel_grid,
.kurs_hilfe_inner,
.tools_grid {
    box-sizing: border-box;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Filterfläche hat Hintergrund + Schatten: Box selbst schmaler statt Innenabstand */
#lex_filter_area {
    box-sizing: border-box;
    width: calc(100% - (var(--gutter) * 2));
}