/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!../../node_modules/katex/dist/katex.min.css ***!
  \*******************************************************************************************************************************************************************************************************************************************/
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url('KaTeX_AMS-Regular.woff2') format("woff2"),url('KaTeX_AMS-Regular.woff') format("woff"),url('KaTeX_AMS-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url('KaTeX_Caligraphic-Bold.woff2') format("woff2"),url('KaTeX_Caligraphic-Bold.woff') format("woff"),url('KaTeX_Caligraphic-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url('KaTeX_Caligraphic-Regular.woff2') format("woff2"),url('KaTeX_Caligraphic-Regular.woff') format("woff"),url('KaTeX_Caligraphic-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url('KaTeX_Fraktur-Bold.woff2') format("woff2"),url('KaTeX_Fraktur-Bold.woff') format("woff"),url('KaTeX_Fraktur-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url('KaTeX_Fraktur-Regular.woff2') format("woff2"),url('KaTeX_Fraktur-Regular.woff') format("woff"),url('KaTeX_Fraktur-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url('KaTeX_Main-Bold.woff2') format("woff2"),url('KaTeX_Main-Bold.woff') format("woff"),url('KaTeX_Main-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url('KaTeX_Main-BoldItalic.woff2') format("woff2"),url('KaTeX_Main-BoldItalic.woff') format("woff"),url('KaTeX_Main-BoldItalic.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url('KaTeX_Main-Italic.woff2') format("woff2"),url('KaTeX_Main-Italic.woff') format("woff"),url('KaTeX_Main-Italic.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url('KaTeX_Main-Regular.woff2') format("woff2"),url('KaTeX_Main-Regular.woff') format("woff"),url('KaTeX_Main-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url('KaTeX_Math-BoldItalic.woff2') format("woff2"),url('KaTeX_Math-BoldItalic.woff') format("woff"),url('KaTeX_Math-BoldItalic.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url('KaTeX_Math-Italic.woff2') format("woff2"),url('KaTeX_Math-Italic.woff') format("woff"),url('KaTeX_Math-Italic.ttf') format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url('KaTeX_SansSerif-Bold.woff2') format("woff2"),url('KaTeX_SansSerif-Bold.woff') format("woff"),url('KaTeX_SansSerif-Bold.ttf') format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url('KaTeX_SansSerif-Italic.woff2') format("woff2"),url('KaTeX_SansSerif-Italic.woff') format("woff"),url('KaTeX_SansSerif-Italic.ttf') format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url('KaTeX_SansSerif-Regular.woff2') format("woff2"),url('KaTeX_SansSerif-Regular.woff') format("woff"),url('KaTeX_SansSerif-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url('KaTeX_Script-Regular.woff2') format("woff2"),url('KaTeX_Script-Regular.woff') format("woff"),url('KaTeX_Script-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url('KaTeX_Size1-Regular.woff2') format("woff2"),url('KaTeX_Size1-Regular.woff') format("woff"),url('KaTeX_Size1-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url('KaTeX_Size2-Regular.woff2') format("woff2"),url('KaTeX_Size2-Regular.woff') format("woff"),url('KaTeX_Size2-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url('KaTeX_Size3-Regular.woff2') format("woff2"),url('KaTeX_Size3-Regular.woff') format("woff"),url('KaTeX_Size3-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url('KaTeX_Size4-Regular.woff2') format("woff2"),url('KaTeX_Size4-Regular.woff') format("woff"),url('KaTeX_Size4-Regular.ttf') format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url('KaTeX_Typewriter-Regular.woff2') format("woff2"),url('KaTeX_Typewriter-Regular.woff') format("woff"),url('KaTeX_Typewriter-Regular.ttf') format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.18.1"}.katex .katex-mathml{border:0;clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.music-equalizer-icon--anim-reset .music-equalizer-icon__bar {
  animation: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .music-equalizer-icon .music-equalizer-icon__bar {
    animation: arsnova-music-eq-bar 1.2s ease-in-out infinite;
  }
  .music-equalizer-icon .music-equalizer-icon__bar--1 {
    animation-delay: 0ms;
  }
  .music-equalizer-icon .music-equalizer-icon__bar--2 {
    animation-delay: 150ms;
  }
  .music-equalizer-icon .music-equalizer-icon__bar--3 {
    animation-delay: 300ms;
  }
  .music-equalizer-icon .music-equalizer-icon__bar--4 {
    animation-delay: 450ms;
  }
}
@keyframes arsnova-music-eq-bar {
  0%, 100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}
/* Markdown-Fenced-Code: highlight.js (hell/dunkel, analog Theme-Klassen in index.html) */
html.light pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
html.light code.hljs {
  padding: 3px 5px;
}
html.light {
  /*!
    Theme: GitHub
    Description: Light theme as seen on github.com
    Author: github.com
    Maintainer: @Hirse
    Updated: 2021-05-15

    Outdated base version: https://github.com/primer/github-syntax-light
    Current colors taken from GitHub's CSS
  */
}
html.light .hljs {
  color: #24292e;
  background: #ffffff;
}
html.light .hljs-doctag,
html.light .hljs-keyword,
html.light .hljs-meta .hljs-keyword,
html.light .hljs-template-tag,
html.light .hljs-template-variable,
html.light .hljs-type,
html.light .hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49;
}
html.light .hljs-title,
html.light .hljs-title.class_,
html.light .hljs-title.class_.inherited__,
html.light .hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1;
}
html.light .hljs-attr,
html.light .hljs-attribute,
html.light .hljs-literal,
html.light .hljs-meta,
html.light .hljs-number,
html.light .hljs-operator,
html.light .hljs-variable,
html.light .hljs-selector-attr,
html.light .hljs-selector-class,
html.light .hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5;
}
html.light .hljs-regexp,
html.light .hljs-string,
html.light .hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62;
}
html.light .hljs-built_in,
html.light .hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209;
}
html.light .hljs-comment,
html.light .hljs-code,
html.light .hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d;
}
html.light .hljs-name,
html.light .hljs-quote,
html.light .hljs-selector-tag,
html.light .hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a;
}
html.light .hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e;
}
html.light .hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold;
}
html.light .hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f;
}
html.light .hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic;
}
html.light .hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold;
}
html.light .hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4;
}
html.light .hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0;
}
html.light .hljs-char.escape_,
html.light .hljs-link,
html.light .hljs-params,
html.light .hljs-property,
html.light .hljs-punctuation,
html.light .hljs-tag {
  /* purposely ignored */
}

html.dark pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
html.dark code.hljs {
  padding: 3px 5px;
}
html.dark {
  /*!
    Theme: GitHub Dark
    Description: Dark theme as seen on github.com
    Author: github.com
    Maintainer: @Hirse
    Updated: 2021-05-15

    Outdated base version: https://github.com/primer/github-syntax-dark
    Current colors taken from GitHub's CSS
  */
}
html.dark .hljs {
  color: #c9d1d9;
  background: #0d1117;
}
html.dark .hljs-doctag,
html.dark .hljs-keyword,
html.dark .hljs-meta .hljs-keyword,
html.dark .hljs-template-tag,
html.dark .hljs-template-variable,
html.dark .hljs-type,
html.dark .hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #ff7b72;
}
html.dark .hljs-title,
html.dark .hljs-title.class_,
html.dark .hljs-title.class_.inherited__,
html.dark .hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #d2a8ff;
}
html.dark .hljs-attr,
html.dark .hljs-attribute,
html.dark .hljs-literal,
html.dark .hljs-meta,
html.dark .hljs-number,
html.dark .hljs-operator,
html.dark .hljs-variable,
html.dark .hljs-selector-attr,
html.dark .hljs-selector-class,
html.dark .hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #79c0ff;
}
html.dark .hljs-regexp,
html.dark .hljs-string,
html.dark .hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #a5d6ff;
}
html.dark .hljs-built_in,
html.dark .hljs-symbol {
  /* prettylights-syntax-variable */
  color: #ffa657;
}
html.dark .hljs-comment,
html.dark .hljs-code,
html.dark .hljs-formula {
  /* prettylights-syntax-comment */
  color: #8b949e;
}
html.dark .hljs-name,
html.dark .hljs-quote,
html.dark .hljs-selector-tag,
html.dark .hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #7ee787;
}
html.dark .hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #c9d1d9;
}
html.dark .hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #1f6feb;
  font-weight: bold;
}
html.dark .hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #f2cc60;
}
html.dark .hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #c9d1d9;
  font-style: italic;
}
html.dark .hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #c9d1d9;
  font-weight: bold;
}
html.dark .hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #aff5b4;
  background-color: #033a16;
}
html.dark .hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #ffdcd7;
  background-color: #67060c;
}
html.dark .hljs-char.escape_,
html.dark .hljs-link,
html.dark .hljs-params,
html.dark .hljs-property,
html.dark .hljs-punctuation,
html.dark .hljs-tag {
  /* purposely ignored */
}

