/* mase. Look (Variante 6 „Mix“): dunkler, schräger Einstieg wie ein Sport-Magazin, darunter heller App-Look.
Eine Markenschrift (Poppins, selbst gehostet, kein Google-Abruf) für Überschriften, Knöpfe und Leisten.
Kaum Rundung, schräge Balken wie in App und PDFs. Wird im Theme (layout/theme.liquid) global geladen,
liegt also über system.css / warteliste.css / aufbauplan.css. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(https://app.getmase.de/shop/fonts/poppins-600-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(https://app.getmase.de/shop/fonts/poppins-700-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:700;font-display:swap;src:url(https://app.getmase.de/shop/fonts/poppins-700-italic.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:800;font-display:swap;src:url(https://app.getmase.de/shop/fonts/poppins-800-italic.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:900;font-display:swap;src:url(https://app.getmase.de/shop/fonts/poppins-900-italic.woff2) format("woff2")}
html:root{
--mx-wine:#6B1F2A;--mx-night:#160D0F;--mx-cream:#F4EEE4;--mx-rose:#E8A4AE;
--mx-display:"Poppins",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--mx-text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
--mx-stripes:currentColor;
/* Theme (Horizon): Quicksand raus, kantige Formen */
--font-body--family:var(--mx-text);
--font-subheading--family:var(--mx-display);
--font-heading--family:var(--mx-display);
--font-accent--family:var(--mx-display);
--style-border-radius-buttons-primary:4px;
--style-border-radius-buttons-secondary:4px;
--style-border-radius-popover:4px;
--style-border-radius-inputs:4px;
--style-border-radius-pills:2px;
--style-border-radius-sm:4px;--style-border-radius-md:4px;--style-border-radius-lg:4px;
}
/* ------------------------------------------------------------ Leiste oben + Kopf */
.announcement-bar{background:var(--mx-wine)!important;color:#fff!important}
.announcement-bar .announcement-bar__text,.announcement-bar a{font-family:var(--mx-display)!important;font-style:italic!important;font-weight:900!important;font-size:12px!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#fff!important}
header-component.header,header-component .header__underlay,header-component .header__row>.section-background,header-component .header__row .section-background{background:var(--mx-night)!important;background-image:none!important}
header-component .header__row{--color-foreground:244 238 228;--color-foreground-rgb:244 238 228;color:var(--mx-cream)!important}
header-component .header__row a,header-component .header__row button,header-component .header__row svg{color:var(--mx-cream)!important}
header-component .header__row .header-logo__image{filter:brightness(0) invert(.94)}
.header__menu a,.menu-list__link,.menu-drawer a{font-family:var(--mx-display)!important;font-weight:700!important}
/* Ein einziger App-Eintrag im Menü, am Desktop als weinroter Knopf (kein doppeltes „Die App“ + „Gratis testen“ mehr) */
header-component .header__row :is(.menu-list__link,.header__menu a)[href*="/pages/app"]{background:var(--mx-wine)!important;color:#fff!important;padding:9px 14px!important;border-radius:4px!important;font-style:italic!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.02em}
header-component .header__row :is(.menu-list__link,.header__menu a)[href*="/pages/app"]:hover{background:#4a141d!important}
/* ------------------------------------------------------------ Unsere Seiten (.ms) */
html body .ms{--r:4px}
html body .wl{--wl-r:4px;--wl-f:4px}
html body .ms h1,html body .ms h2{font-family:var(--mx-display)!important;font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.015em!important;line-height:.96!important;text-wrap:balance}
html body .ms h1{font-size:clamp(40px,7vw,84px)}
html body .ms h2{font-size:clamp(28px,4.4vw,52px);font-weight:800}
html body .ms h1 em,html body .ms h2 em{font-style:italic}
html body .ms h3{font-family:var(--mx-display);font-weight:700;letter-spacing:-.02em}
html body .ms .eyebrow,html body .ms .ab-kick,html body .ms .ab-num{font-family:var(--mx-display);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
/* Knöpfe: kantig, kursiv, Versalien */
html body .ms .btn,html body .ms .wl-go,html body .ms .ab-app-go,html body .ms .sh-cta,html body .ms button.btn{border-radius:4px!important;font-family:var(--mx-display)!important;font-style:italic;font-weight:800!important;text-transform:uppercase;letter-spacing:.01em!important}
html body .ms .btn.ghost,html body .ms .btn.secondary{border-radius:4px!important}
/* Pillen werden schräge Etiketten */
html body .ms .wl-brand{border-radius:0!important;transform:skewX(-10deg);box-shadow:none!important;background:#fff}
html body .ms .wl-brand>*{transform:skewX(10deg)}
html body .ms .wl-brand img{border-radius:2px!important}
html body .ms .wl-brand b,html body .ms .wl-brand span{font-family:var(--mx-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
html body .ms .ab-price em,html body .ms .sh-h em,html body .ms .ab-part h3 em{border-radius:0!important;transform:skewX(-12deg);font-family:var(--mx-display);font-style:italic;font-weight:900}
/* Karten, Bilder, Felder: kaum Rundung */
html body .ms .ab-part,html body .ms .ab-rev,html body .ms .ab-app-in,html body .ms .sh-card,html body .ms .sh-hero,html body .ms .ab-hero-img,html body .ms .wl-signup,html body .ms .card,html body .ms .faq details,html body .ms .wl-field input,html body .ms input,html body .ms select,html body .ms textarea{border-radius:4px!important}
html body .ms .sh-img,html body .ms .ab-part-img img,html body .ms .wl-us-img,html body .ms figure img{border-radius:2px!important}
html body .ms .sh-card{box-shadow:none!important;border:2px solid transparent}
html body .ms .sh-top{border-color:var(--mx-wine);box-shadow:none!important}
/* Schräge Balken unter Abschnitts-Überschriften (wie in App und PDFs) */
html body .ms .c>h2:first-child::after,html body .ms .c h2::after{margin-inline:auto}
/* ------------------------------------------------------------ Einstieg: dunkel und schräg */
html body .ms .wl-hero,html body .ms .sh-head{position:relative;background:var(--mx-night)!important;color:var(--mx-cream);clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),0 100%);padding-bottom:84px!important;isolation:isolate}
html body .ms .wl-hero h1,html body .ms .sh-head h1{color:var(--mx-cream)}
html body .ms .wl-hero h1 em,html body .ms .sh-head h1 em{color:var(--mx-rose)}
html body .ms .wl-hero .sub,html body .ms .sh-head .sub{color:rgba(244,238,228,.8)!important}
html body .ms .wl-hero .wl-mini,html body .ms .wl-hero .wl-mini b{color:rgba(244,238,228,.85)}
html body .ms .wl-hero .wl-signup,html body .ms .wl-hero .ab-box{color:var(--ink,#1d1416)}
html body .ms .sh-head{padding-top:36px!important}
html body .ms .sh-list{padding-top:12px!important}
html body .ms .sh-hero{transform:none}
/* Startseite (.hero) und System-Seite: gleiche Schrift, Knöpfe kantig */
html body .ms .hero h1 em{color:var(--mx-rose)}
/* Dunkelmodus: Einstieg bleibt dunkel, Akzent rosé */
html[data-mt=dark] .ms .sh-top{border-color:#9b2a3b}
html[data-mt=dark] .ms section:not(.wl-hero):not(.hero):not(.sh-head)>.w>h2:first-child::after,html[data-mt=dark] .ms .sh-sub::after{color:var(--mx-rose)}
@media (prefers-reduced-motion:reduce){.ms .wl-brand,html body .ms .ab-price em{transform:none}}
/* Rundungen überall kappen (Template-Look raus), Kreise bleiben Kreise */
html body .ms :is(div,a,span,figure,article,aside,button,input,select,textarea,details,summary,li,label,img,video,form,blockquote,dl,dd,ul){border-radius:4px!important}
html body .ms :is(.wl-mini img,[class*=avatar],[class*=dot],.wl-you,.wl-av){border-radius:50%!important}
html body .ms :is(h1,h2) em{font-style:italic!important}
html body .ms .wl-brand b{color:#1d1416}
/* Kauf-Leiste unten (hängt außerhalb von .ms) */
html body .wl-bar{border-radius:4px!important}
html body .wl-bar button,html body .wl-bar a{border-radius:4px!important;font-family:var(--mx-display)!important;font-style:italic;font-weight:800!important;text-transform:uppercase}
html body .wl-bar b{font-family:var(--mx-display);font-weight:700}
/* ------------------------------------------------------------ Startseite (Theme-Abschnitt .hp) */
html body .hp h1,html body .hp h2{font-family:var(--mx-display)!important;font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.015em!important;line-height:.96!important;text-wrap:balance}
html body .hp h2{font-weight:800}
html body .hp :is(h1,h2) em,html body .hp :is(h1,h2) i{font-style:italic!important}
html body .hp h3{font-family:var(--mx-display)!important;font-weight:700;letter-spacing:-.02em}
html body .hp .hp-btn{border-radius:4px!important;font-family:var(--mx-display)!important;font-style:italic;font-weight:800!important;text-transform:uppercase;letter-spacing:.01em}
html body .hp :is(article,div,span,input,em,video,img,figure,a,button,label,details){border-radius:4px!important}
html body .hp :is(.v2-phone,.dot,.hp-vn-badge,i){border-radius:50%!important}
html body .hp .v2-phone{border-radius:15px!important}
html body .hp :is(.hp-soon,.hp-vn-tag){border-radius:0!important;transform:skewX(-10deg);font-family:var(--mx-display);font-style:italic;font-weight:800;text-transform:uppercase}
html body .hp h1{font-size:clamp(40px,10vw,84px)}
/* ------------------------------------------------------------ Verkaufs-Bausteine (Black Friday) */
html body .ms .mx-wins{list-style:none;margin:22px auto 0;padding:0;display:grid;gap:10px;max-width:420px;text-align:left}
html body .ms .mx-wins li{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:600;letter-spacing:-.01em}
html body .ms .mx-wins li::before{content:"";flex:none;width:10px;height:10px;color:var(--mx-wine);background:var(--mx-stripes)}
html body .ms .mx-wins-s{margin:14px 0 6px;max-width:none}
html body .ms .mx-wins-s li{font-size:15px}
html body .ms .mx-code{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;max-width:460px;margin:22px auto 0;padding:14px 16px;background:var(--mx-cream);color:#1d1416;border:2px solid var(--mx-wine);border-radius:4px!important;text-align:left}
html body .ms .mx-code-l{display:grid;gap:2px}
html body .ms .mx-code-k{font-family:var(--mx-display);font-style:italic;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-wine)}
html body .ms .mx-code-c{font-family:var(--mx-display);font-style:italic;font-weight:900;font-size:30px;line-height:1;letter-spacing:.02em}
html body .ms .mx-code-d{font-size:13px;color:#5a4c4f}
html body .ms .mx-copy{min-height:44px;padding:0 16px;border:0;border-radius:4px!important;background:var(--mx-wine);color:#fff;font-family:var(--mx-display);font-style:italic;font-weight:800;font-size:14px;text-transform:uppercase;cursor:pointer}
html body .ms .mx-copy:active{transform:scale(.97)}
html body .ms .mx-cd{grid-column:1/-1;margin:2px 0 0;font-size:14px;font-weight:600}
html body .ms .mx-cd b{font-family:var(--mx-display);font-style:italic;font-weight:900;font-variant-numeric:tabular-nums;color:var(--mx-wine)}
html body .ms .mx-bonus{margin:10px 0 0;padding:10px 12px;background:rgba(107,31,42,.08);border-left:0;font-size:14px;line-height:1.4}
html body .ms .mx-bonus b{color:var(--mx-wine)}
html body .ms .mx-obj h2{margin-top:6px}
html body .ms .mx-obj-t{font-size:clamp(17px,1.9vw,20px);line-height:1.5;margin-top:18px;color:#3a2f31;max-width:36em}
html body .ms .mx-quote{margin:28px 0 0;padding:20px 22px;background:var(--mx-night);color:var(--mx-cream);border-radius:4px!important}
html body .ms .mx-quote blockquote{margin:0;font-family:var(--mx-display);font-style:italic;font-weight:800;font-size:clamp(19px,2.2vw,24px);line-height:1.3}
html body .ms .mx-quote figcaption{margin-top:12px;font-size:14px;color:rgba(244,238,228,.75)}
html body .ms .mx-quote figcaption b{color:var(--mx-rose)}
.ms-dlg .mx-dlg-bonus{margin:0 0 6px;padding:10px 12px;background:rgba(107,31,42,.08);font-size:14px}
.ms-dlg .mx-dlg-bonus b{color:#6B1F2A}
.ms-dlg [hidden]{display:none!important}
html[data-mt=dark] body .ms .mx-obj-t{color:rgba(244,238,228,.82)}
/* System- und Black-Friday-Seite: Einstieg dunkel und schräg, auch auf breiten Bildschirmen randlos */
html body .ms .hero{position:relative;isolation:isolate;color:var(--mx-cream);background:none!important;border-image:linear-gradient(var(--mx-night),var(--mx-night)) fill 0//0 100vw;clip-path:polygon(-100vw 0,calc(100% + 100vw) 0,calc(100% + 100vw) calc(100% - 44px),-100vw 100%);padding-bottom:110px!important}
html body .ms .hero h1{color:var(--mx-cream)}
html body .ms .hero .sub,html body .ms .hero .price,html body .ms .hero .assure li{color:rgba(244,238,228,.82)!important}
html body .ms .hero .price b{color:var(--mx-cream)}
html body .ms .hero .eyebrow,html body .ms .hero .lnk{color:var(--mx-rose)!important}
html body .ms .hero .mx-wins li{color:var(--mx-cream)}
html body .ms .hero .mx-wins li::before{color:var(--mx-rose)}
html body .ms .hero .hp-ld,html body .ms .hero .ld{will-change:auto}
html body .ms .hero .mx-wins,html body .ms .hero .mx-code{order:4}
html body .ms .hero .mx-wins{margin-top:26px}
/* Preiskarte (weinrot): Bonus und Ergebnisse hell */
html body .ms .col.top .mx-bonus{background:rgba(255,255,255,.12);color:#fff}
html body .ms .col.top .mx-bonus b{color:var(--mx-rose)}
html body .ms .col.top .mx-wins-s li{color:#fff;border:0!important;padding:0!important;min-height:0}
html body .ms .col.top .mx-wins-s li::before{color:var(--mx-rose)}
html body .ms :is(p.tag,.save,.billing,.billing button,.billing span,.delta){border-radius:2px!important}
html body .ms p.tag{transform:skewX(-10deg);font-family:var(--mx-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
html body .ms h3{font-family:var(--mx-display)}
/* Kaufleiste der System-/BF-Seite */
html body #ms-bar,html body .ms-bar{border-radius:4px!important}
html body #ms-bar a,html body .ms-bar a{border-radius:4px!important;font-family:var(--mx-display)!important;font-style:italic;font-weight:800!important;text-transform:uppercase}
html body #ms-bar b,html body .ms-bar b{font-family:var(--mx-display)}
.ms-dlg,.ms-dlg .go,.ms-dlg button,.ms-dlg input{border-radius:4px!important}
.ms-dlg h3,.ms-dlg .go{font-family:"Poppins",-apple-system,system-ui,sans-serif}
.ms-dlg .go{font-style:italic;font-weight:800;text-transform:uppercase}
/* Videos: nie einen Play-Knopf zeigen (iPhone blendet ihn sonst ein, wenn Autoplay gesperrt ist) */
video::-webkit-media-controls,video::-webkit-media-controls-panel,video::-webkit-media-controls-overlay-play-button,video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none!important;opacity:0!important}
/* App-Video als echtes Handy (wie die anderen Handys auf der Seite): runder Rahmen, Statusleiste mit 9:41, Dynamic Island, Empfang und Akku */
html body :is(.ms,.hp) .v2-phone{position:relative;aspect-ratio:740/1350!important;padding:3%!important;border-radius:14%/7.7%!important;background:linear-gradient(150deg,#3a3033 0%,#151112 38%,#0b0909 100%)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 4px #0b0909,0 34px 70px -10px rgba(0,0,0,.6),0 10px 22px rgba(0,0,0,.35)!important;container-type:inline-size}
html body :is(.ms,.hp) .v2-phone video{width:100%!important;max-width:100%!important;height:calc(100% - 14cqw)!important;margin:14cqw 0 0 0!important;clip-path:none!important;border-radius:0 0 11cqw 11cqw!important;object-fit:cover;object-position:top;background:#0E0B0C!important}
html body :is(.ms,.hp) .v2-phone::before{content:"";position:absolute;z-index:2;top:3.19cqw;left:3%;right:3%;aspect-ratio:100/14;border-radius:11cqw 11cqw 0 0!important;background:#0E0B0C url("data:image/svg+xml;utf8,") center/100% 100% no-repeat}
/* Knöpfe zum Draufdrücken: groß, leuchtend, mit Pfeil. Man sieht sofort, wo es weitergeht. */
html body .ms a.btn:not(.o),html body .ms button.btn:not(.o){min-height:60px!important;padding:0 30px!important;gap:12px;font-size:18px!important;font-weight:900!important;letter-spacing:.02em!important;color:#fff!important;background:linear-gradient(180deg,#B02E42 0%,#7E1F2E 100%)!important;box-shadow:0 14px 34px -10px rgba(196,48,70,.85),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08)!important;transition:transform .15s,box-shadow .2s}
html body .ms a.btn.l{color:#7E1F2E!important;background:linear-gradient(180deg,#FFFFFF 0%,#F1E7DC 100%)!important;box-shadow:0 14px 34px -10px rgba(255,255,255,.45),inset 0 0 0 1px rgba(0,0,0,.06)!important}
html body .ms a.btn:not(.o):not(:has(svg))::before{content:"";order:2;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;animation:mxArrow 1.6s ease-in-out infinite}
@keyframes mxArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
html body .ms a.btn:not(.o):active{transform:scale(.97)}
@media (max-width:749px){html body .ms a.btn:not(.o){width:100%;max-width:440px}}
html body #ms-bar a,html body .ms-bar a{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 20px!important;font-size:16px!important;font-weight:900!important;background:linear-gradient(180deg,#B02E42 0%,#7E1F2E 100%)!important;box-shadow:0 10px 26px -8px rgba(196,48,70,.85)!important}
html body .ms-bar a::after{content:"→";font-style:normal}
@media (prefers-reduced-motion:reduce){html body .ms a.btn::before{animation:none!important}}