/* Mirlies – gemeinsame Styles (Farben, Schriften, Fußzeile) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/bricolage-grotesque.woff2') format('woff2-variations'),url('/fonts/bricolage-grotesque.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/nunito-sans-400.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/nunito-sans-600.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/nunito-sans-700.woff2') format('woff2')}

:root{
  --nacht:#0C1428;
  --tinte:#14203A;
  --tinte-2:#1E2C4C;
  --tinte-3:#2B3B60;
  --tiefe:#0F1830;
  --papier:#F4EEE2;
  --nebel:#D8DCE6;
  --grau:#A9B2C8;
  --gold:#F2B84B;
  --gold-hell:#F7D48A;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tinte);color:var(--papier);font-family:'Nunito Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold-hell)}
a:hover{color:var(--papier)}
.lnk{text-decoration:none}
.lnk:hover{color:var(--papier)!important}

/* Platzhalter: gelb markiert, bis die Angabe eingetragen ist */
.ph{display:inline-block;padding:0 8px;border-radius:6px;background:rgba(247,212,138,.14);color:var(--gold-hell);font-weight:600}

/* iPhone-Rahmen für die App-Bildschirme */
.ios{position:relative;width:402px;height:874px;border-radius:48px;overflow:hidden;background:var(--tinte)}
.ios-status{position:absolute;left:0;right:0;top:0;height:54px;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 34px 0 52px;font:600 17px/22px 'Nunito Sans',system-ui,sans-serif;color:var(--papier)}
.ios-island{position:absolute;left:50%;top:11px;width:126px;height:37px;margin-left:-63px;border-radius:20px;background:#000}
.ios-icons{display:flex;align-items:center;gap:6px}
.ios-bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.ios-bars i{display:block;width:3px;border-radius:1px;background:var(--papier)}
.ios-wifi{width:16px;height:12px;position:relative;overflow:hidden}
.ios-wifi::before{content:"";position:absolute;left:50%;top:0;width:22px;height:22px;margin-left:-11px;border-radius:50%;border:3px solid var(--papier);border-color:var(--papier) transparent transparent transparent;box-sizing:border-box}
.ios-wifi::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--papier)}
.ios-batt{width:25px;height:12px;border-radius:3.5px;border:1px solid rgba(244,238,226,.4);padding:1.5px;position:relative}
.ios-batt::before{content:"";display:block;height:100%;border-radius:2px;background:var(--papier)}
.ios-batt::after{content:"";position:absolute;right:-3.5px;top:3.5px;width:1.5px;height:4px;border-radius:0 1px 1px 0;background:rgba(244,238,226,.4)}
.ios-home{position:absolute;left:50%;bottom:8px;width:139px;height:5px;margin-left:-69.5px;border-radius:3px;background:var(--papier);z-index:5;opacity:.9}

/* Rechtsseiten */
.legal-text{display:flex;flex-direction:column;gap:14px;font:400 16px/26px 'Nunito Sans',sans-serif;color:var(--nebel)}
.legal-text h2{margin:28px 0 0;font:700 22px/28px 'Bricolage Grotesque',sans-serif;color:var(--papier)}
.legal-text h3{margin:12px 0 0;font:700 17px/24px 'Nunito Sans',sans-serif;color:var(--papier)}
.legal-text p,.legal-text ul{margin:0;text-wrap:pretty}
.legal-text ul{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.legal-text strong{color:var(--papier)}
.addr{display:flex;flex-direction:column;gap:2px;align-items:flex-start}

/* Hero-Slider auf schmalen Bildschirmen (Klasse wird per Skript gesetzt) */
.slider-ui{display:none}
.m-slider #phone-row{overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:56px!important}
.m-slider #phone-row::-webkit-scrollbar{display:none}
.m-slider .slides{gap:14px!important;align-items:center!important;padding-top:8px!important;padding-bottom:8px!important;margin:0!important}
.m-slider .slide{padding-top:0!important;scroll-snap-align:center;scroll-snap-stop:always;opacity:.5;transform:scale(.94);transition:opacity .3s ease,transform .3s ease;cursor:pointer}
.m-slider .slide.active{opacity:1;transform:none;cursor:default}
.m-slider .cap{display:none!important}
.m-slider .slider-ui{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:20px;position:relative}
.dots{display:flex;gap:4px}
.dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.dots button::before{content:"";display:block;width:8px;height:8px;border-radius:4px;background:var(--tinte-3);transition:width .25s ease,background .25s ease}
.dots button[aria-current="true"]::before{width:22px;background:var(--gold)}
.dots button:focus-visible{outline:2px solid var(--gold-hell);outline-offset:2px;border-radius:8px}
.slider-cap{max-width:320px;min-height:92px;display:flex;flex-direction:column;gap:4px;text-align:center;padding:0 8px}
@media (prefers-reduced-motion:reduce){.m-slider .slide,.dots button::before{transition:none}}