@media (prefers-color-scheme: light) {
  html:not(.light):not(.dark) pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
  }
  html:not(.light):not(.dark) code.hljs {
    padding: 3px 5px;
  }
  html:not(.light):not(.dark) {
    /*!
      Theme: GitHub
      Description: Light theme as seen on github.com
      Author: github.com
      Maintainer: @Hirse
      Updated: 2021-05-15

      Outdated base version: https://github.com/primer/github-syntax-light
      Current colors taken from GitHub's CSS
    */
  }
  html:not(.light):not(.dark) .hljs {
    color: #24292e;
    background: #ffffff;
  }
  html:not(.light):not(.dark) .hljs-doctag,
  html:not(.light):not(.dark) .hljs-keyword,
  html:not(.light):not(.dark) .hljs-meta .hljs-keyword,
  html:not(.light):not(.dark) .hljs-template-tag,
  html:not(.light):not(.dark) .hljs-template-variable,
  html:not(.light):not(.dark) .hljs-type,
  html:not(.light):not(.dark) .hljs-variable.language_ {
    /* prettylights-syntax-keyword */
    color: #d73a49;
  }
  html:not(.light):not(.dark) .hljs-title,
  html:not(.light):not(.dark) .hljs-title.class_,
  html:not(.light):not(.dark) .hljs-title.class_.inherited__,
  html:not(.light):not(.dark) .hljs-title.function_ {
    /* prettylights-syntax-entity */
    color: #6f42c1;
  }
  html:not(.light):not(.dark) .hljs-attr,
  html:not(.light):not(.dark) .hljs-attribute,
  html:not(.light):not(.dark) .hljs-literal,
  html:not(.light):not(.dark) .hljs-meta,
  html:not(.light):not(.dark) .hljs-number,
  html:not(.light):not(.dark) .hljs-operator,
  html:not(.light):not(.dark) .hljs-variable,
  html:not(.light):not(.dark) .hljs-selector-attr,
  html:not(.light):not(.dark) .hljs-selector-class,
  html:not(.light):not(.dark) .hljs-selector-id {
    /* prettylights-syntax-constant */
    color: #005cc5;
  }
  html:not(.light):not(.dark) .hljs-regexp,
  html:not(.light):not(.dark) .hljs-string,
  html:not(.light):not(.dark) .hljs-meta .hljs-string {
    /* prettylights-syntax-string */
    color: #032f62;
  }
  html:not(.light):not(.dark) .hljs-built_in,
  html:not(.light):not(.dark) .hljs-symbol {
    /* prettylights-syntax-variable */
    color: #e36209;
  }
  html:not(.light):not(.dark) .hljs-comment,
  html:not(.light):not(.dark) .hljs-code,
  html:not(.light):not(.dark) .hljs-formula {
    /* prettylights-syntax-comment */
    color: #6a737d;
  }
  html:not(.light):not(.dark) .hljs-name,
  html:not(.light):not(.dark) .hljs-quote,
  html:not(.light):not(.dark) .hljs-selector-tag,
  html:not(.light):not(.dark) .hljs-selector-pseudo {
    /* prettylights-syntax-entity-tag */
    color: #22863a;
  }
  html:not(.light):not(.dark) .hljs-subst {
    /* prettylights-syntax-storage-modifier-import */
    color: #24292e;
  }
  html:not(.light):not(.dark) .hljs-section {
    /* prettylights-syntax-markup-heading */
    color: #005cc5;
    font-weight: bold;
  }
  html:not(.light):not(.dark) .hljs-bullet {
    /* prettylights-syntax-markup-list */
    color: #735c0f;
  }
  html:not(.light):not(.dark) .hljs-emphasis {
    /* prettylights-syntax-markup-italic */
    color: #24292e;
    font-style: italic;
  }
  html:not(.light):not(.dark) .hljs-strong {
    /* prettylights-syntax-markup-bold */
    color: #24292e;
    font-weight: bold;
  }
  html:not(.light):not(.dark) .hljs-addition {
    /* prettylights-syntax-markup-inserted */
    color: #22863a;
    background-color: #f0fff4;
  }
  html:not(.light):not(.dark) .hljs-deletion {
    /* prettylights-syntax-markup-deleted */
    color: #b31d28;
    background-color: #ffeef0;
  }
  html:not(.light):not(.dark) .hljs-char.escape_,
  html:not(.light):not(.dark) .hljs-link,
  html:not(.light):not(.dark) .hljs-params,
  html:not(.light):not(.dark) .hljs-property,
  html:not(.light):not(.dark) .hljs-punctuation,
  html:not(.light):not(.dark) .hljs-tag {
    /* purposely ignored */
  }
}
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
  }
  html:not(.light):not(.dark) code.hljs {
    padding: 3px 5px;
  }
  html:not(.light):not(.dark) {
    /*!
      Theme: GitHub Dark
      Description: Dark theme as seen on github.com
      Author: github.com
      Maintainer: @Hirse
      Updated: 2021-05-15

      Outdated base version: https://github.com/primer/github-syntax-dark
      Current colors taken from GitHub's CSS
    */
  }
  html:not(.light):not(.dark) .hljs {
    color: #c9d1d9;
    background: #0d1117;
  }
  html:not(.light):not(.dark) .hljs-doctag,
  html:not(.light):not(.dark) .hljs-keyword,
  html:not(.light):not(.dark) .hljs-meta .hljs-keyword,
  html:not(.light):not(.dark) .hljs-template-tag,
  html:not(.light):not(.dark) .hljs-template-variable,
  html:not(.light):not(.dark) .hljs-type,
  html:not(.light):not(.dark) .hljs-variable.language_ {
    /* prettylights-syntax-keyword */
    color: #ff7b72;
  }
  html:not(.light):not(.dark) .hljs-title,
  html:not(.light):not(.dark) .hljs-title.class_,
  html:not(.light):not(.dark) .hljs-title.class_.inherited__,
  html:not(.light):not(.dark) .hljs-title.function_ {
    /* prettylights-syntax-entity */
    color: #d2a8ff;
  }
  html:not(.light):not(.dark) .hljs-attr,
  html:not(.light):not(.dark) .hljs-attribute,
  html:not(.light):not(.dark) .hljs-literal,
  html:not(.light):not(.dark) .hljs-meta,
  html:not(.light):not(.dark) .hljs-number,
  html:not(.light):not(.dark) .hljs-operator,
  html:not(.light):not(.dark) .hljs-variable,
  html:not(.light):not(.dark) .hljs-selector-attr,
  html:not(.light):not(.dark) .hljs-selector-class,
  html:not(.light):not(.dark) .hljs-selector-id {
    /* prettylights-syntax-constant */
    color: #79c0ff;
  }
  html:not(.light):not(.dark) .hljs-regexp,
  html:not(.light):not(.dark) .hljs-string,
  html:not(.light):not(.dark) .hljs-meta .hljs-string {
    /* prettylights-syntax-string */
    color: #a5d6ff;
  }
  html:not(.light):not(.dark) .hljs-built_in,
  html:not(.light):not(.dark) .hljs-symbol {
    /* prettylights-syntax-variable */
    color: #ffa657;
  }
  html:not(.light):not(.dark) .hljs-comment,
  html:not(.light):not(.dark) .hljs-code,
  html:not(.light):not(.dark) .hljs-formula {
    /* prettylights-syntax-comment */
    color: #8b949e;
  }
  html:not(.light):not(.dark) .hljs-name,
  html:not(.light):not(.dark) .hljs-quote,
  html:not(.light):not(.dark) .hljs-selector-tag,
  html:not(.light):not(.dark) .hljs-selector-pseudo {
    /* prettylights-syntax-entity-tag */
    color: #7ee787;
  }
  html:not(.light):not(.dark) .hljs-subst {
    /* prettylights-syntax-storage-modifier-import */
    color: #c9d1d9;
  }
  html:not(.light):not(.dark) .hljs-section {
    /* prettylights-syntax-markup-heading */
    color: #1f6feb;
    font-weight: bold;
  }
  html:not(.light):not(.dark) .hljs-bullet {
    /* prettylights-syntax-markup-list */
    color: #f2cc60;
  }
  html:not(.light):not(.dark) .hljs-emphasis {
    /* prettylights-syntax-markup-italic */
    color: #c9d1d9;
    font-style: italic;
  }
  html:not(.light):not(.dark) .hljs-strong {
    /* prettylights-syntax-markup-bold */
    color: #c9d1d9;
    font-weight: bold;
  }
  html:not(.light):not(.dark) .hljs-addition {
    /* prettylights-syntax-markup-inserted */
    color: #aff5b4;
    background-color: #033a16;
  }
  html:not(.light):not(.dark) .hljs-deletion {
    /* prettylights-syntax-markup-deleted */
    color: #ffdcd7;
    background-color: #67060c;
  }
  html:not(.light):not(.dark) .hljs-char.escape_,
  html:not(.light):not(.dark) .hljs-link,
  html:not(.light):not(.dark) .hljs-params,
  html:not(.light):not(.dark) .hljs-property,
  html:not(.light):not(.dark) .hljs-punctuation,
  html:not(.light):not(.dark) .hljs-tag {
    /* purposely ignored */
  }
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('material-icons.woff2') format("woff2");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

