/* faelles/telefon.css – telefonen, mini-hjemmesiden og designer-markøren (bruges af alle varianter) */
:root{--acc:#E4472B;--accfg:#fff;--blue:#3B6CFF;--s:1}

/* telefonen tegnes i 300×620 og skaleres med --s */
.phone-box{width:calc(300px * var(--s));height:calc(620px * var(--s));flex:none;position:relative}
.phone{position:absolute;left:0;top:0;width:300px;height:620px;transform:scale(var(--s));transform-origin:0 0;border-radius:48px;background:#111;padding:9px;box-shadow:0 60px 90px -40px rgba(0,0,0,.5),0 0 0 1.5px #2b2b2b inset}
.phone::before{content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:20px;background:#000;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#fff}

/* ny side */
.ms{--a:var(--acc);--af:var(--accfg);height:100%;overflow-y:auto;scrollbar-width:none;font-family:"Inter Tight",system-ui,sans-serif;color:#161616;font-size:13px;line-height:1.4;position:relative;text-align:left;letter-spacing:0}
.ms::-webkit-scrollbar{display:none}
.ms-nav{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:44px 16px 10px;background:rgba(255,255,255,.97)}
.ms-logo{font-weight:800;font-size:14px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.2em}
.ms-burger{width:18px;height:10px;border-top:2px solid;border-bottom:2px solid;flex:none}
.ms-hero{margin:2px 10px 0;border-radius:24px;background:var(--a);color:var(--af);padding:18px;min-height:300px;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:background .5s,color .5s}
.ms-open{position:relative;z-index:1;font-size:11px;font-weight:600;background:rgba(255,255,255,.2);border-radius:99px;padding:5px 10px;width:max-content;display:flex;gap:6px;align-items:center}
.ms-open::before{content:"";width:6px;height:6px;border-radius:50%;background:#3EE07F}
.ms-deco{position:absolute;right:-26px;top:34px;width:170px;height:170px;opacity:.2;color:var(--af)}
.ms-title{position:relative;z-index:1;margin:auto 0 0;font-size:40px;line-height:.95;letter-spacing:-.045em;font-weight:800;overflow-wrap:anywhere;min-height:.95em;color:inherit}
.ms-tag{position:relative;z-index:1;opacity:.85;margin-top:8px}
.ms-cta{position:relative;z-index:1;margin-top:16px;background:var(--af);color:var(--a);border-radius:99px;padding:12px 16px;font-weight:700;text-align:center;transition:background .5s,color .5s}
.ms-row{display:flex;gap:6px;padding:12px 10px 0;overflow:hidden}
.ms-row span{flex:none;border:1px solid #eaeaea;border-radius:99px;padding:6px 10px;font-size:11px;font-weight:600}
.ms-sec{padding:22px 16px 2px}
.ms-sec h4{font-size:19px;letter-spacing:-.03em;margin:0 0 6px;font-weight:700;color:#161616}
.ms-item{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px dashed #e6e6e6}
.ms-item b{font-weight:600}
.ms-item span{color:#555;white-space:nowrap}
.ms-map{margin:18px 10px 0;height:130px;border-radius:20px;position:relative;overflow:hidden;background:linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%),linear-gradient(0deg,transparent 58%,#fff 58% 62%,transparent 62%),#E3E8EC}
.ms-map::before{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 30%,#fff 30% 33%,transparent 33%)}
.ms-pin{position:absolute;left:46%;top:38%;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--a);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.ms-addr{position:absolute;left:10px;bottom:10px;background:#fff;border-radius:99px;padding:6px 10px;font-size:11px;font-weight:600}
.ms-foot{padding:16px 16px 96px;color:#999;font-size:11px}
.ms-sticky{position:absolute;left:12px;right:12px;bottom:14px;z-index:4;background:#111;color:#fff;border-radius:99px;padding:14px;text-align:center;font-weight:700;font-size:13px;box-shadow:0 10px 24px rgba(0,0,0,.25);font-family:"Inter Tight",system-ui,sans-serif}
.f-serif .ms-title{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:50px;letter-spacing:-.025em;line-height:.9}
.f-fr .ms-title{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:40px;letter-spacing:-.035em}
.f-heavy .ms-title{font-weight:900;text-transform:uppercase;font-size:34px;letter-spacing:-.03em;line-height:.92}
.f-light .ms-title{font-weight:300;font-size:42px;letter-spacing:-.04em}
.ms .b{transition:opacity .45s ease,transform .45s ease}
.ms.building .b{opacity:0;transform:translateY(10px)}
.ms.building .ms-hero{background:#eee}

/* gammel side: en computer-side, der ikke er lavet til mobil (vist bittesmå, som i virkeligheden) */
.old-wrap{width:100%;height:100%;overflow:hidden;background:#fffde0}
.old-site{width:980px;transform:scale(.2878);transform-origin:0 0;font-family:"Times New Roman",Times,serif;color:#000;padding-top:120px}
.o-top{background:linear-gradient(#003399,#0066cc);color:#ffff00;font-size:64px;font-weight:bold;text-align:center;padding:30px 10px;text-shadow:4px 4px 0 #000;border-bottom:6px ridge #c0c0c0}
.o-mq{background:#cc0000;color:#fff;font:bold 26px Arial,sans-serif;padding:10px;white-space:nowrap;overflow:hidden}
.o-grid{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:20px;background:#ffffe0}
.o-nav{background:#c0c0c0;border:4px outset #eee;padding:14px;font:22px Arial,sans-serif;line-height:2}
.o-nav u{color:#0000ee;display:block}
.o-main{font-size:26px;line-height:1.4}
.o-main h2{font-size:44px;color:#cc0000;margin:0 0 10px}
.o-main u{color:#0000ee}
.o-img{width:320px;height:220px;background:#999;border:6px ridge #c0c0c0;display:grid;place-items:center;color:#fff;font:22px Arial,sans-serif;margin:16px 0}
.o-uc{display:inline-block;background:#000;color:#ff0;border:5px dashed #ff0;padding:8px 20px;font:bold 26px Arial,sans-serif;margin:14px 0}
.o-cnt{font:22px monospace;margin-top:10px}
.o-cnt b{background:#000;color:#0f0;padding:0 6px}
.o-foot{font:18px Arial,sans-serif;color:#555;padding:20px;border-top:2px solid #999;margin-top:20px}

/* designer-markør */
.sel{position:absolute;left:0;top:0;width:10px;height:10px;border:1.5px solid var(--blue);pointer-events:none;z-index:20;opacity:0;transition:transform .6s cubic-bezier(.6,0,.2,1),width .6s cubic-bezier(.6,0,.2,1),height .6s cubic-bezier(.6,0,.2,1),opacity .3s}
.sel::before,.sel::after{content:"";position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--blue)}
.sel::before{left:-4.5px;top:-4.5px}.sel::after{right:-4.5px;bottom:-4.5px}
.sel span{position:absolute;left:-1.5px;top:-24px;background:var(--blue);color:#fff;font:500 11px "JetBrains Mono",monospace;padding:3px 7px;border-radius:5px 5px 5px 0;white-space:nowrap}
.cur{position:absolute;left:0;top:0;z-index:21;pointer-events:none;transition:transform .9s cubic-bezier(.6,0,.2,1);opacity:0}
.cur svg{width:22px;height:22px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.cur span{position:absolute;left:16px;top:18px;background:var(--blue);color:#fff;font:600 12px "Inter Tight",sans-serif;padding:4px 9px;border-radius:99px;white-space:nowrap}

/* valg-knapper (varianterne kan ændre farverne via variablerne) */
.chip{--c-bd:rgba(15,15,15,.14);--c-on:#0F0F0F;--c-onfg:#fff;border:1px solid var(--c-bd);background:none;color:inherit;font:inherit;font-size:15px;border-radius:99px;padding:8px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:currentColor}
.chip[aria-pressed=true]{background:var(--c-on);color:var(--c-onfg);border-color:var(--c-on)}
.sw{--ring:#0F0F0F;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .2s}
.sw:hover{transform:scale(1.1)}
.sw[aria-pressed=true]{outline:2px solid var(--ring);outline-offset:3px}

@media (prefers-reduced-motion:reduce){.cur,.sel{display:none}.ms .b{transition:none}}