/* A25: Landingpage Museumspass (/museumspass/, /en/museumspass/). Nur auf dieser Seite geladen.
   Bildsprache: Reisepass und Stempel. Navy und Orange der Museumsmarke, Fjalla One + Open Sans. */
body.museumspass{--mp-ink:#202864;--mp-night:#171c4b;--mp-signal:#ed7100;--mp-signal-dunkel:#c85e00;--mp-paper:#f3f4f9;--mp-line:#d9dcec;--mp-text:#4c516a;--mp-hell:#ffb472}
body.museumspass #page-body.mp-page{padding:0!important;color:var(--mp-text)}
body.museumspass .mp-wrap{box-sizing:border-box;width:calc(100% - 48px);max-width:1120px;margin:0 auto}
body.museumspass :is(.mp-hero,.mp-page) :is(h1,h2,h3){font-family:"Fjalla One",sans-serif;font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--mp-ink)}
body.museumspass .mp-page :is(p,li){font-size:17px;line-height:1.6}
body.museumspass .mp-page p{margin:0 0 16px}
body.museumspass .mp-section{padding:88px 0}
body.museumspass .mp-section h2{font-size:clamp(30px,3.1vw,40px);line-height:1.15;margin:0 0 32px;max-width:24em;text-wrap:balance}
body.museumspass .mp-section h2+.mp-lead{margin:-16px 0 40px;max-width:40em;font-size:19px;line-height:1.55}
body.museumspass .mp-nb{white-space:nowrap}
body.museumspass .mp-section h3{font-size:22px;line-height:1.25;margin:0 0 8px}
body.museumspass :is(.mp-hero,.mp-page) a:focus-visible{outline:3px solid var(--mp-signal);outline-offset:4px}
body.museumspass :is(#museumspass-start,#so-funktioniert-es,#verbund,#vorteile,#datenschutz,#im-einsatz,#faq,#kontakt){scroll-margin-top:72px}
body.museumspass :is(.mp-step-list,.mp-optionen,.mp-liste,.mp-ds-grid){list-style:none;margin:0;padding:0}
body.museumspass :is(.mp-step-list,.mp-optionen,.mp-liste,.mp-ds-grid)>li{margin:0;list-style:none}

/* Knöpfe */
body.museumspass .mp-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 26px;border-radius:4px;font:700 17px/1.3 "Open Sans",Arial,sans-serif;text-decoration:none;text-align:center;transition:background-color .15s,border-color .15s}
body.museumspass .mp-btn-primary{background:var(--mp-signal);color:#fff;border:2px solid var(--mp-signal)}
body.museumspass .mp-btn-primary:hover{background:var(--mp-signal-dunkel);border-color:var(--mp-signal-dunkel);color:#fff}
body.museumspass .mp-btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
body.museumspass .mp-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* 1. Hero: Text links, Handy mit Pass rechts, Guilloche wie im Reisepass */
body.museumspass .mp-hero{position:relative;overflow:hidden;background:var(--mp-night) url(/assets/museumspass/guilloche-hell.svg) center/480px 240px repeat;color:#fff}
body.museumspass .mp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 78% 50%,rgba(23,28,75,0) 0,rgba(23,28,75,.55) 42%,rgba(23,28,75,.92) 75%);pointer-events:none}
body.museumspass .mp-hero-inner{position:relative;z-index:1;box-sizing:border-box;width:calc(100% - 48px);max-width:1120px;margin:0 auto;padding:72px 0 80px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:center}
body.museumspass .mp-hero h1{color:#fff;font-size:clamp(40px,4.6vw,60px);line-height:1.06;margin:0 0 24px;max-width:13em}
body.museumspass .mp-hero-lead{color:rgba(255,255,255,.9);font-size:20px;line-height:1.6;max-width:31em;margin:0 0 34px}
body.museumspass .mp-hero-actions{display:flex;flex-wrap:wrap;gap:14px 16px}

/* Handy-Grafik: alle Maße in cqw, damit sie mit der Breite mitskaliert */
body.museumspass .mp-phone{container-type:inline-size;box-sizing:border-box;width:100%;max-width:300px;justify-self:end;margin:0;padding:12px;border-radius:46px;background:#0d1135;box-shadow:0 34px 70px rgba(4,6,28,.55),inset 0 0 0 2px #3a4180;transform:rotate(2.5deg)}
body.museumspass .mp-phone-screen{position:relative;box-sizing:border-box;border-radius:10.5cqw;padding:12cqw 6cqw 6cqw;background:#f7f8fc url(/assets/museumspass/guilloche-papier.svg) center top/160cqw auto repeat;color:var(--mp-ink);font-family:"Open Sans",Arial,sans-serif;overflow:hidden}
body.museumspass .mp-phone-screen::before{content:"";position:absolute;top:3.4cqw;left:50%;width:26cqw;height:5.4cqw;border-radius:3cqw;background:#0d1135;transform:translateX(-50%)}
body.museumspass .mp-phone-titel{margin:0 0 4.5cqw;font:400 8cqw/1.1 "Fjalla One",sans-serif;color:var(--mp-ink)}
body.museumspass .mp-phone-label{margin:0 0 2cqw;font-size:4.6cqw;line-height:1.2;font-weight:700;color:#6a6f8c}
body.museumspass .mp-phone-stempel{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;margin:0 0 5cqw}
body.museumspass .mp-phone-stempel img{display:block;width:100%;height:auto}
body.museumspass .mp-phone-stempel img:nth-child(2){transform:rotate(-12deg) scale(.96)}
body.museumspass .mp-phone-stempel img:nth-child(3){transform:rotate(8deg)}
body.museumspass .mp-slot{display:block;aspect-ratio:1;border-radius:50%;border:.7cqw dashed #c3c8e0;margin:2.4cqw}
body.museumspass .mp-phone-abzeichen{display:flex;gap:3cqw;margin:0 0 5cqw}
body.museumspass .mp-phone-abzeichen>span{display:flex;align-items:center;gap:1.8cqw;font-size:4.2cqw;line-height:1.2;font-weight:700}
body.museumspass .mp-phone-abzeichen img{width:11.5cqw;height:auto;flex:none}
body.museumspass .mp-phone-abzeichen .is-offen{color:#8a8fa8;font-weight:400}
body.museumspass .mp-phone-abzeichen .is-offen img{filter:grayscale(1);opacity:.38}
body.museumspass .mp-urkunde{position:relative;background:#fff;border:1px solid var(--mp-line);border-radius:2.4cqw;padding:3.4cqw;box-shadow:0 2cqw 5cqw rgba(32,40,100,.12)}
body.museumspass .mp-urkunde::before{content:"";position:absolute;inset:1.6cqw;border:.5cqw solid #f0c79f;border-radius:1.4cqw;pointer-events:none}
body.museumspass .mp-urkunde-titel{position:relative;margin:0 0 2.4cqw;text-align:center;font:400 5.4cqw/1.1 "Fjalla One",sans-serif;color:var(--mp-ink)}
body.museumspass .mp-urkunde-foto{position:relative;display:block;width:100%;height:auto;border-radius:1.4cqw}
body.museumspass .mp-urkunde-fuss{position:relative;display:flex;align-items:center;justify-content:space-between;gap:3cqw;margin-top:2.6cqw}
body.museumspass .mp-urkunde-zeilen{flex:1;display:grid;gap:1.8cqw}
body.museumspass .mp-urkunde-zeilen i{display:block;height:1.6cqw;border-radius:1cqw;background:#dfe2ef}
body.museumspass .mp-urkunde-zeilen i:last-child{width:62%}
body.museumspass .mp-urkunde-fuss img{width:13cqw;height:auto;flex:none}

/* 2. Schritte */
body.museumspass .mp-steps{background:#fff}
body.museumspass .mp-step-list{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
body.museumspass .mp-step-list::before{content:"";position:absolute;top:22px;left:22px;right:calc(25% - 6px);border-top:2px dashed #b9bfdc}
body.museumspass .mp-step{position:relative;min-width:0}
body.museumspass .mp-step-nr{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--mp-ink);font:400 21px/1 "Fjalla One",sans-serif;color:var(--mp-ink);margin:0 0 18px}
body.museumspass .mp-step-bild{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:10px;margin:0 0 20px}
body.museumspass .mp-step-foto{position:relative;margin:0 0 20px}
body.museumspass .mp-step-foto .mp-step-bild{object-fit:cover;margin:0}
body.museumspass .mp-step-foto .mp-step-abzeichen{position:absolute;right:-10px;bottom:-14px;width:68px;height:auto;filter:drop-shadow(0 4px 8px rgba(23,28,75,.28))}
body.museumspass .mp-step p{margin:0}
body.museumspass .mp-regel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;margin:52px 0 0;padding:28px 32px;background:#fff8f1;border:1px solid #f3dcc6;border-left:4px solid var(--mp-signal);border-radius:6px}
body.museumspass .mp-regel>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:center}
body.museumspass .mp-regel img{width:64px;height:auto}
body.museumspass .mp-regel p{margin:0}
body.museumspass .mp-regel strong{color:var(--mp-ink)}

/* 3. Verbund */
body.museumspass .mp-verbund{background:var(--mp-paper) url(/assets/museumspass/guilloche-papier.svg) center/480px 240px repeat}
body.museumspass .mp-verbund-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center}
body.museumspass .mp-verbund-grafik{margin:0;order:-1}
body.museumspass .mp-ring{container-type:inline-size;position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto}
body.museumspass .mp-ring-linien{position:absolute;inset:0;width:100%;height:100%}
body.museumspass .mp-ring-pass{position:absolute;left:45%;top:45%;width:30cqw;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 14px rgba(32,40,100,.18))}
body.museumspass .mp-haus{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);display:flex;flex-direction:column;align-items:center;width:36cqw;transform:translate(-50%,-8cqw);text-align:center}
body.museumspass .mp-haus img{display:block;width:16cqw;height:auto}
body.museumspass .mp-haus span{margin-top:.6cqw;padding:1px 8px;border-radius:999px;background:rgba(243,244,249,.92);font:700 15px/1.3 "Open Sans",Arial,sans-serif;color:var(--mp-ink);hyphens:manual}
body.museumspass .mp-haus-aussen span{color:#b5470f}
body.museumspass .mp-pos-1{--x:45;--y:13}body.museumspass .mp-pos-2{--x:73;--y:29}body.museumspass .mp-pos-3{--x:73;--y:61}
body.museumspass .mp-pos-4{--x:45;--y:77}body.museumspass .mp-pos-5{--x:17;--y:61}body.museumspass .mp-pos-6{--x:17;--y:29}
body.museumspass .mp-pos-7{--x:86;--y:85}
body.museumspass .mp-verbund-grafik figcaption{margin:14px auto 0;max-width:30em;text-wrap:balance;text-align:center;font-size:16px;line-height:1.5;color:var(--mp-text)}
body.museumspass .mp-optionen{display:grid;gap:26px}
body.museumspass .mp-optionen>li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start}
body.museumspass .mp-optionen img{width:64px;height:64px;background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--mp-line)}
body.museumspass .mp-optionen p{margin:0}

/* 4. Vorteile: aufgeschlagener Pass, links Besucher, rechts Ihr Haus */
body.museumspass .mp-vorteile{background:#fff}
body.museumspass .mp-spread{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px;overflow:hidden;box-shadow:0 22px 48px rgba(32,40,100,.16),0 0 0 1px var(--mp-line)}
body.museumspass .mp-spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:56px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(23,28,75,0),rgba(23,28,75,.16) 48%,rgba(23,28,75,.3) 50%,rgba(23,28,75,.16) 52%,rgba(23,28,75,0));pointer-events:none}
body.museumspass .mp-seite{padding:44px 52px 40px}
body.museumspass .mp-seite-besucher{background:var(--mp-paper) url(/assets/museumspass/guilloche-papier.svg) center/480px 240px repeat}
body.museumspass .mp-seite-haus{background:var(--mp-ink) url(/assets/museumspass/guilloche-hell.svg) center/480px 240px repeat;color:#fff}
body.museumspass .mp-seite h3{font-size:26px;margin:0 0 22px}
body.museumspass .mp-seite-haus h3{color:#fff}
body.museumspass .mp-liste>li{position:relative;padding-left:40px;margin:0 0 14px}
body.museumspass .mp-liste>li:last-child{margin-bottom:0}
body.museumspass .mp-liste>li::before{content:"";position:absolute;left:0;top:1px;width:26px;height:26px;background:url(/assets/museumspass/haken.svg) center/contain no-repeat}
body.museumspass .mp-seite-haus .mp-liste>li{color:rgba(255,255,255,.92)}
body.museumspass .mp-seite-haus .mp-liste>li::before{background-image:url(/assets/museumspass/haken-hell.svg)}

/* 5. Datenschutz */
body.museumspass .mp-datenschutz{background:#fff;padding-top:0}
body.museumspass .mp-ds-box{padding:52px 56px;border-radius:14px;background:var(--mp-paper) url(/assets/museumspass/guilloche-papier.svg) center/480px 240px repeat;border:1px solid var(--mp-line)}
body.museumspass .mp-ds-lead{max-width:40em;margin:-14px 0 34px!important}
body.museumspass .mp-ds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 40px}
body.museumspass .mp-ds-grid img{display:block;width:48px;height:48px;margin:0 0 12px}
body.museumspass .mp-ds-grid h3{font-size:20px}
body.museumspass .mp-ds-grid p{margin:0}

/* 6. Bereits im Einsatz */
body.museumspass .mp-einsatz{background:var(--mp-night) url(/assets/museumspass/guilloche-hell.svg) center/480px 240px repeat;color:#fff}
body.museumspass .mp-einsatz-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
body.museumspass .mp-einsatz h2{color:#fff;margin-bottom:20px}
body.museumspass .mp-einsatz p{color:rgba(255,255,255,.9);max-width:34em}
body.museumspass .mp-einsatz .mp-link{display:inline-flex;align-items:center;min-height:48px;color:var(--mp-hell);font-weight:700;font-size:17px;text-decoration:underline;text-underline-offset:4px}
body.museumspass .mp-einsatz .mp-link:hover{color:#fff}
body.museumspass .mp-orte{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 26px}
body.museumspass .mp-ort{display:inline-block;padding:10px 20px 8px;border:4px double currentColor;border-radius:8px;font:400 30px/1 "Fjalla One",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mp-hell);-webkit-mask:url(/assets/museumspass/tinte-maske.svg) center/220px auto;mask:url(/assets/museumspass/tinte-maske.svg) center/220px auto}
body.museumspass .mp-ort-1{transform:rotate(-7deg)}
body.museumspass .mp-ort-2{transform:rotate(4deg) translateY(10px);color:#fff}
body.museumspass .mp-ort-3{transform:rotate(-3deg) translateY(-4px)}

/* 7. + 8. FAQ und Kontakt wie auf der Museumsseite, nur Abstände und Tippflächen */
body.museumspass .mp-schluss{padding:80px 0 8px}
body.museumspass .mp-schluss .museum-faq{margin-bottom:64px}
body.museumspass .mp-schluss .museum-faq summary{display:flex;align-items:center;min-height:48px;box-sizing:border-box;font-size:17px}
body.museumspass .mp-schluss .museum-faq details p{font-size:17px;line-height:1.6}
body.museumspass .mp-schluss :is(.museum-faq,.museum-contact) h2{font-size:clamp(28px,2.8vw,36px);line-height:1.2;text-transform:none}
body.museumspass .mp-schluss .museum-contact .museum-cta{min-height:52px;box-sizing:border-box;display:inline-flex;align-items:center;font-size:17px}
body.museumspass .mp-schluss .museum-contact-address a{display:inline-flex;align-items:center;min-height:44px}

/* Tablet */
@media (max-width:1000px){
 body.museumspass .mp-hero-inner{grid-template-columns:minmax(0,1fr) 280px;gap:44px}
 body.museumspass .mp-step-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
 body.museumspass .mp-step-list::before{display:none}
 body.museumspass .mp-verbund-grid,body.museumspass .mp-einsatz-grid{grid-template-columns:1fr;gap:40px}
 body.museumspass .mp-verbund-grafik{order:0}
 body.museumspass .mp-ds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.museumspass .mp-seite{padding:36px 32px}
}
/* Handy */
@media (max-width:700px){
 body.museumspass .mp-wrap,body.museumspass .mp-hero-inner{width:calc(100% - 36px)}
 body.museumspass .mp-hero-inner{grid-template-columns:1fr;gap:48px;padding:36px 0 56px}
 body.museumspass .mp-hero h1{font-size:38px;line-height:1.1;margin-bottom:18px}
 body.museumspass .mp-hero-lead{font-size:17px;margin-bottom:26px}
 body.museumspass .mp-hero-actions{flex-direction:column;align-items:stretch}
 body.museumspass .mp-phone{justify-self:center;width:min(290px,80vw)}
 body.museumspass .mp-page :is(p,li){font-size:16px}
 body.museumspass .mp-section{padding:56px 0}
 body.museumspass .mp-section h2{font-size:30px;margin-bottom:26px}
 body.museumspass .mp-section h2+.mp-lead{margin:-12px 0 30px;font-size:17px}
 body.museumspass .mp-step-list{grid-template-columns:1fr;gap:36px}
 body.museumspass .mp-step-nr{position:absolute;top:10px;left:10px;z-index:2;margin:0;box-shadow:0 2px 6px rgba(23,28,75,.18)}
 body.museumspass .mp-regel{grid-template-columns:1fr;padding:22px 20px;margin-top:40px}
 body.museumspass .mp-regel>div{grid-template-columns:52px minmax(0,1fr);gap:14px}
 body.museumspass .mp-regel img{width:52px}
 body.museumspass .mp-haus span{font-size:16px;padding:0 6px}
 body.museumspass .mp-haus{width:34cqw}
 body.museumspass .mp-spread{grid-template-columns:1fr}
 body.museumspass .mp-spread::after{display:none}
 body.museumspass .mp-seite{padding:30px 22px}
 body.museumspass .mp-seite h3{font-size:24px}
 body.museumspass .mp-ds-box{padding:34px 22px}
 body.museumspass .mp-ds-grid{grid-template-columns:1fr;gap:24px}
 body.museumspass .mp-ds-grid>li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start}
 body.museumspass .mp-ds-grid img{grid-row:span 2;width:40px;height:40px;margin:2px 0 0}
 body.museumspass .mp-verbund-grafik figcaption{margin-top:40px}
 body.museumspass .mp-ort{font-size:24px;padding:8px 14px 6px}
 body.museumspass .mp-schluss{padding-top:56px}
 body.museumspass .mp-schluss .museum-faq summary,body.museumspass .mp-schluss .museum-faq details p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){body.museumspass .mp-btn{transition:none}}