html {
  color-scheme: light dark;
  --mat-focus-indicator-border-color: var(--mat-sys-secondary, black);
  --mat-focus-indicator-display: block;
}
html .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
html .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
html .mat-mdc-standard-chip .mat-mdc-chip-action-label {
  overflow: visible;
}
html {
  --mat-sys-background: light-dark(#faf9fd, #121316);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f2f0f4, #2f3033);
  --mat-sys-inverse-primary: light-dark(#abc7ff, #005cbb);
  --mat-sys-inverse-surface: light-dark(#2f3033, #e3e2e6);
  --mat-sys-on-background: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #002f65);
  --mat-sys-on-primary-container: light-dark(#00458f, #d7e3ff);
  --mat-sys-on-primary-fixed: light-dark(#001b3f, #001b3f);
  --mat-sys-on-primary-fixed-variant: light-dark(#00458f, #00458f);
  --mat-sys-on-secondary: light-dark(#ffffff, #283041);
  --mat-sys-on-secondary-container: light-dark(#3e4759, #dae2f9);
  --mat-sys-on-secondary-fixed: light-dark(#131c2b, #131c2b);
  --mat-sys-on-secondary-fixed-variant: light-dark(#3e4759, #3e4759);
  --mat-sys-on-surface: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-surface-variant: light-dark(#44474e, #e0e2ec);
  --mat-sys-on-tertiary: light-dark(#ffffff, #003737);
  --mat-sys-on-tertiary-container: light-dark(#004f4f, #00fbfb);
  --mat-sys-on-tertiary-fixed: light-dark(#002020, #002020);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#004f4f, #004f4f);
  --mat-sys-outline: light-dark(#74777f, #8e9099);
  --mat-sys-outline-variant: light-dark(#c4c6d0, #44474e);
  --mat-sys-primary: light-dark(#005cbb, #abc7ff);
  --mat-sys-primary-container: light-dark(#d7e3ff, #00458f);
  --mat-sys-primary-fixed: light-dark(#d7e3ff, #d7e3ff);
  --mat-sys-primary-fixed-dim: light-dark(#abc7ff, #abc7ff);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#565e71, #bec6dc);
  --mat-sys-secondary-container: light-dark(#dae2f9, #3e4759);
  --mat-sys-secondary-fixed: light-dark(#dae2f9, #dae2f9);
  --mat-sys-secondary-fixed-dim: light-dark(#bec6dc, #bec6dc);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#faf9fd, #121316);
  --mat-sys-surface-bright: light-dark(#faf9fd, #38393c);
  --mat-sys-surface-container: light-dark(#efedf0, #1f2022);
  --mat-sys-surface-container-high: light-dark(#e9e7eb, #292a2c);
  --mat-sys-surface-container-highest: light-dark(#e3e2e6, #343537);
  --mat-sys-surface-container-low: light-dark(#f4f3f6, #1a1b1f);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e11);
  --mat-sys-surface-dim: light-dark(#dbd9dd, #121316);
  --mat-sys-surface-tint: light-dark(#005cbb, #abc7ff);
  --mat-sys-surface-variant: light-dark(#e0e2ec, #44474e);
  --mat-sys-tertiary: light-dark(#006a6a, #00dddd);
  --mat-sys-tertiary-container: light-dark(#00fbfb, #004f4f);
  --mat-sys-tertiary-fixed: light-dark(#00fbfb, #00fbfb);
  --mat-sys-tertiary-fixed-dim: light-dark(#00dddd, #00dddd);
  --mat-sys-neutral-variant20: #2d3038;
  --mat-sys-neutral10: #1a1b1f;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem system-ui;
  --mat-sys-body-large-font: system-ui;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem system-ui;
  --mat-sys-body-medium-font: system-ui;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem system-ui;
  --mat-sys-body-small-font: system-ui;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem system-ui;
  --mat-sys-display-large-font: system-ui;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem system-ui;
  --mat-sys-display-medium-font: system-ui;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem system-ui;
  --mat-sys-display-small-font: system-ui;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem system-ui;
  --mat-sys-headline-large-font: system-ui;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem system-ui;
  --mat-sys-headline-medium-font: system-ui;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem system-ui;
  --mat-sys-headline-small-font: system-ui;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem system-ui;
  --mat-sys-label-large-font: system-ui;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem system-ui;
  --mat-sys-label-medium-font: system-ui;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem system-ui;
  --mat-sys-label-small-font: system-ui;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem system-ui;
  --mat-sys-title-large-font: system-ui;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem system-ui;
  --mat-sys-title-medium-font: system-ui;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem system-ui;
  --mat-sys-title-small-font: system-ui;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}

html.dark {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
}

/* Seriös + Light: gefüllte CTAs = Europa-Blau statt Azure-Cyan. */
/* Seriös + Dark: Azure-Cyan weicht vom Brand-SVG (#002395) ab.
   Primary-Container (Karten-Icon-Kacheln) = Europa-Blau; Primary (Toolbar-Icons) = helle EU-Variante. */
html.light:not(.preset-playful) {
  --mat-sys-primary: var(--app-eu-blue);
  --mat-sys-on-primary: var(--app-eu-on-primary);
  --mat-sys-inverse-primary: var(--app-eu-blue-on-dark);
}

html.dark:not(.preset-playful) {
  --mat-sys-primary: var(--app-eu-blue-on-dark);
  --mat-sys-on-primary: var(--app-eu-blue-dark);
  --mat-sys-primary-container: var(--app-eu-blue);
  --mat-sys-on-primary-container: #dce1ff;
  --mat-sys-inverse-primary: var(--app-eu-blue);
}

@media (prefers-color-scheme: light) {
  html:not(.dark):not(.preset-playful) {
    --mat-sys-primary: var(--app-eu-blue);
    --mat-sys-on-primary: var(--app-eu-on-primary);
    --mat-sys-inverse-primary: var(--app-eu-blue-on-dark);
  }
}
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.preset-playful) {
    --mat-sys-primary: var(--app-eu-blue-on-dark);
    --mat-sys-on-primary: var(--app-eu-blue-dark);
    --mat-sys-primary-container: var(--app-eu-blue);
    --mat-sys-on-primary-container: #dce1ff;
    --mat-sys-inverse-primary: var(--app-eu-blue);
  }
}
html.preset-playful {
  --mat-sys-background: light-dark(#fff7f9, #161215);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f8eef2, #342f32);
  --mat-sys-inverse-primary: light-dark(#ffabf3, #a900a9);
  --mat-sys-inverse-surface: light-dark(#342f32, #e9e0e4);
  --mat-sys-on-background: light-dark(#1e1a1d, #e9e0e4);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #5b005b);
  --mat-sys-on-primary-container: light-dark(#810081, #ffd7f5);
  --mat-sys-on-primary-fixed: light-dark(#380038, #380038);
  --mat-sys-on-primary-fixed-variant: light-dark(#810081, #810081);
  --mat-sys-on-secondary: light-dark(#ffffff, #3d2b3a);
  --mat-sys-on-secondary-container: light-dark(#554151, #f7daef);
  --mat-sys-on-secondary-fixed: light-dark(#271624, #271624);
  --mat-sys-on-secondary-fixed-variant: light-dark(#554151, #554151);
  --mat-sys-on-surface: light-dark(#1e1a1d, #e9e0e4);
  --mat-sys-on-surface-variant: light-dark(#4e444b, #eedee7);
  --mat-sys-on-tertiary: light-dark(#ffffff, #42008a);
  --mat-sys-on-tertiary-container: light-dark(#5f00c0, #ecdcff);
  --mat-sys-on-tertiary-fixed: light-dark(#270057, #270057);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#5f00c0, #5f00c0);
  --mat-sys-outline: light-dark(#80747c, #9a8d95);
  --mat-sys-outline-variant: light-dark(#d1c2cb, #4e444b);
  --mat-sys-primary: light-dark(#a900a9, #ffabf3);
  --mat-sys-primary-container: light-dark(#ffd7f5, #810081);
  --mat-sys-primary-fixed: light-dark(#ffd7f5, #ffd7f5);
  --mat-sys-primary-fixed-dim: light-dark(#ffabf3, #ffabf3);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#6e5869, #dabfd2);
  --mat-sys-secondary-container: light-dark(#f7daef, #554151);
  --mat-sys-secondary-fixed: light-dark(#f7daef, #f7daef);
  --mat-sys-secondary-fixed-dim: light-dark(#dabfd2, #dabfd2);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#fff7f9, #161215);
  --mat-sys-surface-bright: light-dark(#fff7f9, #3d383b);
  --mat-sys-surface-container: light-dark(#f5ebf0, #231e22);
  --mat-sys-surface-container-high: light-dark(#efe6ea, #2d292c);
  --mat-sys-surface-container-highest: light-dark(#e9e0e4, #383337);
  --mat-sys-surface-container-low: light-dark(#fbf1f5, #1e1a1d);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #110d10);
  --mat-sys-surface-dim: light-dark(#e1d7dc, #161215);
  --mat-sys-surface-tint: light-dark(#a900a9, #ffabf3);
  --mat-sys-surface-variant: light-dark(#eedee7, #4e444b);
  --mat-sys-tertiary: light-dark(#7d00fa, #d5baff);
  --mat-sys-tertiary-container: light-dark(#ecdcff, #5f00c0);
  --mat-sys-tertiary-fixed: light-dark(#ecdcff, #ecdcff);
  --mat-sys-tertiary-fixed-dim: light-dark(#d5baff, #d5baff);
  --mat-sys-neutral-variant20: #372e34;
  --mat-sys-neutral10: #1e1a1d;
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
  --mat-button-filled-container-shape: 9999px;
  --mat-button-outlined-container-shape: 9999px;
  --mat-button-text-container-shape: 9999px;
  --mat-card-outlined-container-shape: 1.5rem;
  --mat-card-elevated-container-shape: 1.5rem;
}

html {
  --mat-card-outlined-container-shape: var(--mat-sys-corner-extra-large);
  --mat-button-toggle-shape: var(--mat-sys-corner-medium);
}

:root {
  --app-color-success-bg: var(--mat-sys-secondary-container);
  --app-color-success-fg: var(--mat-sys-on-secondary-container);
  --app-status-healthy: light-dark(#16a34a, #4ade80);
  --app-status-busy: light-dark(#f59e0b, #fbbf24);
  --app-color-danger-bg: var(--mat-sys-error-container);
  --app-color-danger-fg: var(--mat-sys-on-error-container);
  --arsnova-bar-correct: light-dark(#2e7d32, #66bb6a);
  /** Text/Icon auf „Richtig“-Flächen (kontrastreich in Light + Dark) */
  --arsnova-bar-correct-on: light-dark(#fff, #1b5e20);
  --arsnova-bar-wrong: light-dark(#c62828, #ef5350);
  --app-color-info-bg: var(--mat-sys-tertiary-container);
  --app-color-info-fg: var(--mat-sys-on-tertiary-container);
  --app-color-warning-bg: var(--mat-sys-surface-variant);
  --app-color-warning-fg: var(--mat-sys-on-surface-variant);
  /** Sterne/Rating (Story 4.8) – semantisch amber, unabhängig von Primary-Palette */
  --app-rating-star: light-dark(#f59e0b, #fbbf24);
  /** Brand-SVG (EU-Flaggen-Anlehnung) – TOKENS.md Brand-Farben */
  --app-eu-blue: #002395;
  --app-eu-blue-dark: #001a75;
  --app-eu-yellow: #ffcc00;
  /** Text/Icon auf EU-Blau-CTAs (Seriös + Light) */
  --app-eu-on-primary: #ffffff;
  /** Helles EU-Blau für Primary/Icons auf dunklem Grund (Seriös + Dark) */
  --app-eu-blue-on-dark: #b4c4ff;
  --app-bg-root: var(--mat-sys-surface);
  --app-shadow-accent: none;
  --app-toolbar-max-width: 56rem;
  --app-live-channel-max-width: 36rem;
  --app-live-channel-inline: 1rem;
  --host-mobile-inline: 0.75rem;
  --host-mobile-stack-gap: 0.875rem;
  --host-mobile-card-padding: 0.875rem;
  --host-mobile-toolbar-gap: 0.5rem;
  --host-mobile-safe-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  --app-qr-size: 6rem;
  --app-qr-size-compact: 6rem;
}

html.preset-playful {
  --app-bg-root: linear-gradient(
    145deg,
    var(--mat-sys-surface-container-lowest) 0%,
    var(--mat-sys-surface-container-low) 15%,
    var(--mat-sys-tertiary-container) 40%,
    var(--mat-sys-primary-container) 60%,
    var(--mat-sys-surface-container-low) 85%,
    var(--mat-sys-surface-container) 100%
  );
  --app-shadow-accent: 0 14px 44px -10px color-mix(in srgb, var(--mat-sys-primary) 50%, transparent);
  --app-shadow-card-playful: 0 8px 28px -6px
    color-mix(in srgb, var(--mat-sys-primary) 35%, transparent);
  --app-shadow-cta-glow: 0 0 20px color-mix(in srgb, var(--mat-sys-primary) 45%, transparent);
  --app-corner-playful: 1.5rem;
  /* Light-Theme: stärkerer Verlauf (M3-Container sind sonst sehr dezent) */
}
@media (prefers-color-scheme: light) {
  html.preset-playful:not(.dark) {
    --app-bg-root: linear-gradient(
      145deg,
      var(--mat-sys-surface-container-lowest) 0%,
      color-mix(in srgb, var(--mat-sys-tertiary) 12%, var(--mat-sys-surface-container-low)) 18%,
      color-mix(in srgb, var(--mat-sys-tertiary) 22%, var(--mat-sys-tertiary-container)) 42%,
      color-mix(in srgb, var(--mat-sys-primary) 22%, var(--mat-sys-primary-container)) 58%,
      color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface-container-low)) 82%,
      var(--mat-sys-surface-container) 100%
    );
  }
}
html.preset-playful.light {
  --app-bg-root: linear-gradient(
    145deg,
    var(--mat-sys-surface-container-lowest) 0%,
    color-mix(in srgb, var(--mat-sys-tertiary) 12%, var(--mat-sys-surface-container-low)) 18%,
    color-mix(in srgb, var(--mat-sys-tertiary) 22%, var(--mat-sys-tertiary-container)) 42%,
    color-mix(in srgb, var(--mat-sys-primary) 22%, var(--mat-sys-primary-container)) 58%,
    color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface-container-low)) 82%,
    var(--mat-sys-surface-container) 100%
  );
}
html.preset-playful .app-footer {
  background: linear-gradient(180deg, var(--mat-sys-surface-container-low), var(--mat-sys-tertiary-container));
}
html.preset-playful .app-footer__icon {
  color: var(--mat-sys-primary);
}

html.preset-playful .quiz-list-page > .quiz-empty-state--lead {
  border-radius: var(--mat-sys-corner-extra-large);
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 48%, var(--mat-sys-primary) 28%);
  background: radial-gradient(ellipse 92% 70% at 88% 8%, color-mix(in srgb, var(--mat-sys-primary) 14%, transparent), transparent 55%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 90%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level1), 0 6px 22px -10px color-mix(in srgb, var(--mat-sys-primary) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .quiz-list-page mat-card.quiz-list-item,
html.preset-playful .quiz-list-page mat-card.quiz-list__ai-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful mat-card.quiz-form-card,
html.preset-playful .quiz-edit mat-card.quiz-edit__meta-card,
html.preset-playful .quiz-edit mat-card.quiz-edit__settings-card,
html.preset-playful .quiz-edit mat-card.quiz-edit__form-card,
html.preset-playful .quiz-edit mat-card.quiz-edit-list__empty-card,
html.preset-playful .quiz-edit mat-card.quiz-edit-question,
html.preset-playful mat-card.quiz-edit__not-found {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful mat-card.quiz-form-card mat-card,
html.preset-playful .quiz-edit mat-card.quiz-edit__form-card mat-card.quiz-edit-form__preview {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .join-page mat-card.join-card:not(.join-card--error) {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 42%, var(--mat-sys-primary) 32%);
  background: radial-gradient(ellipse 98% 64% at 96% 6%, color-mix(in srgb, var(--mat-sys-primary) 18%, transparent), transparent 54%), radial-gradient(ellipse 80% 52% at 4% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 14%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 34%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 84%, var(--mat-sys-primary) 8%) 50%, color-mix(in srgb, var(--mat-sys-surface) 90%, var(--mat-sys-tertiary) 10%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
}

html.preset-playful .join-page .join-card--lobby .join-card__session {
  border-bottom: none;
  margin-bottom: 1.35rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: var(--mat-sys-corner-large);
  background: color-mix(in srgb, var(--mat-sys-surface) 78%, var(--mat-sys-primary-container) 22%);
  border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 8%, transparent), 0 1px 0 color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

@media (min-width: 840px) {
  html.preset-playful .join-page .join-card--lobby .join-card__session {
    margin-bottom: 1.65rem;
    padding: 1.2rem 1.35rem 1.35rem;
  }
}
html.preset-playful .quiz-preview mat-card.quiz-preview__empty-card,
html.preset-playful .quiz-preview mat-card.quiz-preview-editor,
html.preset-playful .quiz-preview mat-card.quiz-preview__validation {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .quiz-preview .quiz-preview-question {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 42%, var(--mat-sys-primary) 32%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), 0 20px 44px color-mix(in srgb, var(--mat-sys-primary) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful mat-card.quiz-sync-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .vote-page .vote-live-banner {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 34%);
  background: radial-gradient(ellipse 98% 64% at 96% 6%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 54%), radial-gradient(ellipse 80% 52% at 4% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 88%, var(--mat-sys-primary) 7%) 50%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .vote-page .vote-lobby__wait {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 50%, var(--mat-sys-primary) 26%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 20%, var(--mat-sys-surface-container-high)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-reading-banner {
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
}

html.preset-playful .vote-page .vote-team-reward {
  isolation: isolate;
  border-radius: var(--mat-sys-corner-extra-large);
  padding: clamp(1.15rem, 3.2vw, 1.55rem);
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 34%, var(--mat-sys-primary) 40%);
  background: linear-gradient(185deg, color-mix(in srgb, var(--mat-sys-inverse-on-surface) 11%, transparent) 0%, transparent 44%), radial-gradient(ellipse 92% 56% at 50% -6%, color-mix(in srgb, var(--mat-sys-primary) 24%, transparent), transparent 54%), radial-gradient(ellipse 72% 50% at 98% 92%, color-mix(in srgb, var(--mat-sys-tertiary) 16%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 36%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 80%, var(--mat-sys-primary) 10%) 46%, color-mix(in srgb, var(--mat-sys-surface) 90%, var(--mat-sys-tertiary) 10%) 100%);
  box-shadow: var(--mat-sys-level3), var(--app-shadow-card-playful), 0 16px 40px -14px color-mix(in srgb, var(--mat-sys-primary) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
}

html.preset-playful .vote-page .vote-team-reward.vote-team-reward--leader {
  border-color: color-mix(in srgb, #cfa304 42%, var(--mat-sys-primary) 32%);
  background: linear-gradient(188deg, color-mix(in srgb, #fff 18%, transparent) 0%, transparent 40%), radial-gradient(ellipse 96% 58% at 48% -10%, color-mix(in srgb, #ffd700 32%, transparent), transparent 58%), radial-gradient(ellipse 68% 46% at 96% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 14%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 56%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 76%, var(--mat-sys-primary) 14%) 100%);
  box-shadow: var(--mat-sys-level3), var(--app-shadow-card-playful), 0 18px 48px -12px color-mix(in srgb, #ffd700 24%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent), inset 0 0 0 1px color-mix(in srgb, #e6b800 28%, transparent);
}

html.preset-playful .vote-page .vote-team-reward__head {
  padding: 0.5rem 1rem;
  border-radius: var(--mat-sys-corner-large);
  background: linear-gradient(165deg, color-mix(in srgb, var(--mat-sys-primary) 14%, transparent) 0%, color-mix(in srgb, var(--mat-sys-surface) 40%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 12%, transparent), 0 1px 0 color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-team-reward__title {
  font: var(--mat-sys-headline-small);
  font-weight: 700;
  letter-spacing: -0.02em;
}

html.preset-playful .vote-page .vote-team-reward.vote-team-reward--leader .vote-team-reward__title {
  color: color-mix(in srgb, var(--mat-sys-primary) 22%, var(--mat-sys-on-surface));
}

html.preset-playful .vote-page .vote-team-reward__team {
  padding: 0.45rem 0.95rem;
  border-radius: var(--mat-sys-corner-full);
  background: color-mix(in srgb, var(--mat-sys-surface) 42%, var(--mat-sys-primary-container) 58%);
  border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 32%, transparent);
  box-shadow: var(--mat-sys-level1), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 12%, transparent);
}

html.preset-playful .vote-page .vote-team-reward__stat {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
  padding: 0.85rem 0.55rem;
}

html.preset-playful .vote-page .vote-team-reward__stat-value {
  color: var(--mat-sys-primary);
  font-weight: 800;
}

html.preset-playful .vote-page .vote-team-reward__board {
  gap: 0.75rem;
}

html.preset-playful .vote-page .vote-team-reward__board-item--rank1 {
  border: 1px solid color-mix(in srgb, #e6b800 48%, var(--mat-sys-outline-variant));
  border-left-width: 4px;
  border-left-color: color-mix(in srgb, #e6b800 92%, var(--mat-sys-outline-variant));
  background: linear-gradient(100deg, color-mix(in srgb, #ffd700 16%, transparent) 0%, transparent 58%), var(--mat-sys-surface);
  box-shadow: var(--mat-sys-level1), 0 8px 22px -12px color-mix(in srgb, #ffd700 22%, transparent), inset 0 0 0 1px color-mix(in srgb, #ffd700 7%, transparent);
}

html.preset-playful .vote-page .vote-team-reward__board-item--rank2 {
  border: 1px solid color-mix(in srgb, #9e9e9e 50%, var(--mat-sys-outline-variant));
  border-left-width: 4px;
  border-left-color: color-mix(in srgb, #b0b8c0 90%, var(--mat-sys-outline-variant));
  background: linear-gradient(100deg, color-mix(in srgb, #c0c0c0 12%, transparent) 0%, transparent 56%), var(--mat-sys-surface);
  box-shadow: var(--mat-sys-level1), 0 6px 18px -12px color-mix(in srgb, #9098a0 18%, transparent), inset 0 0 0 1px color-mix(in srgb, #a8a8a8 10%, transparent);
}

html.preset-playful .vote-page .vote-team-reward__board-item--rank3 {
  border: 1px solid color-mix(in srgb, #b87333 46%, var(--mat-sys-outline-variant));
  border-left-width: 4px;
  border-left-color: color-mix(in srgb, #cd7f32 88%, var(--mat-sys-outline-variant));
  background: linear-gradient(100deg, color-mix(in srgb, #cd7f32 12%, transparent) 0%, transparent 56%), var(--mat-sys-surface);
  box-shadow: var(--mat-sys-level1), 0 6px 18px -12px color-mix(in srgb, #8d5a2b 18%, transparent), inset 0 0 0 1px color-mix(in srgb, #b87333 9%, transparent);
}

html.preset-playful .vote-page .vote-team-reward__board-item--own.vote-team-reward__board-item--rank1 {
  background: linear-gradient(100deg, color-mix(in srgb, #ffd700 14%, transparent) 0%, transparent 52%), color-mix(in srgb, var(--mat-sys-primary) 11%, var(--mat-sys-surface));
  border-color: color-mix(in srgb, var(--mat-sys-primary) 28%, var(--mat-sys-outline-variant));
  border-left-color: color-mix(in srgb, #e6b800 78%, var(--mat-sys-primary) 22%);
}

html.preset-playful .vote-page .vote-team-reward__board-item--own.vote-team-reward__board-item--rank2 {
  background: linear-gradient(100deg, color-mix(in srgb, #c0c0c0 10%, transparent) 0%, transparent 52%), color-mix(in srgb, var(--mat-sys-primary) 11%, var(--mat-sys-surface));
  border-color: color-mix(in srgb, var(--mat-sys-primary) 26%, var(--mat-sys-outline-variant));
  border-left-color: color-mix(in srgb, #a8b0b8 75%, var(--mat-sys-primary) 25%);
}

html.preset-playful .vote-page .vote-team-reward__board-item--own.vote-team-reward__board-item--rank3 {
  background: linear-gradient(100deg, color-mix(in srgb, #cd7f32 10%, transparent) 0%, transparent 52%), color-mix(in srgb, var(--mat-sys-primary) 11%, var(--mat-sys-surface));
  border-color: color-mix(in srgb, var(--mat-sys-primary) 26%, var(--mat-sys-outline-variant));
  border-left-color: color-mix(in srgb, #b87333 72%, var(--mat-sys-primary) 28%);
}

html.preset-playful .vote-page .vote-finished-hero {
  box-shadow: 0 1rem 2rem color-mix(in srgb, black 8%, transparent), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
}

html.preset-playful .vote-page .vote-finished-hero.vote-finished-hero--rank1 {
  box-shadow: 0 1.2rem 2.4rem color-mix(in srgb, #ffd700 14%, transparent), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, #ffd700 30%, transparent);
}

html.preset-playful .vote-page .vote-finished-hero.vote-finished-hero--rank2 {
  box-shadow: 0 1rem 2rem color-mix(in srgb, black 7%, transparent), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-outline) 25%, transparent);
}

html.preset-playful .vote-page .vote-finished-hero.vote-finished-hero--rank3 {
  box-shadow: 0 1rem 2rem color-mix(in srgb, black 7%, transparent), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, #cd7f32 35%, transparent);
}

html.preset-playful .vote-page .vote-bonus-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 34%);
  background: radial-gradient(ellipse 98% 64% at 96% 6%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 54%), radial-gradient(ellipse 80% 52% at 4% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 88%, var(--mat-sys-primary) 7%) 50%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .vote-page .vote-feedback-card--playful {
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 32%);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 34%);
  background: radial-gradient(ellipse 98% 64% at 96% 6%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 54%), radial-gradient(ellipse 80% 52% at 4% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 88%, var(--mat-sys-primary) 7%) 50%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .vote-page .vote-feedback-card--serious {
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 22%);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-feedback-done {
  box-shadow: 0 0.85rem 1.6rem color-mix(in srgb, black 7%, transparent), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
}

html.preset-playful .vote-page .session-channel-tabs {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 48%, var(--mat-sys-primary) 28%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 18%, var(--mat-sys-surface-container-low)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-low) 94%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page section.session-channel-card.app-live-channel-shell {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 34%);
  background: radial-gradient(ellipse 98% 64% at 96% 6%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 54%), radial-gradient(ellipse 80% 52% at 4% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 88%, var(--mat-sys-primary) 7%) 50%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .vote-page .vote-lobby {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
  border-radius: var(--mat-sys-corner-extra-large);
  padding: clamp(1.5rem, 4vw, 2.35rem) 1.2rem clamp(2rem, 5vw, 2.75rem);
  max-width: min(28rem, 100%);
  box-shadow: var(--mat-sys-level1), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .vote-page .vote-player-badge {
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 42%, var(--mat-sys-primary) 38%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 28%, var(--mat-sys-surface-container)) 0%, color-mix(in srgb, var(--mat-sys-surface-container) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 10%, transparent);
}

html.preset-playful {
  /* Kita-Tier-Emoji: ohne Kartenhintergrund, nur freistehendes Symbol + Text. */
}

html.preset-playful .vote-page .vote-player-badge--kindergarten {
  border: none;
  background: transparent;
  box-shadow: none;
}

html.preset-playful .vote-page .vote-countdown:not(.vote-countdown--urgent) {
  border: 2px solid color-mix(in srgb, var(--mat-sys-primary) 38%, var(--mat-sys-outline-variant));
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 12%, transparent);
}

html.preset-playful .vote-page .vote-scorecard {
  border-radius: var(--mat-sys-corner-extra-large);
  box-shadow: 0 0.8rem 1.6rem color-mix(in srgb, black 8%, transparent), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
}

html.preset-playful .vote-page .vote-question {
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem 1.15rem;
  border-radius: var(--mat-sys-corner-extra-large);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-discussion {
  border-radius: var(--mat-sys-corner-extra-large);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-round2-banner {
  padding: 0.65rem 1rem;
  border-radius: var(--mat-sys-corner-large);
  background: color-mix(in srgb, var(--mat-sys-primary-container) 38%, var(--mat-sys-surface));
  border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 30%, transparent);
  color: var(--mat-sys-on-surface);
  font-weight: 600;
}

html.preset-playful .vote-page .vote-answer:not(.vote-answer--correct):not(.vote-answer--wrong):not(.vote-answer--disabled) {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 48%, var(--mat-sys-primary) 26%);
  box-shadow: var(--mat-sys-level1), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 10%, transparent);
}

html.preset-playful .vote-page .vote-answer--selected:not(.vote-answer--correct):not(.vote-answer--wrong) {
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--mat-sys-primary) 38%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
}

html.preset-playful .vote-page .vote-freetext__input {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 32%);
  box-shadow: var(--mat-sys-level1), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 8%, transparent);
}

html.preset-playful .vote-page .vote-freetext__own {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-rating:not(.vote-rating--result) {
  padding: 1rem 1.1rem 1.25rem;
  border-radius: var(--mat-sys-corner-extra-large);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-rating--result .vote-rating__result-label {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-sent {
  border-radius: var(--mat-sys-corner-large);
  box-shadow: var(--mat-sys-level1), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
}

html.preset-playful .vote-page .vote-emoji-wrap {
  padding: 1rem 1.1rem 1.2rem;
  border-radius: var(--mat-sys-corner-extra-large);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .vote-page .vote-emoji-bar__btn {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 45%, var(--mat-sys-primary) 32%);
  background: color-mix(in srgb, var(--mat-sys-surface) 55%, var(--mat-sys-primary-container) 45%);
  box-shadow: var(--mat-sys-level1);
}

html.preset-playful .vote-page .vote-emoji-sent {
  padding: 0.65rem 1.15rem;
  border-radius: var(--mat-sys-corner-full);
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
  justify-content: center;
}

html.preset-playful .vote-page .session-qa-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 50%, var(--mat-sys-primary) 28%);
  box-shadow: var(--mat-sys-level1), inset 0 1px 0 color-mix(in srgb, var(--mat-sys-inverse-on-surface) 8%, transparent);
}

html.preset-playful .vote-page .session-qa-card--pinned {
  border-color: color-mix(in srgb, var(--mat-sys-primary) 45%, var(--mat-sys-outline-variant));
  box-shadow: var(--mat-sys-level2), 0 8px 22px -10px color-mix(in srgb, var(--mat-sys-primary) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
}

html.preset-playful .vote-page .session-qa-empty {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
  border-radius: var(--mat-sys-corner-large);
}

html.preset-playful .vote-page .session-qa-moderation-notice {
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-tertiary) 15%, transparent);
}

html.preset-playful .vote-page .session-qa-form__textarea {
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 42%, var(--mat-sys-primary) 30%);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .session-present mat-card.session-present__winner-card,
html.preset-playful .session-present mat-card.session-present__team-board-card,
html.preset-playful .session-present mat-card.session-present__qa-card,
html.preset-playful .session-present mat-card.session-present__qa-list-card,
html.preset-playful .session-present mat-card.session-present__feedback-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .session-present mat-card.session-placeholder,
html.preset-playful .session-host mat-card.session-placeholder {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful .session-present .session-present__word-cloud-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 40%, var(--mat-sys-primary) 34%);
  background: radial-gradient(ellipse 98% 64% at 96% 6%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 54%), radial-gradient(ellipse 80% 52% at 4% 94%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 48%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 88%, var(--mat-sys-primary) 7%) 50%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .session-host mat-card.session-host__qa-card,
html.preset-playful .session-host mat-card.session-host__question-card,
html.preset-playful .session-host mat-card.session-host__results-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful mat-card.session-channel-card.app-live-channel-shell {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 52%, var(--mat-sys-primary) 24%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-tertiary) 6%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful mat-card.feedback-host__error {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 55%, var(--mat-sys-primary) 18%);
  background: linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 14%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 95%, var(--mat-sys-tertiary) 5%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 5%, transparent);
}

html.preset-playful mat-card.feedback-vote__card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

html.preset-playful .help-page .legal-article,
html.preset-playful .legal-page .legal-article,
html.preset-playful .news-archive-page .news-archive-page__article-root {
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border-radius: var(--mat-sys-corner-extra-large);
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 46%, var(--mat-sys-primary) 28%);
  background: radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--mat-sys-primary) 12%, transparent), transparent 55%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 22%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-low) 95%, var(--mat-sys-tertiary) 5%) 100%);
  box-shadow: var(--mat-sys-level1), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 6%, transparent);
}

html.preset-playful mat-card.admin-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--mat-sys-outline-variant) 44%, var(--mat-sys-primary) 30%);
  background: radial-gradient(ellipse 96% 66% at 100% 4%, color-mix(in srgb, var(--mat-sys-primary) 16%, transparent), transparent 56%), radial-gradient(ellipse 84% 54% at 2% 96%, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 50%), linear-gradient(168deg, color-mix(in srgb, var(--mat-sys-primary-container) 30%, var(--mat-sys-surface)) 0%, color-mix(in srgb, var(--mat-sys-surface-container-high) 86%, var(--mat-sys-primary) 7%) 47%, color-mix(in srgb, var(--mat-sys-surface) 92%, var(--mat-sys-tertiary) 8%) 100%);
  box-shadow: var(--mat-sys-level2), var(--app-shadow-card-playful), inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 7%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  /* Höhenkette für app-root: 100% statt nur 100dvh — bei kurzen Fenstern/mobile Chrome stabiler */
  height: 100%;
}

body {
  font: var(--mat-sys-body-medium);
  background: var(--app-bg-root);
  color: var(--mat-sys-on-surface);
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* Spezifität wie index.html (html.dark body / html.light body), damit --app-bg-root (inkl. Spielerisch-Gradient) gewinnt */
html.dark body,
html.light body {
  background: var(--app-bg-root);
}

html {
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline-color: var(--mat-sys-primary);
}

/* Textlinks: Fokusrahmen mit Luft zur Schrift, ohne Layout oder Klickfläche zu verschieben. */
:where(a[href]):focus-visible {
  outline: 2px solid var(--mat-sys-primary);
  outline-offset: 0.25rem;
  border-radius: 0.125rem;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes home-playful-brand-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.l-stack {
  display: flex;
  flex-direction: column;
}
.l-stack--xs {
  gap: 0.25rem;
}
.l-stack--sm {
  gap: 0.5rem;
}
.l-stack--md {
  gap: 1rem;
}
.l-stack--lg {
  gap: 1.5rem;
}
.l-stack--xl {
  gap: 2rem;
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.l-cluster--xs {
  gap: 0.25rem;
}
.l-cluster--sm {
  gap: 0.5rem;
}
.l-cluster--md {
  gap: 1rem;
}
.l-cluster--lg {
  gap: 1.5rem;
}

.l-grid {
  display: grid;
}
.l-grid--sm {
  gap: 0.5rem;
}
.l-grid--md {
  gap: 0.75rem;
}
.l-grid--lg {
  gap: 1rem;
}
.l-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.l-grid--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 599px) {
  .l-grid--2col, .l-grid--4col {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 600px) {
  .l-grid--auto-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .l-grid--auto-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.l-inset--xs {
  padding: 0.25rem;
}
.l-inset--sm {
  padding: 0.5rem;
}
.l-inset--md {
  padding: 1rem;
}
.l-inset--lg {
  padding: 1.5rem;
}
.l-inset--xl {
  padding: 2rem;
}

.l-page {
  max-width: 56rem;
  margin-inline: auto;
  padding: 1.5rem 1rem;
}
@media (min-width: 600px) {
  .l-page {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 840px) {
  .l-page {
    padding-inline: 2rem;
  }
}

.l-section {
  max-width: 42rem;
  margin-inline: auto;
}

/* Abstand Toolbar → erstes Inhaltselement: Routed Component ist Kind von .app-main__content, .l-page/.l-section dessen erstes Kind. */
.app-main__content:has(> * > .l-page:first-child),
.app-main__content:has(> * > .l-section:first-child),
.app-main__content:has(> * > .content-page-layer:first-child) {
  margin-top: 0;
}

.app-main__content > * > .l-page:first-child,
.app-main__content > * > .l-section:first-child,
.app-main__content > * > .content-page-layer:first-child {
  margin-top: 1rem;
}

@media (min-width: 600px) {
  .app-main__content > * > .l-page:first-child,
  .app-main__content > * > .l-section:first-child,
  .app-main__content > * > .content-page-layer:first-child {
    margin-top: 1.25rem;
  }
}
@media (min-width: 840px) {
  .app-main__content > * > .l-page:first-child,
  .app-main__content > * > .l-section:first-child,
  .app-main__content > * > .content-page-layer:first-child {
    margin-top: 1.5rem;
  }
}
/* Join: Kindergarten-Nicknamen — Select-Panel im Overlay (höhere Zeilen, große Emoji). */
.join-nickname-select-panel.mat-mdc-select-panel {
  min-width: min(22rem, 100vw - 2rem) !important;
}

.join-nickname-select-panel .mat-mdc-option {
  min-height: 3.35rem;
}

.join-nickname-select-panel .mat-mdc-option .mdc-list-item__primary-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: normal;
  line-height: 1.3;
}

/* MOTD-Archiv (Toolbar): Hintergrund wie Home-MOTD-Overlay (Blur, kein Blur bei reduced-motion) */
.cdk-overlay-backdrop.motd-archive-dialog-backdrop {
  background: color-mix(in srgb, var(--mat-sys-scrim) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .cdk-overlay-backdrop.motd-archive-dialog-backdrop {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
/* MOTD-Archiv: MD3-Dialog-Surface (wie Status-Hilfe, typische Dialog-Ecke) */
.cdk-overlay-pane.motd-archive-dialog-panel .mat-mdc-dialog-surface {
  border-radius: var(--mat-sys-corner-extra-large, var(--mat-sys-corner-large));
  border: 1px solid var(--mat-sys-outline-variant);
  background: var(--mat-sys-surface-container-high);
  box-shadow: var(--mat-sys-level3);
  /* Mehr Luft um Titel „News-Archiv“ und Inhalt (Mobile-first) */
  padding: 1.25rem 1.25rem 1.5rem;
}

@media (min-width: 600px) {
  .cdk-overlay-pane.motd-archive-dialog-panel .mat-mdc-dialog-surface {
    padding: 1.5rem 1.75rem 1.75rem;
  }
}
.cdk-overlay-pane.motd-archive-dialog-panel .mat-mdc-dialog-content {
  max-height: min(72dvh, 28rem);
  /* Horizontales Padding übernimmt die Surface; vertikal etwas Abstand unter dem Titel */
  padding-inline: 0;
  padding-block: 0.75rem 0;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .mat-mdc-dialog-surface {
  border-radius: var(--mat-sys-corner-extra-large, var(--mat-sys-corner-large));
  border: 1px solid var(--mat-sys-outline-variant);
  background: var(--mat-sys-surface-container-high);
  box-shadow: var(--mat-sys-level3);
  padding: 1.25rem 1.25rem 1.25rem;
  max-width: min(42rem, 100vw - 2rem);
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .cdk-overlay-pane.admin-motd-template-dialog-panel .mat-mdc-dialog-surface {
    padding: 1.5rem 1.75rem 1.5rem;
  }
}
.cdk-overlay-pane.admin-motd-template-dialog-panel .mat-mdc-dialog-content {
  max-height: min(72dvh, 38rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.35rem 0 0.25rem !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .mat-mdc-dialog-title {
  padding: 0 0 0.35rem !important;
  margin: 0 !important;
}

.cdk-overlay-backdrop.session-quiz-picker-dialog-backdrop {
  background: color-mix(in srgb, var(--mat-sys-scrim) 38%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .cdk-overlay-backdrop.session-quiz-picker-dialog-backdrop {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
.cdk-overlay-pane.session-quiz-picker-dialog-panel .mat-mdc-dialog-surface {
  border-radius: var(--mat-sys-corner-extra-large, var(--mat-sys-corner-large));
  box-shadow: var(--mat-sys-level3);
}

.cdk-overlay-backdrop.markdown-image-lightbox-dialog-backdrop {
  background: rgba(7, 10, 16, 0.88);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.cdk-overlay-pane.markdown-image-lightbox-dialog-panel {
  inset: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-inner-container,
.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mdc-dialog__container,
.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-container,
.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-surface,
.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-content {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
}

.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-inner-container,
.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mdc-dialog__container {
  align-items: stretch;
  justify-content: stretch;
}

.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-surface {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.cdk-overlay-pane.markdown-image-lightbox-dialog-panel .mat-mdc-dialog-content {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.cdk-overlay-pane.word-cloud-dialog-panel {
  top: var(--session-host-word-cloud-overlay-top, 0px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100dvh - var(--session-host-word-cloud-overlay-top, 0px)) !important;
  max-height: calc(100dvh - var(--session-host-word-cloud-overlay-top, 0px)) !important;
}

.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-inner-container,
.cdk-overlay-pane.word-cloud-dialog-panel .mdc-dialog__container,
.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-container,
.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-surface,
.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-content {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
}

.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-inner-container,
.cdk-overlay-pane.word-cloud-dialog-panel .mdc-dialog__container {
  align-items: stretch;
  justify-content: stretch;
}

.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-surface {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.cdk-overlay-pane.word-cloud-dialog-panel .mat-mdc-dialog-content {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cdk-overlay-pane.moderation-compass-dialog-panel {
  width: min(52rem, 100vw - 1.5rem) !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: calc(100dvh - 1rem) !important;
}

.cdk-overlay-pane.moderation-compass-dialog-panel .mat-mdc-dialog-surface {
  overflow: hidden;
}

@media (max-width: 599px) {
  .cdk-overlay-pane.moderation-compass-dialog-panel {
    width: calc(100vw - 0.75rem) !important;
    max-width: calc(100vw - 0.75rem) !important;
    max-height: calc(100dvh - 0.75rem) !important;
  }
}
.cdk-overlay-backdrop.word-cloud-dialog-backdrop {
  top: var(--session-host-word-cloud-overlay-top, 0px);
  background: color-mix(in srgb, #08040f 80%, var(--mat-sys-primary) 20%);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
          backdrop-filter: blur(12px) saturate(1.15);
}

.word-cloud-tooltip .mdc-tooltip__surface {
  max-width: min(34rem, 100vw - 1.5rem);
  padding: 0.75rem 0.9rem;
  border-radius: 0.95rem;
  text-align: left;
  white-space: pre-wrap;
  line-height: 1.5;
  font: var(--mat-sys-body-small);
}

/* Fade-in/Zoom nur mit Lightbox-Directive — sonst bleiben Bilder bei state=loading unsichtbar. */
.markdown-lightbox-enabled img[data-markdown-image-lightbox=true] {
  cursor: zoom-in !important;
  transition: opacity 180ms ease-out;
}

.markdown-lightbox-enabled img[data-markdown-image-lightbox=true][data-markdown-image-state=loading] {
  opacity: 0;
}

.markdown-lightbox-enabled img[data-markdown-image-lightbox=true][data-markdown-image-state=ready],
.markdown-lightbox-enabled img[data-markdown-image-lightbox=true][data-markdown-image-state=error] {
  opacity: 1;
}

/* Markdown (MOTD …): Flex-Eltern dürfen unter natürlicher Bildbreite schrumpfen (sonst kein max-width:100%) */
.markdown-body {
  min-width: 0;
  max-width: 100%;
}

.markdown-body pre {
  margin: 0.65rem 0;
  overflow-x: auto;
  max-width: 100%;
}

.markdown-body .markdown-code-block {
  position: relative;
  margin: 0.65rem 0;
  max-width: 100%;
}

.markdown-body .markdown-code-block pre {
  margin: 0;
}

.markdown-body pre code.hljs {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--mat-sys-corner-small);
  font-size: 0.875em;
}

.markdown-body .markdown-code-block pre code.hljs {
  padding-top: 2.55rem;
}

.markdown-body .markdown-code-block__copy {
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-end: 0.55rem;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, transparent);
  color: var(--mat-sys-on-surface);
  box-shadow: var(--mat-sys-level1);
  font: var(--mat-sys-label-small);
  font-weight: 600;
  line-height: 1;
  padding: 0.38rem 0.68rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.markdown-body .markdown-code-block__copy:hover {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, var(--mat-sys-surface-container-high));
  border-color: color-mix(in srgb, var(--mat-sys-primary) 35%, var(--mat-sys-outline-variant));
}

.markdown-body .markdown-code-block__copy:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mat-sys-primary) 55%, transparent);
  outline-offset: 2px;
}

.markdown-body .markdown-code-block__copy[data-markdown-copy-state=copied] {
  background: color-mix(in srgb, var(--mat-sys-tertiary) 18%, var(--mat-sys-surface-container-high));
  border-color: color-mix(in srgb, var(--mat-sys-tertiary) 38%, var(--mat-sys-outline-variant));
  color: var(--mat-sys-on-surface);
}

/* Bilder an Inhaltsbreite; !important gegen evtl. Attribute/Third-Party */
.markdown-body img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

.vote-answer__text,
.session-host__answer-text,
.session-host__vote-dist-text,
.session-host__round-comparison-text,
.quiz-preview-question__answer-content,
.quiz-edit-question__answer-text,
.quiz-edit-answer .mk-editor__preview-body,
.quiz-edit-form__preview-answer-text {
  --answer-leading-emoji-size: 1.6em;
  --answer-leading-emoji-layout-size: var(--answer-leading-emoji-size);
  --answer-leading-emoji-visual-scale: 1;
  --answer-leading-emoji-transform-origin: center center;
  --answer-leading-emoji-gap: 0.45em;
  --answer-leading-emoji-offset-y: 0;
  --answer-leading-emoji-text-line-height: 1.18;
  --answer-leading-emoji-slot: calc(
    var(--answer-leading-emoji-layout-size) + var(--answer-leading-emoji-gap)
  );
}

.vote-answer__text:has(> .answer-leading-emoji),
.session-host__answer-text:has(> .answer-leading-emoji),
.session-host__vote-dist-text:has(> .answer-leading-emoji),
.session-host__round-comparison-text:has(> .answer-leading-emoji),
.quiz-preview-question__answer-content:has(> .answer-leading-emoji),
.quiz-edit-question__answer-text:has(> .answer-leading-emoji),
.quiz-edit-answer .mk-editor__preview-body:has(> .answer-leading-emoji),
.quiz-edit-form__preview-answer-text:has(> .answer-leading-emoji) {
  display: grid;
  grid-template-columns: var(--answer-leading-emoji-layout-size) minmax(0, 1fr);
  column-gap: var(--answer-leading-emoji-gap);
  align-items: center;
  line-height: var(--answer-leading-emoji-text-line-height);
}

.quiz-edit-answer .mk-editor__preview-body,
.quiz-edit-form__preview-answer-text {
  --answer-leading-emoji-size: 2.2em;
  --answer-leading-emoji-gap: 1.05em;
}

.vote-answer__text > p,
.session-host__answer-text > p,
.session-host__vote-dist-text > p,
.session-host__round-comparison-text > p,
.quiz-preview-question__answer-content > p,
.quiz-edit-question__answer-text > p,
.quiz-edit-answer .mk-editor__preview-body > p,
.quiz-edit-form__preview-answer-text > p {
  margin: 0;
}

.vote-answer__text > p.answer-leading-emoji-block,
.session-host__answer-text > p.answer-leading-emoji-block,
.session-host__vote-dist-text > p.answer-leading-emoji-block,
.session-host__round-comparison-text > p.answer-leading-emoji-block,
.quiz-preview-question__answer-content > p.answer-leading-emoji-block,
.quiz-edit-question__answer-text > p.answer-leading-emoji-block,
.quiz-edit-answer .mk-editor__preview-body > p.answer-leading-emoji-block,
.quiz-edit-form__preview-answer-text > p.answer-leading-emoji-block {
  display: grid;
  grid-template-columns: var(--answer-leading-emoji-layout-size) minmax(0, 1fr);
  column-gap: var(--answer-leading-emoji-gap);
  align-items: center;
  line-height: var(--answer-leading-emoji-text-line-height);
}

.vote-answer__text > p:has(> .answer-leading-emoji),
.session-host__answer-text > p:has(> .answer-leading-emoji),
.session-host__vote-dist-text > p:has(> .answer-leading-emoji),
.session-host__round-comparison-text > p:has(> .answer-leading-emoji),
.quiz-preview-question__answer-content > p:has(> .answer-leading-emoji),
.quiz-edit-question__answer-text > p:has(> .answer-leading-emoji),
.quiz-edit-answer .mk-editor__preview-body > p:has(> .answer-leading-emoji),
.quiz-edit-form__preview-answer-text > p:has(> .answer-leading-emoji) {
  display: grid;
  grid-template-columns: var(--answer-leading-emoji-layout-size) minmax(0, 1fr);
  column-gap: var(--answer-leading-emoji-gap);
  align-items: center;
  line-height: var(--answer-leading-emoji-text-line-height);
}

.session-host__answer-text:has(> .answer-leading-emoji),
.session-host__answer-text > p.answer-leading-emoji-block,
.session-host__answer-text > p:has(> .answer-leading-emoji),
.session-host__vote-dist-text:has(> .answer-leading-emoji),
.session-host__vote-dist-text > p.answer-leading-emoji-block,
.session-host__vote-dist-text > p:has(> .answer-leading-emoji),
.session-host__round-comparison-text:has(> .answer-leading-emoji),
.session-host__round-comparison-text > p.answer-leading-emoji-block,
.session-host__round-comparison-text > p:has(> .answer-leading-emoji),
.quiz-preview-question__answer-content:has(> .answer-leading-emoji),
.quiz-preview-question__answer-content > p.answer-leading-emoji-block,
.quiz-preview-question__answer-content > p:has(> .answer-leading-emoji),
.quiz-edit-answer .mk-editor__preview-body:has(> .answer-leading-emoji),
.quiz-edit-answer .mk-editor__preview-body > p.answer-leading-emoji-block,
.quiz-edit-answer .mk-editor__preview-body > p:has(> .answer-leading-emoji),
.quiz-edit-form__preview-answer-text:has(> .answer-leading-emoji),
.quiz-edit-form__preview-answer-text > p.answer-leading-emoji-block,
.quiz-edit-form__preview-answer-text > p:has(> .answer-leading-emoji) {
  grid-template-columns: auto minmax(0, 1fr);
}

.vote-answer__text > .answer-leading-emoji,
.session-host__answer-text > .answer-leading-emoji,
.session-host__vote-dist-text > .answer-leading-emoji,
.session-host__round-comparison-text > .answer-leading-emoji,
.quiz-preview-question__answer-content > .answer-leading-emoji,
.quiz-edit-question__answer-text > .answer-leading-emoji,
.quiz-edit-answer .mk-editor__preview-body > .answer-leading-emoji,
.quiz-edit-form__preview-answer-text > .answer-leading-emoji,
.vote-answer__text > p > .answer-leading-emoji,
.session-host__answer-text > p > .answer-leading-emoji,
.session-host__vote-dist-text > p > .answer-leading-emoji,
.session-host__round-comparison-text > p > .answer-leading-emoji,
.quiz-preview-question__answer-content > p > .answer-leading-emoji,
.quiz-edit-question__answer-text > p > .answer-leading-emoji,
.quiz-edit-answer .mk-editor__preview-body > p > .answer-leading-emoji,
.quiz-edit-form__preview-answer-text > p > .answer-leading-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--answer-leading-emoji-layout-size);
  min-width: var(--answer-leading-emoji-layout-size);
  height: var(--answer-leading-emoji-layout-size);
  margin: 0;
  font-size: var(--answer-leading-emoji-layout-size);
  line-height: 1;
  vertical-align: middle;
  align-self: center;
  justify-self: start;
  text-indent: 0;
  transform: translateY(var(--answer-leading-emoji-offset-y)) scale(var(--answer-leading-emoji-visual-scale));
  transform-origin: var(--answer-leading-emoji-transform-origin);
}

.vote-answer__text > .answer-leading-emoji,
.vote-answer__text > p > .answer-leading-emoji,
.session-host__answer-text > .answer-leading-emoji,
.session-host__answer-text > p > .answer-leading-emoji,
.session-host__vote-dist-text > .answer-leading-emoji,
.session-host__vote-dist-text > p > .answer-leading-emoji,
.session-host__round-comparison-text > .answer-leading-emoji,
.session-host__round-comparison-text > p > .answer-leading-emoji,
.quiz-preview-question__answer-content > .answer-leading-emoji,
.quiz-preview-question__answer-content > p > .answer-leading-emoji,
.quiz-edit-answer .mk-editor__preview-body > .answer-leading-emoji,
.quiz-edit-answer .mk-editor__preview-body > p > .answer-leading-emoji,
.quiz-edit-form__preview-answer-text > .answer-leading-emoji,
.quiz-edit-form__preview-answer-text > p > .answer-leading-emoji {
  width: auto;
  min-width: 0;
  justify-content: flex-start;
}

.answer-leading-emoji-text {
  display: block;
  min-width: 0;
  align-self: center;
  line-height: var(--answer-leading-emoji-text-line-height);
}

@media (max-width: 599px) {
  .vote-answer__text,
  .session-host__answer-text,
  .session-host__vote-dist-text,
  .session-host__round-comparison-text,
  .quiz-preview-question__answer-content,
  .quiz-edit-question__answer-text,
  .quiz-edit-answer .mk-editor__preview-body,
  .quiz-edit-form__preview-answer-text {
    --answer-leading-emoji-size: 1.95em;
    --answer-leading-emoji-gap: 0.85em;
  }
  .quiz-edit-answer .mk-editor__preview-body,
  .quiz-edit-form__preview-answer-text {
    --answer-leading-emoji-size: 2.35em;
    --answer-leading-emoji-gap: 1.2em;
  }
}
/* Host-Fragetext: große Markdown-Bilder, auch verlinkte, auf sinnvolle Viewport-Höhe begrenzen. */
.session-host__question-title-inner img,
.session-host__question-title-inner a img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 33vh !important;
  object-fit: contain;
  margin-inline: auto;
}

/* Quiz-Vorschau und Quiz-Beschreibung: Markdown-Bilder auf ein Drittel der Viewport-Höhe begrenzen. */
.quiz-preview-question__text img,
.quiz-preview-question__text a img,
.quiz-list-item__description img,
.quiz-list-item__description a img,
.mk-editor__preview-body img,
.mk-editor__preview-body a img,
.quiz-edit-form__preview-content img,
.quiz-edit-form__preview-content a img,
.quiz-edit-form__preview-answers img,
.quiz-edit-form__preview-answers a img,
.quiz-edit-question__text img,
.quiz-edit-question__text a img,
.quiz-edit-question__answer-text img,
.quiz-edit-question__answer-text a img,
.quiz-edit-question__summary img,
.quiz-edit-question__summary a img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 33vh !important;
  object-fit: contain;
  margin-inline: auto;
}

.markdown-emoji {
  display: inline-grid;
  place-items: center;
  inline-size: 1em;
  block-size: 1em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  vertical-align: -0.3em;
  font-variant-emoji: emoji;
}

.answer-leading-emoji.markdown-emoji {
  display: inline-grid;
  place-items: center;
  inline-size: var(--answer-leading-emoji-layout-size);
  block-size: var(--answer-leading-emoji-layout-size);
  font-size: var(--answer-leading-emoji-layout-size);
  vertical-align: middle;
  text-indent: 0;
  transform: translateY(var(--answer-leading-emoji-offset-y)) scale(var(--answer-leading-emoji-visual-scale));
  transform-origin: var(--answer-leading-emoji-transform-origin);
}

.vote-answer__text > .answer-leading-emoji.markdown-emoji,
.vote-answer__text > p > .answer-leading-emoji.markdown-emoji,
.session-host__answer-text > .answer-leading-emoji.markdown-emoji,
.session-host__answer-text > p > .answer-leading-emoji.markdown-emoji,
.session-host__vote-dist-text > .answer-leading-emoji.markdown-emoji,
.session-host__vote-dist-text > p > .answer-leading-emoji.markdown-emoji,
.session-host__round-comparison-text > .answer-leading-emoji.markdown-emoji,
.session-host__round-comparison-text > p > .answer-leading-emoji.markdown-emoji,
.quiz-preview-question__answer-content > .answer-leading-emoji.markdown-emoji,
.quiz-preview-question__answer-content > p > .answer-leading-emoji.markdown-emoji,
.quiz-edit-answer .mk-editor__preview-body > .answer-leading-emoji.markdown-emoji,
.quiz-edit-answer .mk-editor__preview-body > p > .answer-leading-emoji.markdown-emoji,
.quiz-edit-form__preview-answer-text > .answer-leading-emoji.markdown-emoji,
.quiz-edit-form__preview-answer-text > p > .answer-leading-emoji.markdown-emoji {
  inline-size: auto;
  justify-items: start;
}

/* MOTD-Vorlage-Dialog: Markdown in [innerHTML] — kein View-Encapsulation für Kindknoten */
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body {
  font: var(--mat-sys-body-medium);
  line-height: 1.5;
  color: var(--mat-sys-on-surface);
  overflow-wrap: break-word;
  word-break: break-word;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body :first-child {
  margin-top: 0;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body :last-child {
  margin-bottom: 0;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body p {
  margin: 0.45rem 0;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h1,
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h2,
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h3,
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h4 {
  margin: 0.75rem 0 0.4rem;
  font: var(--mat-sys-title-medium);
  font-weight: 600;
  line-height: 1.35;
  color: var(--mat-sys-on-surface);
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h1:first-child,
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h2:first-child,
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body h3:first-child {
  margin-top: 0;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body ul,
.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body ol {
  margin: 0.4rem 0 0.5rem;
  padding-inline-start: 1.35rem;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body li {
  margin: 0.2rem 0;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body a {
  color: var(--mat-sys-primary);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Home-/Archiv-MOTD: Links (z. B. Beispiel-PDF) sichtbar halten — Material erbt sonst Body-Farbe. */
.home-motd-sheet__body.markdown-body a,
.motd-archive__body.markdown-body a,
.news-archive-page__md.markdown-body a,
.markdown-body a.markdown-inline-link {
  color: var(--mat-sys-primary);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  font-weight: 600;
}

.home-motd-sheet__body.markdown-body a:hover,
.motd-archive__body.markdown-body a:hover,
.news-archive-page__md.markdown-body a:hover,
.markdown-body a.markdown-inline-link:hover {
  text-decoration-thickness: 0.12em;
}

.markdown-external-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0.28em;
  inline-size: 0.92em;
  block-size: 0.92em;
  flex: none;
  vertical-align: 0.08em;
}

.markdown-external-link-icon__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--mat-sys-corner-extra-small, 4px);
  background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body pre {
  margin: 0.55rem 0;
  padding: 0.65rem 0.75rem;
  overflow-x: auto;
  border-radius: var(--mat-sys-corner-small);
  background: var(--mat-sys-surface-container-low);
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body pre code {
  padding: 0;
  background: none;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body blockquote {
  margin: 0.55rem 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid var(--mat-sys-outline-variant);
  color: var(--mat-sys-on-surface-variant);
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body strong {
  font-weight: 600;
}

.cdk-overlay-pane.admin-motd-template-dialog-panel .admin-motd-tpl-dialog__preview.markdown-body hr {
  margin: 0.75rem 0;
  border: none;
  border-block-start: 1px solid var(--mat-sys-outline-variant);
}

/* Session-Host & Feedback-Host (Standalone): gleiche Karten-Optik im Viewport-QR-Overlay */
.feedback-host__join-viewport-overlay__surface.feedback-host__join-menu-panel,
.session-host__join-viewport-overlay__surface.session-host__join-menu-panel {
  max-width: min(26rem, 100vw - 1.25rem);
  max-height: min(100dvh - 1rem, 40rem) !important;
  min-width: 0;
  outline: none;
  border-radius: var(--mat-sys-corner-large);
  border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 24%, var(--mat-sys-outline-variant));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 8%, transparent), var(--mat-sys-level3);
  /* Höhere Surface-Stufe + leichter Primary-Glow: klarer Kontrast zur Lobby / Live-Leiste (container-low). */
  background: radial-gradient(ellipse 120% 80% at 50% 0%, color-mix(in srgb, var(--mat-sys-primary) 14%, transparent), transparent 58%), var(--mat-sys-surface-container-high);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-qr-image {
  display: block;
  width: min(var(--app-qr-size), 100%);
  height: min(var(--app-qr-size), 100%);
  max-width: 100%;
  padding: 0.35rem;
  border: 1px solid var(--mat-sys-outline-variant);
  background: #fff;
  margin-inline: auto;
  border-radius: var(--mat-sys-corner-small);
  object-fit: contain;
  box-sizing: border-box;
}

html.dark .app-qr-image {
  border-color: #fff;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .app-qr-image {
    border-color: #fff;
  }
}
.app-live-channel-shell {
  width: min(100%, var(--app-live-channel-max-width));
  margin-inline: auto;
  box-sizing: border-box;
}

@media (max-width: 599px) {
  .app-live-channel-shell {
    width: min(var(--app-live-channel-max-width), 100vw - 2 * var(--host-mobile-inline));
  }
}
.app-status-help-dialog-panel .mat-mdc-dialog-surface {
  border-radius: var(--mat-sys-corner-extra-large, var(--mat-sys-corner-large));
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 44%, transparent);
  background: var(--mat-sys-surface-container-high);
  box-shadow: var(--mat-sys-level3);
}

.app-status-help-dialog-panel .mat-mdc-dialog-content {
  max-height: min(84dvh, 42rem);
}

.feedback-compare-round-snackbar.mat-mdc-snack-bar-container {
  --mdc-snackbar-container-color: transparent;
  --mat-snack-bar-button-color: var(--mat-sys-on-primary-container);
}

.feedback-compare-round-snackbar .mat-mdc-snackbar-surface {
  border-radius: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 20%, var(--mat-sys-outline-variant));
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--mat-sys-primary) 14%, transparent), transparent 62%), color-mix(in srgb, var(--mat-sys-surface-container-high) 92%, var(--mat-sys-surface));
  box-shadow: 0 1rem 2rem color-mix(in srgb, black 16%, transparent);
  color: var(--mat-sys-on-surface);
}

.feedback-compare-round-snackbar .mat-mdc-snack-bar-label {
  font-weight: 600;
  line-height: 1.45;
}

.feedback-compare-round-snackbar .mat-mdc-snack-bar-action {
  align-self: center;
  border-radius: 999px;
  background: var(--mat-sys-primary-container);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
  color: var(--mat-sys-on-primary-container);
  padding-inline: 0.8rem;
  min-width: 0;
}

.feedback-compare-round-snackbar .mat-mdc-snack-bar-action .mdc-button__label {
  font-weight: 700;
}

.feedback-compare-round-snackbar .mat-mdc-snack-bar-action:hover {
  background: color-mix(in srgb, var(--mat-sys-primary-container) 88%, var(--mat-sys-surface));
}

@media (max-width: 600px), (max-height: 700px) {
  .feedback-compare-round-snackbar .mat-mdc-snackbar-surface {
    border-radius: 1rem;
  }
  .feedback-compare-round-snackbar .mat-mdc-snack-bar-label {
    font-size: 0.95rem;
    line-height: 1.4;
  }
}
@media (max-width: 600px), (max-height: 700px) {
  .app-qr-image {
    width: min(var(--app-qr-size-compact), 100%);
    height: min(var(--app-qr-size-compact), 100%);
  }
}
.markdown-katex-error {
  color: var(--mat-sys-error);
  font: var(--mat-sys-body-small);
}

.quiz-edit-question__text p,
.quiz-edit-question__answer-text p {
  margin: 0.45rem 0;
}

.quiz-edit-form__preview-content p,
.quiz-edit-form__preview-answers p {
  margin: 0.55rem 0;
}

.quiz-edit-form__preview-content h1,
.quiz-edit-form__preview-content h2,
.quiz-edit-form__preview-content h3,
.quiz-edit-form__preview-content h4,
.quiz-edit-form__preview-answers h1,
.quiz-edit-form__preview-answers h2,
.quiz-edit-form__preview-answers h3,
.quiz-edit-form__preview-answers h4 {
  margin: 0.85rem 0 0.45rem;
  line-height: 1.35;
}

.quiz-preview-question__text p {
  margin: 0.6rem 0;
}

.quiz-preview-question__answer-content p {
  margin: 0.45rem 0;
}

.quiz-preview-question__text h1,
.quiz-preview-question__text h2,
.quiz-preview-question__text h3,
.quiz-preview-question__text h4,
.quiz-preview-question__answer-content h1,
.quiz-preview-question__answer-content h2,
.quiz-preview-question__answer-content h3,
.quiz-preview-question__answer-content h4 {
  margin: 0.9rem 0 0.5rem;
  line-height: 1.35;
}

.quiz-preview-question__text ul,
.quiz-preview-question__text ol,
.quiz-preview-question__answer-content ul,
.quiz-preview-question__answer-content ol {
  margin: 0.55rem 0 0.6rem;
  padding-left: 1.35rem;
}

.quiz-preview-question__text li,
.quiz-preview-question__answer-content li {
  margin: 0.2rem 0;
}

.quiz-preview-question__text blockquote,
.quiz-preview-question__answer-content blockquote {
  margin: 0.7rem 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--mat-sys-outline-variant);
}

/* Quiz-MD-Bilder kommen aus [innerHTML] und brauchen deshalb globale Begrenzungen. */
.quiz-preview-question__text img,
.quiz-preview-question__answer-content img,
.quiz-preview-question__text a img,
.quiz-preview-question__answer-content a img,
.quiz-edit-question__summary img,
.quiz-edit-question__summary a img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  max-height: 33vh !important;
  height: auto !important;
  margin: clamp(0.75rem, 2vw, 1rem) auto;
  object-fit: contain;
}

/* Session-Host: Markdown/KaTeX in Frage und Antworten (gleiche Typo wie Quiz-Vorschau) */
.session-host__question-title-inner p,
.session-host__rich-text p {
  margin: 0.45rem 0;
}

.session-host__question-title-inner h1,
.session-host__question-title-inner h2,
.session-host__question-title-inner h3,
.session-host__question-title-inner h4,
.session-host__rich-text h1,
.session-host__rich-text h2,
.session-host__rich-text h3,
.session-host__rich-text h4 {
  margin: 0.9rem 0 0.5rem;
  line-height: 1.35;
}

.session-host__question-title-inner ul,
.session-host__question-title-inner ol,
.session-host__rich-text ul,
.session-host__rich-text ol {
  margin: 0.55rem 0 0.6rem;
  padding-left: 1.35rem;
}

.session-host__question-title-inner li,
.session-host__rich-text li {
  margin: 0.2rem 0;
}

.session-host__question-title-inner blockquote,
.session-host__rich-text blockquote {
  margin: 0.7rem 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--mat-sys-outline-variant);
}

/* Fragetext/Formeln im Rahmen halten + Silbentrennung (z. B. Frage 9) */
.session-host__question-title-inner {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.session-host__rich-text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.vote-question__text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.vote-answer__text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-preview-question__text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-preview-question__answer-content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-edit-question__text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-edit-question__answer-text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-edit-form__preview-content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-edit-form__preview-answers {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.session-present__qa-text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.session-present__qa-list-text {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.quiz-list-item__description {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* Weniger „Witwen“/Satzzeichen am Zeilenanfang (z. B. Punkt nach KaTeX) */
@supports (text-wrap: pretty) {
  .session-host__question-title-inner {
    text-wrap: pretty;
  }
  .session-host__rich-text {
    text-wrap: pretty;
  }
  .vote-question__text {
    text-wrap: pretty;
  }
  .vote-answer__text {
    text-wrap: pretty;
  }
  .quiz-preview-question__text {
    text-wrap: pretty;
  }
  .quiz-preview-question__answer-content {
    text-wrap: pretty;
  }
  .quiz-edit-question__text {
    text-wrap: pretty;
  }
  .quiz-edit-question__answer-text {
    text-wrap: pretty;
  }
  .quiz-edit-form__preview-content {
    text-wrap: pretty;
  }
  .quiz-edit-form__preview-answers {
    text-wrap: pretty;
  }
  .session-present__qa-text {
    text-wrap: pretty;
  }
  .session-present__qa-list-text {
    text-wrap: pretty;
  }
  .quiz-list-item__description {
    text-wrap: pretty;
  }
}
/* KaTeX: line-height kompakt halten; overflow-y: hidden verhindert unerwünschten vertikalen Scrollbalken (v. a. bei overflow-x: auto, siehe GitHub KaTeX #2942) */
.katex,
.katex-display {
  line-height: 1.5 !important;
  overflow-y: hidden;
}

.katex-display {
  margin: 0.75em 0;
}

/*
 * KaTeX im Fließtext: äußeres Inline-Math als display:inline + ohne overflow-x:auto – sonst
 * promoten Browser oft zu inline-block und brechen vor Satzzeichen um (Punkt in der nächsten Zeile).
 * Zu breite Formeln: horizontaler Scroll am .katex-display-Wrapper; Inline-Formeln nutzen max-width im Fluss.
 * (overflow-x:auto am Inline-Span: KaTeX #2942 / vertikaler Scrollbalken; hier nur auf Display-Blöcken.)
 */
.session-host__question-title-inner .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.session-host__question-title-inner .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.session-host__question-title-inner .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.session-host__rich-text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.session-host__rich-text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.session-host__rich-text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.vote-question__text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.vote-question__text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.vote-question__text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.vote-answer__text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.vote-answer__text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.vote-answer__text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-preview-question__text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-preview-question__text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-preview-question__text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-preview-question__answer-content .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-preview-question__answer-content .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-preview-question__answer-content .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-edit-question__text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-edit-question__text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-edit-question__text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-edit-question__answer-text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-edit-question__answer-text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-edit-question__answer-text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-edit-form__preview-content .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-edit-form__preview-content .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-edit-form__preview-content .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-edit-form__preview-answers .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-edit-form__preview-answers .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-edit-form__preview-answers .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.session-present__qa-text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.session-present__qa-text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.session-present__qa-text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.session-present__qa-list-text .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.session-present__qa-list-text .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.session-present__qa-list-text .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.quiz-list-item__description .katex {
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  display: inline;
  vertical-align: baseline;
}

.quiz-list-item__description .katex-display {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.quiz-list-item__description .katex-display > .katex {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Markdown-Tabellen in Fragen, Antworten, Vorschau, Host, Vote und Quiz-Beschreibung. */
.session-host__question-title-inner table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.session-host__question-title-inner th,
.session-host__question-title-inner td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.session-host__question-title-inner thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.session-host__question-title-inner tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.session-host__rich-text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.session-host__rich-text th,
.session-host__rich-text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.session-host__rich-text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.session-host__rich-text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.vote-question__text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.vote-question__text th,
.vote-question__text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.vote-question__text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.vote-question__text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.vote-answer__text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.vote-answer__text th,
.vote-answer__text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.vote-answer__text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.vote-answer__text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-preview-question__text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-preview-question__text th,
.quiz-preview-question__text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-preview-question__text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-preview-question__text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-preview-question__answer-content table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-preview-question__answer-content th,
.quiz-preview-question__answer-content td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-preview-question__answer-content thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-preview-question__answer-content tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-edit-question__text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-edit-question__text th,
.quiz-edit-question__text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-edit-question__text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-edit-question__text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-edit-question__answer-text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-edit-question__answer-text th,
.quiz-edit-question__answer-text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-edit-question__answer-text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-edit-question__answer-text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-edit-form__preview-content table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-edit-form__preview-content th,
.quiz-edit-form__preview-content td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-edit-form__preview-content thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-edit-form__preview-content tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-edit-form__preview-answers table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-edit-form__preview-answers th,
.quiz-edit-form__preview-answers td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-edit-form__preview-answers thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-edit-form__preview-answers tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.session-present__qa-text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.session-present__qa-text th,
.session-present__qa-text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.session-present__qa-text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.session-present__qa-text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.session-present__qa-list-text table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.session-present__qa-list-text th,
.session-present__qa-list-text td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.session-present__qa-list-text thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.session-present__qa-list-text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

.quiz-list-item__description table {
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font: var(--mat-sys-label-small);
  font-size: 0.9em;
}

.quiz-list-item__description th,
.quiz-list-item__description td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 35%, transparent);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: 1.5;
}

.quiz-list-item__description thead th {
  background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
  font-weight: 600;
}

.quiz-list-item__description tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
}

/* Erste Spalte (# / laufende Nr.): nur Platz für zwei Ziffern, Rest für die anderen Spalten */
.quiz-list-item__description th:first-child,
.quiz-list-item__description td:first-child {
  box-sizing: border-box;
  width: calc(2ch + 0.65rem);
  max-width: calc(2ch + 0.65rem);
  min-width: 0;
  padding-inline: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* KI-Prompt-Karte: Flex-Kinder dürfen schrumpfen (sonst breitet <pre> die Seite aus) */
.quiz-list__ai-card.mat-mdc-card {
  min-width: 0;
  max-width: 100%;
}

.quiz-list__ai-card .mat-mdc-card-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* KI-Prompt-Vorschau (Quiz-Liste): Markdown per [innerHTML] — global, damit keine :deep/-Encapsulation nötig ist */
.quiz-list__ai-prompt-markdown {
  padding: 0.65rem 0.75rem;
  font: var(--mat-sys-label-small);
  line-height: 1.5;
  color: var(--mat-sys-on-surface);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

.quiz-list__ai-prompt-markdown p {
  margin: 0.4rem 0;
}

.quiz-list__ai-prompt-markdown p:first-child {
  margin-top: 0;
}

.quiz-list__ai-prompt-markdown p:last-child {
  margin-bottom: 0;
}

.quiz-list__ai-prompt-markdown ul,
.quiz-list__ai-prompt-markdown ol {
  margin: 0.4rem 0 0.55rem;
  padding-left: 1.3rem;
}

.quiz-list__ai-prompt-markdown li {
  margin: 0.18rem 0;
  overflow-wrap: anywhere;
}

.quiz-list__ai-prompt-markdown h1,
.quiz-list__ai-prompt-markdown h2,
.quiz-list__ai-prompt-markdown h3,
.quiz-list__ai-prompt-markdown h4 {
  margin: 0.65rem 0 0.3rem;
  font: var(--mat-sys-label-large);
  font-weight: 600;
  line-height: 1.35;
}

.quiz-list__ai-prompt-markdown h1:first-child,
.quiz-list__ai-prompt-markdown h2:first-child,
.quiz-list__ai-prompt-markdown h3:first-child,
.quiz-list__ai-prompt-markdown h4:first-child {
  margin-top: 0;
}

.quiz-list__ai-prompt-markdown pre {
  margin: 0.5rem 0;
  padding: 0.45rem 0.55rem;
  overflow-x: auto;
  border-radius: var(--mat-sys-corner-small);
  background: color-mix(in srgb, var(--mat-sys-surface-container-high) 72%, var(--mat-sys-surface));
  border: 1px solid color-mix(in srgb, var(--mat-sys-outline) 12%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.625rem;
  line-height: 1.38;
}

.quiz-list__ai-prompt-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}

.quiz-list__ai-prompt-markdown pre code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.625rem;
  line-height: inherit;
  background: none;
  padding: 0;
  border: 0;
}

.quiz-list__ai-prompt-markdown p code,
.quiz-list__ai-prompt-markdown li code {
  padding: 0.1rem 0.3rem;
  border-radius: var(--mat-sys-corner-extra-small);
  background: color-mix(in srgb, var(--mat-sys-surface-container-high) 80%, var(--mat-sys-surface));
}

.quiz-list__ai-prompt-markdown blockquote {
  margin: 0.45rem 0;
  padding-left: 0.65rem;
  border-left: 3px solid var(--mat-sys-outline-variant);
  color: var(--mat-sys-on-surface-variant);
}

.quiz-list__ai-prompt-markdown strong {
  font-weight: 700;
}

.quiz-list__ai-prompt-markdown hr {
  margin: 0.65rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline) 22%, transparent);
}

.cdk-overlay-pane.mat-mdc-dialog-panel {
  max-width: calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
}

.mat-mdc-dialog-container .mat-mdc-dialog-surface {
  max-height: min(88dvh, 100vh - 1.25rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.mat-mdc-dialog-container .mat-mdc-dialog-content {
  -webkit-overflow-scrolling: touch;
}

/* Markdown „Link/Bild einfügen“: Clipping kommt von Dialog-/MDC-Containern (nicht aus Component-SCSS erreichbar). */
.cdk-overlay-pane.md-markdown-insert-dialog-panel .mat-mdc-dialog-inner-container,
.cdk-overlay-pane.md-markdown-insert-dialog-panel .mdc-dialog__container,
.cdk-overlay-pane.md-markdown-insert-dialog-panel .mat-mdc-dialog-container {
  overflow: visible !important;
}

.cdk-overlay-pane.md-markdown-insert-dialog-panel .mat-mdc-dialog-surface {
  overflow: visible !important;
}

.cdk-overlay-pane.md-markdown-insert-dialog-panel .mat-mdc-dialog-content.md-markdown-insert-dialog__content {
  padding-top: 2rem !important;
  padding-bottom: 1rem !important;
  overflow: visible !important;
}

.cdk-overlay-pane.md-markdown-insert-dialog-panel .md-markdown-insert-dialog__content .mat-mdc-form-field,
.cdk-overlay-pane.md-markdown-insert-dialog-panel .md-markdown-insert-dialog__content .mat-mdc-text-field-wrapper,
.cdk-overlay-pane.md-markdown-insert-dialog-panel .md-markdown-insert-dialog__content .mdc-notched-outline,
.cdk-overlay-pane.md-markdown-insert-dialog-panel .md-markdown-insert-dialog__content .mat-mdc-notch-piece {
  overflow: visible !important;
}

/* „100%“ bezieht sich auf den schmalen MDC-Label-Wrapper → Ellipsis („Text“ → „Tex“). */
.cdk-overlay-pane.md-markdown-insert-dialog-panel .md-markdown-insert-dialog__content .mat-mdc-floating-label,
.cdk-overlay-pane.md-markdown-insert-dialog-panel .md-markdown-insert-dialog__content .mdc-floating-label {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (prefers-reduced-motion: reduce) {
  .mat-mdc-dialog-container .mat-mdc-dialog-surface,
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}
.mat-mdc-snack-bar-container {
  margin: 0 0.5rem max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
  max-width: min(100vw - 1rem, 40rem) !important;
}

/* Motd-Zähler: MD3-Overlap behalten, Ziffern zentrieren; Breite für 99+ wachsen lassen.
 * `display: none` von `.mat-badge-hidden` muss !important gewinnen, sonst bleibt ein leerer Punkt. */
.top-toolbar__motd-btn.mat-badge:not(.mat-badge-hidden) .mat-badge-content {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: var(--mat-badge-container-size, 16px);
  height: var(--mat-badge-container-size, 16px);
  min-height: var(--mat-badge-container-size, 16px);
  line-height: 1;
  padding: 0 4px;
  font-size: var(--mat-badge-text-size, 0.6875rem);
  font-weight: 600;
}

.top-toolbar__motd-btn.mat-badge-hidden .mat-badge-content {
  display: none !important;
}

/*
 * Footer-Primäraktionen: Material-Touch-Target (≥44px) ohne die sichtbare Leiste
 * auf 48px aufzublähen. Das Target wird von MatButton ohne Host-_ngcontent erzeugt,
 * daher greifen Regeln in app.component.scss (Emulated Encapsulation) nicht.
 */
.app-footer__links > .app-footer__primary.mat-mdc-button-base .mat-mdc-button-touch-target {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--mat-button-text-touch-target-size, 2.75rem) !important;
  transform: translateY(-50%) !important;
}

/*
 * Footer-Mehr-Menü im CDK-Overlay: feste Icon-Spalte + gleicher Gap zum Label
 * (sonst flattert der Abstand wegen Glyph-Breite / margin:0 auf .app-footer__icon).
 * Status-Dot-Farben: Material setzt `.mat-mdc-menu-item .mat-icon` höher priorisiert.
 */
/* class auf <mat-menu> landet als Panel-Klasse (panelClass-Alias). */
.app-footer__more-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon,
.app-footer__more-menu-panel.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1.5rem !important;
  height: 1.5rem !important;
  font-size: 1.5rem !important;
  line-height: 1;
  margin: 0 !important;
  margin-inline: 0 0.75rem !important;
}
.app-footer__more-menu.mat-mdc-menu-panel,
.app-footer__more-menu-panel.mat-mdc-menu-panel {
  /* lens optisch kleiner, bleibt aber in derselben 24px-Spalte → Label-Start fluchtet. */
}
.app-footer__more-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot,
.app-footer__more-menu-panel.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot {
  font-size: 0.875rem !important;
}
.app-footer__more-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--healthy,
.app-footer__more-menu-panel.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--healthy {
  color: var(--app-status-healthy);
}
.app-footer__more-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--busy,
.app-footer__more-menu-panel.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--busy {
  color: var(--app-status-busy);
}
.app-footer__more-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--overloaded,
.app-footer__more-menu-panel.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--overloaded {
  color: var(--mat-sys-error);
}
.app-footer__more-menu.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--unknown,
.app-footer__more-menu-panel.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.app-footer__status-dot--unknown {
  color: var(--mat-sys-outline-variant);
}

/*# sourceMappingURL=styles.css.map*/