@font-face{font-family:"Inter";src:url(/assets/fonts/inter-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-Bold.woff) format("woff");font-weight:700 800;font-display:swap}
@font-face{font-family:"Poppins";src:url(/assets/fonts/poppins-Medium.woff) format("woff");font-weight:500 650;font-display:swap}
@font-face{font-family:"Poppins";src:url(/assets/fonts/poppins-Bold.woff) format("woff");font-weight:700 800;font-display:swap}
/* Layout: Gebetszeiten-Leiste oben, klebender Kopf, Seiten mit ruhigen Bändern;
[hidden]{display:none!important}
   Motiv ist der achtzackige Stern (Rub el Hizb) als feines Muster in IGMG-Grün. */
:root{
  --bg:#f2f6f4; --surface:#ffffff; --ink:#0d221d; --muted:#4f625c; --line:#d5e0db;
  --brand:#009771; --brand-ink:#00684e; --brand-soft:#e1f1eb;
  --deep:#0b2b24; --deep-2:#103a31; --deep-ink:#e6f2ee; --deep-muted:#9fc1b6;
  --brass:#a9822f; --todo:#fff2a8; --todo-ink:#5a4a00;
  --lg-main:#0d221d; --lg-sub:#3a3a3a;
  --f-disp:"Poppins", "Segoe UI", system-ui, sans-serif;
  --f-body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r:14px; --gut:max(16px, env(safe-area-inset-left, 0px)); --gutr:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0a1513; --surface:#11201c; --ink:#e4eeea; --muted:#9db0a9; --line:#22352f;
  --brand:#1db58b; --brand-ink:#5fd3ad; --brand-soft:#123129;
  --deep:#061210; --deep-2:#0d221d; --deep-ink:#e4eeea; --deep-muted:#8fb0a5;
  --brass:#d2ad5c; --todo:#5b4d0b; --todo-ink:#fff3b0;
  --lg-main:#eef5f2; --lg-sub:#c4d1cc; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a1513; --surface:#11201c; --ink:#e4eeea; --muted:#9db0a9; --line:#22352f;
  --brand:#1db58b; --brand-ink:#5fd3ad; --brand-soft:#123129;
  --deep:#061210; --deep-2:#0d221d; --deep-ink:#e4eeea; --deep-muted:#8fb0a5;
  --brass:#d2ad5c; --todo:#5b4d0b; --todo-ink:#fff3b0;
  --lg-main:#eef5f2; --lg-sub:#c4d1cc; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--f-body);margin:0;overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--f-disp);font-weight:650;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw + .6rem,3.6rem);font-weight:750;letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,2vw + .9rem,2.2rem)}
h3{font-size:1.1rem}
p{margin:0}
.tn{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.eyebrow{font:600 .78rem/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:.8rem}
.lead{font-size:clamp(1.05rem,.4vw + 1rem,1.2rem);color:var(--muted);max-width:60ch;margin-top:1rem}
.muted{color:var(--muted)}
.todo{background:var(--todo);color:var(--todo-ink);padding:.05em .35em;border-radius:4px;font-weight:500}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.star{fill:none;stroke:currentColor;stroke-width:1.1}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}

/* Gebetszeiten-Leiste */
.strip{background:var(--deep);color:var(--deep-ink);font-size:.86rem}
.strip-in{display:flex;align-items:center;gap:1.2rem;justify-content:space-between;padding-block:.5rem}
.strip-next{display:flex;align-items:center;gap:.4rem;white-space:nowrap;min-width:0}
.strip-next strong{color:#fff}
.strip-next em{font-style:normal;color:var(--deep-muted)}.strip-next em::before{content:"· "}
.dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 0%,transparent)}}
.strip-list{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0}
.strip-list li{display:flex;gap:.4rem;color:var(--deep-muted)}
.strip-list b{color:var(--deep-ink);font-weight:600}
.strip-list li.on{color:#fff}
.strip-list li.on b{color:#fff;border-bottom:2px solid var(--brand)}
.strip-list li.past b{opacity:.55}
@media (max-width:900px){.strip{font-size:.8rem}.strip-in{flex-direction:column;align-items:stretch;gap:.2rem;padding-block:.4rem}.strip-next [data-next-label]{display:none}
  .strip-list{overflow-x:auto;scrollbar-width:none;gap:.9rem;padding-bottom:.1rem}.strip-list::-webkit-scrollbar{display:none}
  .strip-list li{flex:none}}

/* Kopf */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;box-shadow:0 10px 24px -20px rgb(0 0 0/.5)}
.hdr{position:relative;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.brand{display:flex;flex:none}
.logo{height:40px;width:auto;aspect-ratio:1803/618;display:block}
.nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nav>a,.dd-btn{text-decoration:none;font-weight:500;padding:.5rem .75rem;border-radius:9px;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.25rem;color:var(--ink)}
.nav>a:hover,.dd-btn:hover{background:var(--brand-soft)}
.nav a.on,.dd-btn.on{color:var(--brand-ink);background:var(--brand-soft)}
.dd{position:relative}
.dd-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.dd-menu{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;min-width:270px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.4rem;box-shadow:0 18px 40px -18px rgb(0 0 0/.35);display:none}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:grid}
.dd-menu a{display:flex;gap:.75rem;align-items:baseline;padding:.6rem .7rem;border-radius:9px;text-decoration:none}
.dd-menu a:hover,.dd-menu a.on{background:var(--brand-soft)}
.dd-menu b{font-family:var(--f-disp);color:var(--brand-ink);min-width:2.6em}
.hdr-act{display:flex;align-items:center;gap:.5rem}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;text-decoration:none;font:600 .78rem/1 var(--f-body);letter-spacing:.06em}
.lang span{padding:.42rem .6rem;border-radius:999px;color:var(--muted)}
.lang span:first-child{background:var(--brand);color:#fff}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:11px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:980px){
  .burger{display:flex}
  .logo{height:34px}
  .nav{position:fixed;inset:0;top:0;height:100vh;height:100dvh;overscroll-behavior:contain;background:var(--surface);flex-direction:column;align-items:stretch;gap:0;padding:calc(76px + env(safe-area-inset-top,0px)) var(--gutr) 2rem var(--gut);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility 0s .25s;z-index:-1;overflow-y:auto;margin:0}
  .nav-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .25s}
  .nav-open .strip{display:none}
  .nav>a,.dd-btn{font:600 1.35rem/1.2 var(--f-disp);padding:.9rem .25rem;border-bottom:1px solid var(--line);border-radius:0;width:100%}
  .dd-btn svg{display:none}
  .dd-menu{position:static;display:grid;translate:none;border:0;box-shadow:none;padding:.3rem 0 .6rem;min-width:0;background:none}
  .nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-open .burger span:nth-child(2){opacity:0}
  .nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.2rem;border-radius:11px;font-weight:600;text-decoration:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);transition:transform .15s,background .2s,border-color .2s}
.btn:hover{border-color:var(--brand);transform:translateY(-1px)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn.light{background:#fff;color:#0b2b24;border-color:#fff}
.txtlink{display:inline-flex;align-items:center;gap:.4rem;color:var(--brand-ink);font-weight:600;text-decoration:none;margin-top:.8rem}
.txtlink:hover .ic{transform:translateX(3px)}.txtlink .ic{transition:transform .2s}

/* Sternmuster */
.hero,.phead{position:relative;isolation:isolate}
.hero::before,.phead::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brand);opacity:.07;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h7M49 28h7M28 0v7M28 49v7'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 56px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h7M49 28h7M28 0v7M28 49v7'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 56px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h7M49 28h7M28 0v7M28 49v7'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(#000,transparent);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h7M49 28h7M28 0v7M28 49v7'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(90deg,#000 30%,transparent 95%);
  -webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-size:56px 56px,100% 100%;mask-size:56px 56px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat}

/* Hero */
.hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-txt{min-width:0}
.hero h1{max-width:14ch}
.hero h1{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation:rise .7s .08s cubic-bezier(.2,.7,.2,1) both}
.hero .btns{animation:rise .7s .16s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:.0;transform:translateY(14px)}}
.today{background:var(--deep);color:var(--deep-ink);border-radius:22px;padding:1.5rem;box-shadow:0 30px 60px -30px rgb(4 30 24/.55);position:relative;overflow:hidden;animation:rise .8s .12s cubic-bezier(.2,.7,.2,1) both}
.today::after{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-90px;border:1px solid color-mix(in srgb,var(--brand) 55%,transparent);transform:rotate(22deg);border-radius:8px;pointer-events:none}
.today-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.today-k{font:600 .75rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--deep-muted)}
.today-d{font:650 1.35rem/1.25 var(--f-disp);margin-top:.5rem;color:#fff}
.today-hj{color:var(--deep-muted);font-size:.9rem}
.mark{width:46px;height:46px;flex:none;border-radius:6px}
.today-next{margin-top:1.3rem;padding:1rem 1.1rem;border-radius:14px;background:var(--deep-2);display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;align-items:baseline;border:1px solid color-mix(in srgb,var(--brand) 40%,transparent)}
.today-next span{grid-column:1/-1;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-muted)}
.today-next strong{font:650 1.6rem/1.1 var(--f-disp);color:#fff}
.today-next b{font:650 1.6rem/1.1 var(--f-disp);color:var(--brand-ink)}
:root .today-next b{color:#5fd3ad}
.today-next em{grid-column:1/-1;font-style:normal;color:var(--deep-muted);font-size:.92rem}
.today-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.4rem}
.today-list li{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid rgb(255 255 255/.09);color:var(--deep-muted)}
.today-list b{color:var(--deep-ink);font-weight:600}
.today-list li.on{color:#fff}.today-list li.on b{color:#5fd3ad}
.today-list li.past{opacity:.6}
.today-src{margin-top:1rem;font-size:.78rem;color:var(--deep-muted)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero h1{max-width:none}}
@media (max-width:560px){.today-list{grid-template-columns:1fr}.today{padding:1.25rem}}

/* Sektionen */
.sec{padding-block:clamp(3rem,6vw,5.5rem)}
.sec.band{background:var(--surface);border-block:1px solid var(--line)}
.sec-h{max-width:62ch;margin-bottom:2.2rem}
.sec-h p:not(.eyebrow){color:var(--muted);margin-top:.8rem}
.small-h{font-size:1.25rem;margin-bottom:1.3rem}
.note{color:var(--muted);margin-top:1.8rem;font-size:.95rem}

/* Bereiche */
.units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.unit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .2s}
.unit:hover{border-color:var(--brand);transform:translateY(-2px)}
.unit:hover .unit-go{background:var(--brand);color:#fff;border-color:var(--brand)}
.unit-t{display:grid;gap:.15rem;min-width:0}
.unit-t strong{font:650 1.12rem/1.2 var(--f-disp)}
.unit-t small{color:var(--brand-ink);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.unit-t span{color:var(--muted);font-size:.95rem}
.unit-go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.2s}
.mono{position:relative;width:64px;height:64px;display:grid;place-items:center;color:var(--brand);flex:none}
.mono .star{position:absolute;inset:0;width:100%;height:100%;stroke-width:.9}
.mono b{font:750 .95rem/1 var(--f-disp);color:var(--ink);letter-spacing:.02em;position:relative}
.mono[data-u="kgt"] b{font-size:.82rem}
.mono.big{width:96px;height:96px}.mono.big b{font-size:1.35rem}
.unit:hover .mono .star{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(90deg)}}
@media (max-width:760px){.units{grid-template-columns:1fr}.unit{padding:1rem;gap:.9rem}.mono{width:54px;height:54px}}

/* Angebote */
.offers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.4rem}
.offers li{display:flex;gap:1rem;align-items:flex-start;min-width:0}
.offers .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);stroke-width:1.5}
.offers h3{margin:.15rem 0 .35rem}
.offers p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.offers{grid-template-columns:1fr;gap:1.4rem}}

/* Besuch + Spende */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem}
.visit,.give{border-radius:20px;padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1rem;align-items:flex-start;min-width:0}
.visit{background:var(--surface);border:1px solid var(--line)}
.visit p{color:var(--muted)}
.give{background:var(--deep);color:var(--deep-ink);position:relative;overflow:hidden}
.give::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border:1px solid color-mix(in srgb,var(--brand) 60%,transparent);transform:rotate(45deg)}
.give p{color:var(--deep-muted)}
.iban-mini{display:grid;gap:.1rem;background:var(--deep-2);padding:.75rem 1rem;border-radius:11px;font:600 1.02rem/1.3 var(--f-body);color:#fff;max-width:100%}
.iban-mini small{font-size:.72rem;letter-spacing:.12em;color:var(--deep-muted)}
.addr{display:flex;gap:.6rem;align-items:center;color:var(--ink);font-weight:500;margin-top:.4rem}
.addr .ic{color:var(--brand-ink)}
@media (max-width:860px){.duo{grid-template-columns:1fr}}

/* Partner */
.partners-sec{padding-block:2.5rem 3.5rem}
.partners{display:flex;flex-wrap:wrap;gap:1rem}
.partner{background:#fff;border:1px solid var(--line);border-radius:12px;height:84px;padding:14px 22px;display:grid;place-items:center;flex:1 1 200px;max-width:280px}
.partner img{max-height:52px;width:auto}
.plogo{height:44px;width:auto;--lg-main:#000304;--lg-sub:#383737}

/* Seitenkopf */
.phead{padding-block:clamp(2.6rem,6vw,4.6rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.phead h1{max-width:20ch}
.chips{display:flex;gap:.4rem;margin-bottom:1.6rem;flex-wrap:wrap}
.chip{padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font:600 .82rem/1.2 var(--f-body);background:var(--surface)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.uh{display:flex;gap:1.2rem;align-items:center}
.uh .eyebrow{margin-bottom:.4rem}

/* Über uns */
.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.prose p{max-width:62ch;margin-bottom:1rem;font-size:1.06rem}
.facts{display:grid;gap:.8rem}
.fact{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.fact b{font:750 2.2rem/1 var(--f-disp);color:var(--brand-ink);min-width:3.6ch}
.fact span{color:var(--muted)}
.values{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.values li{display:grid;gap:.7rem;align-content:start}
.values .star{width:34px;height:34px;color:var(--brand)}
.values p{color:var(--muted);font-size:.95rem;margin-top:.35rem}
@media (max-width:900px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}}
.board{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.8rem}
.board li{display:flex;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.board strong{display:block;font-family:var(--f-disp);font-size:1.1rem}
.board small{color:var(--muted)}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font:700 1rem/1 var(--f-disp);flex:none}
.igmg-box{border-radius:20px;padding:1.6rem;background:var(--surface);border:1px solid var(--line);display:grid;gap:.6rem}
.igmg-box p{color:var(--muted)}
.ilogo{height:46px;width:auto;margin-bottom:.4rem}

/* Gebetszeiten-Tabelle */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ptable{border-collapse:collapse;width:100%;min-width:560px;font-variant-numeric:tabular-nums}
.ptable th,.ptable td{padding:.6rem .8rem;text-align:right;white-space:nowrap}
.ptable th:first-child,.ptable td:first-child{text-align:left}
.ptable thead th{background:var(--surface);font:600 .76rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.ptable tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 60%,transparent)}
.ptable tr.we td:first-child{color:var(--brand-ink);font-weight:600}
.ptable tr.today{background:var(--deep)!important;color:var(--deep-ink)}
.ptable tr.today td:first-child{color:#fff}
.ptable td small{color:var(--muted);margin-left:.4rem}
.ptable tr.today td small{color:var(--deep-muted)}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
@media (max-width:860px){.cards3{grid-template-columns:1fr}}
.info{padding:1.4rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;min-width:0}
.info>.ic{width:42px;height:42px;padding:10px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);margin-bottom:.3rem}
.info p{color:var(--muted)}
.info.dim{opacity:.8;border-style:dashed}

/* Bereichsseite */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.steps li{padding:1.4rem;border-top:2px solid var(--brand);background:var(--surface);border-radius:0 0 var(--r) var(--r);display:grid;gap:.4rem;align-content:start}
.steps .num{font:600 .85rem/1 var(--f-body);color:var(--brand-ink);letter-spacing:.08em}
.steps p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.socs{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.socs.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.soc{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;text-decoration:none;background:var(--bg);min-width:0}
.soc:hover{border-color:var(--brand)}
.soc .ic{color:var(--brand-ink);width:26px;height:26px}
.soc span{display:grid;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:.95rem}
.soc small{font-weight:500;color:var(--muted);font-size:.75rem}

/* Spenden */
.donate-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:1.2rem;align-items:start}
.bankcard{background:var(--deep);color:var(--deep-ink);border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);position:relative;overflow:hidden}
.bankcard::after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border:1px solid color-mix(in srgb,var(--brand) 55%,transparent);transform:rotate(45deg)}
.bc-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.4rem}
.bc-top h2{font-size:1.3rem;display:flex;align-items:center;gap:.6rem;color:#fff}
.bankcard dl{margin:0;display:grid;gap:0}
.bankcard dl>div{padding:.9rem 0;border-top:1px solid rgb(255 255 255/.1);display:grid;gap:.2rem}
.bankcard dt{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-muted)}
.bankcard dd{margin:0;font-weight:600;color:#fff}
.ibanrow dd{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
.iban{font:650 clamp(1.15rem,2.4vw,1.55rem)/1.2 var(--f-disp);letter-spacing:.02em;user-select:all}
.copy{display:inline-flex;align-items:center;gap:.45rem;background:var(--brand);color:#fff;border:0;padding:.55rem .9rem;border-radius:9px;font-weight:600;cursor:pointer}
.copy.ok{background:#fff;color:#0b2b24}
.donate-side{display:grid;gap:1rem}
@media (max-width:860px){.donate-grid{grid-template-columns:1fr}}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.info.big{grid-row:span 3}
.info.big p{font-size:1.1rem;color:var(--ink);margin-bottom:.8rem}
.sel{font-weight:600;font-size:1.1rem;text-decoration:none;color:var(--ink);overflow-wrap:anywhere;user-select:all}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}.info.big{grid-row:auto}}

/* Rechtstexte */
.lg-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.lg-toc{position:sticky;top:calc(130px + env(safe-area-inset-top,0px));display:grid;gap:.15rem;font-size:.92rem}
.lg-toc p{font:600 .75rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.lg-toc a{text-decoration:none;color:var(--muted);padding:.3rem .6rem;border-left:2px solid var(--line)}
.lg-toc a:hover{color:var(--brand-ink);border-color:var(--brand)}
.lg-body{max-width:72ch}
.lg-sec{padding-block:1.6rem;border-bottom:1px solid var(--line);scroll-margin-top:150px}
.lg-sec:first-of-type{padding-top:0}
.lg-sec h2{font-size:1.25rem;margin-bottom:.8rem}
.lg-sec p{margin-bottom:.8rem;color:var(--muted)}
.lg-sec strong{color:var(--ink)}
.lg-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.3rem;line-height:1.7}
.lg-em{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.lg-note{background:var(--brand-soft);padding:.8rem 1rem;border-radius:10px;margin-bottom:1.5rem;font-size:.92rem}
@media (max-width:860px){.lg-grid{grid-template-columns:1fr}.lg-toc{position:static;display:flex;flex-wrap:wrap;gap:.4rem}.lg-toc p{width:100%}.lg-toc a{border:1px solid var(--line);border-radius:999px;font-size:.82rem}}

/* Fuß */
.foot{background:var(--deep);color:var(--deep-muted);padding-block:3rem 1.5rem;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr);gap:2rem}
.foot-grid nav{display:grid;gap:.5rem;align-content:start}
.foot a{text-decoration:none;color:var(--deep-ink)}
.foot a:hover{color:#5fd3ad}
.flogo{height:46px;width:auto;--lg-main:#eef5f2;--lg-sub:#b9cbc4;margin-bottom:1rem}
.foot-bot{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid rgb(255 255 255/.1);font-size:.84rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.bankcard>*,.give>*,.today>*{position:relative;z-index:1}.bankcard::after,.give::after,.today::after{z-index:0}

.today-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.1rem}
.today-foot .today-src{margin:0}
.btn.sm{padding:.55rem .9rem;font-size:.9rem;border-radius:10px}
.giro{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.2rem;align-items:center;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgb(255 255 255/.1)}
.qr{width:150px;height:150px;border-radius:10px;display:block}
.giro h3{color:#fff;margin-bottom:.35rem}
.giro p{color:var(--deep-muted);font-size:.93rem}
.giro-m{display:none;margin-top:.4rem}
@media (max-width:600px){.giro{grid-template-columns:1fr;justify-items:center;text-align:center}.qr{width:min(220px,70vw);height:auto;aspect-ratio:1}}
@media (hover:none) and (pointer:coarse){.giro-m{display:block}}
h1,h2{overflow-wrap:break-word}.unit-head h1{-webkit-hyphens:auto;hyphens:auto}
.uh>div{min-width:0}
@media (max-width:520px){.unit-head h1{font-size:clamp(1.6rem,7.5vw,2.2rem)}.mono.big{width:72px;height:72px}.mono.big b{font-size:1.05rem}}
@media (min-width:861px){
  .bankcard{display:grid;grid-template-columns:minmax(0,1fr) 190px;column-gap:2rem;align-items:start}
  .bc-top{grid-column:1/-1}
  .giro{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:.8rem;margin:0;padding:0;border:0}
  .giro .qr{width:100%;height:auto;aspect-ratio:1}
  .giro p{font-size:.86rem}
}

.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.back{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.4rem;padding:.45rem .85rem .45rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);text-decoration:none;font-weight:600;font-size:.9rem;color:var(--ink)}
.back:hover{border-color:var(--brand);color:var(--brand-ink)}
.back .ic{width:1.1em;height:1.1em}

/* Sprachwahl */
.langdd .lang-btn{border:1px solid var(--line);border-radius:999px;padding:.45rem .7rem;font:600 .82rem/1 var(--f-body);letter-spacing:.06em;gap:.35rem}
.langdd .lang-btn .ic{width:1.05em;height:1.05em;color:var(--brand-ink)}
.langdd .dd-menu{min-width:190px;left:auto;right:0;translate:none}
[dir="rtl"] .langdd .dd-menu{right:auto;left:0}
.langdd .dd-menu a b{min-width:2em}
.langdd .dd-menu a.on{background:var(--brand-soft)}
@media (max-width:980px){.langdd .dd-menu{position:absolute;display:none;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgb(0 0 0/.35);padding:.4rem}
  .langdd:hover .dd-menu,.langdd.open .dd-menu,.langdd:focus-within .dd-menu{display:grid}
  .langdd .dd-btn{font:600 .82rem/1 var(--f-body);width:auto;border-bottom:1px solid var(--line);padding:.45rem .7rem;border-radius:999px}}

/* Arabisch: Schrift und Leserichtung */
html[lang="ar"]{--f-disp:"Noto Sans Arabic","Segoe UI","Geeza Pro",Tahoma,sans-serif;--f-body:"Noto Sans Arabic","Segoe UI","Geeza Pro",Tahoma,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.35}
html[lang="ar"] .eyebrow,html[lang="ar"] .today-k,html[lang="ar"] .today-next span,html[lang="ar"] .bankcard dt,html[lang="ar"] .lg-toc p,html[lang="ar"] .unit-t small{letter-spacing:0;text-transform:none}
html[lang="ar"] body{line-height:1.8}
[dir="rtl"] .ic-flip,[dir="rtl"] .txtlink .ic,[dir="rtl"] .unit-go .ic,[dir="rtl"] .btn .ic:last-child:not(:first-child),[dir="rtl"] .back .ic{transform:scaleX(-1)}
[dir="rtl"] .txtlink:hover .ic{transform:scaleX(-1) translateX(3px)}
.ptable th,.ptable td{text-align:end}.ptable th:first-child,.ptable td:first-child{text-align:start}
.lg-toc a{border-left:0;border-inline-start:2px solid var(--line)}
[dir="rtl"] .ptable td small{margin-left:0;margin-right:.4rem}
[dir="rtl"] .hero::before,[dir="rtl"] .phead::before{transform:scaleX(-1)}
.tn,.iban,.sel{unicode-bidi:plaintext}

/* Koran-Kachel */
.quran-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.quran-grid .btn{margin-top:1.6rem;cursor:pointer;font:inherit;font-weight:600}
.book{all:unset;cursor:pointer;display:flex;justify-content:center;perspective:1200px;padding:1rem;direction:ltr}
.book:focus-visible{outline:3px solid var(--brand);outline-offset:6px;border-radius:12px}
.bk-page{width:min(220px,40vw);aspect-ratio:3/4;background:#fbf8ef;border:10px solid var(--deep);display:flex;flex-direction:column;justify-content:center;gap:9px;padding:22px 18px;position:relative;box-shadow:0 30px 40px -28px rgb(0 0 0/.55)}
.bk-l{border-right-width:3px;border-radius:14px 2px 2px 14px;transform:rotateY(14deg);transform-origin:right}
.bk-r{border-left-width:3px;border-radius:2px 14px 14px 2px;transform:rotateY(-14deg);transform-origin:left}
.bk-page::before{content:"";position:absolute;inset:6px;border:1.5px solid color-mix(in srgb,var(--brand) 70%,#c9a45c)}
.bk-page i{display:block;height:5px;border-radius:3px;background:#cfc6ad}
.bk-page i:nth-child(odd){width:92%}.bk-page i:nth-child(even){width:78%;margin-left:auto}
.bk-r em{font:400 1.3rem/1 "Amiri Quran","Amiri","KFGQPC Uthmanic Script HAFS","Noto Naskh Arabic","Traditional Arabic","Geeza Pro",serif;font-style:normal;color:var(--deep);text-align:center;margin-bottom:6px;border:1px solid #c9a45c;border-radius:20px;padding:6px 4px}
.book:hover .bk-l{transform:rotateY(8deg)}.book:hover .bk-r{transform:rotateY(-8deg)}
.bk-page{transition:transform .5s ease}
@media (max-width:760px){.quran-grid{grid-template-columns:1fr}.book{order:-1}}

/* Koran-Leser */
html.q-open,html.q-open body{overflow:hidden}
.qr-box{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overscroll-behavior:contain}
.qr-top{display:flex;align-items:center;gap:.8rem;padding:.7rem max(16px,env(safe-area-inset-left,0px));background:var(--deep);color:var(--deep-ink)}
.qr-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgb(255 255 255/.2);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.qr-x svg,.qr-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.qr-sel{display:flex;gap:.6rem;flex:1;min-width:0;justify-content:flex-end;flex-wrap:wrap}
.qr-sel label{display:grid;gap:.15rem;min-width:0;flex:1 1 160px;max-width:300px}
.qr-sel span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-muted)}
.qr-sel select{width:100%;background:var(--deep-2);color:#fff;border:1px solid rgb(255 255 255/.18);border-radius:9px;padding:.45rem .5rem;font-size:.9rem}
.qr-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:14px max(12px,env(safe-area-inset-left,0px));touch-action:pan-y;user-select:none;overflow:hidden}
.qr-page{width:100%;max-width:640px;height:100%;overflow-y:auto;background:#fdfaf1;color:#1d1a12;border-radius:14px;padding:clamp(16px,4vw,32px);box-shadow:inset 0 0 0 1px #e5dcc2,inset 0 0 0 7px #fdfaf1,inset 0 0 0 8.5px color-mix(in srgb,var(--brand) 70%,#c9a45c),0 20px 40px -25px rgb(0 0 0/.5)}
.qr-page.in-l{animation:qin-l .35s ease}.qr-page.in-r{animation:qin-r .35s ease}
@keyframes qin-l{from{transform:translateX(-40px);opacity:0}}
@keyframes qin-r{from{transform:translateX(40px);opacity:0}}
.qr-head{display:flex;justify-content:space-between;font:400 1rem/1 "Amiri Quran","Amiri","KFGQPC Uthmanic Script HAFS","Noto Naskh Arabic","Traditional Arabic","Geeza Pro",serif;color:#7a6a3d;margin-bottom:.8rem}
.qr-sura{margin:1rem 0 .6rem;text-align:center;border:1.5px solid #c9a45c;border-radius:999px;padding:.35rem;background:color-mix(in srgb,var(--brand) 10%,#fdfaf1)}
.qr-sura span{font:400 1.35rem/1.4 "Amiri Quran","Amiri","KFGQPC Uthmanic Script HAFS","Noto Naskh Arabic","Traditional Arabic","Geeza Pro",serif;color:#0b2b24}
.qr-basm{text-align:center;font:400 1.5rem/2 "Amiri Quran","Amiri","KFGQPC Uthmanic Script HAFS","Noto Naskh Arabic","Traditional Arabic","Geeza Pro",serif;margin:.2rem 0 .4rem}
.qr-ar{font:400 clamp(1.45rem,4.6vw,1.85rem)/2.25 "Amiri Quran","Amiri","KFGQPC Uthmanic Script HAFS","Noto Naskh Arabic","Traditional Arabic","Geeza Pro","Noto Naskh Arabic",serif;text-align:justify;text-align-last:center}
.qr-end{color:#8a6d22;font-size:.9em;white-space:nowrap}
.qr-trl{list-style:none;padding:1rem 0 0;margin:1rem 0 0;border-top:1px solid #e5dcc2;display:grid;gap:.55rem;font:400 .98rem/1.6 var(--f-body);color:#3b3626}
.qr-trl b{color:#00684e;margin-right:.3rem;font-variant-numeric:tabular-nums}
.qr-load{text-align:center;color:#7a6a3d;padding:3rem 0;font-family:var(--f-body)}
.qr-demo{margin-top:1.2rem;background:#fff2a8;color:#5a4a00;border-radius:10px;padding:.7rem .9rem;font:500 .88rem/1.5 var(--f-body)}
.qr-cite{margin-top:1rem;font:400 .75rem/1.4 var(--f-body);color:#7a6a3d}
.qr-bot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem max(16px,env(safe-area-inset-left,0px)) .2rem}
.qr-nav{width:56px;height:56px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.qr-nav:active{transform:scale(.95)}
.qr-num{text-align:center;font:600 1rem/1.3 var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink)}
.qr-num small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
.qr-src{text-align:center;font-size:.72rem;color:var(--muted);padding:.2rem 16px .6rem}
.qr-bot{width:100%;max-width:700px;margin:0 auto}

/* Sprachen nebeneinander */
.langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.langs a{text-decoration:none;font:600 .78rem/1 var(--f-body);letter-spacing:.04em;padding:.5rem .55rem;border-radius:999px;color:var(--muted);min-width:2.2em;text-align:center}
.langs a:hover{color:var(--brand-ink);background:var(--brand-soft)}
.langs a.on{background:var(--brand);color:#fff}
@media (max-width:980px){.hdr-act{margin-inline-start:auto}.hdr-in{gap:.6rem}}
@media (max-width:420px){.logo{height:28px}.langs a{padding:.48rem .42rem;font-size:.72rem;min-width:2em}.burger{width:40px;height:40px}}
/* Countdown in den letzten 10 Minuten */
.soon{color:#ff6b6b!important;font-weight:600;animation:soon 1.6s ease-in-out infinite}
@keyframes soon{50%{opacity:.45}}
/* Rechtstexte: Inhalt am Handy aufklappbar */
.lg-toc-m{display:none}
@media (max-width:860px){
  .lg-toc{display:none!important}
  .lg-toc-m{display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:.5rem}
  .lg-toc-m summary{list-style:none;cursor:pointer;padding:.9rem 1.1rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}
  .lg-toc-m summary::-webkit-details-marker{display:none}
  .lg-toc-m summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
  .lg-toc-m[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .lg-toc-m nav{display:grid;border-top:1px solid var(--line);padding:.3rem 0}
  .lg-toc-m nav a{text-decoration:none;color:var(--ink);padding:.7rem 1.1rem;border-bottom:1px solid var(--line);font-size:.95rem}
  .lg-toc-m nav a:last-child{border-bottom:0}
  .lg-toc-m nav a:hover{color:var(--brand-ink)}
}
/* Koran: Zoom über Schriftgröße */
.qr-page{--qz:1}
.qr-ar{font-size:calc(clamp(1.45rem,4.6vw,1.85rem) * var(--qz))}
.qr-basm{font-size:calc(1.5rem * var(--qz))}
.qr-trl{font-size:calc(.98rem * var(--qz))}
.qr-zoom{position:absolute;left:50%;top:12px;translate:-50% 0;background:rgb(11 43 36/.85);color:#fff;padding:.35rem .8rem;border-radius:999px;font:600 .85rem/1 var(--f-body);pointer-events:none;opacity:0;transition:opacity .25s}
.qr-zoom.show{opacity:1}
.qr-stage{position:relative}
.qr-page{touch-action:pan-y}

/* Qibla-Kompass: Mini im Kopf */
.kb-mini{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--brand);text-decoration:none;transition:background .2s}
.kb-mini:hover{background:var(--brand-soft)}
.kb-mini svg{width:38px;height:38px;overflow:visible}
.kb-ring{fill:none;stroke:currentColor;stroke-width:1.6}
.kb-tick{stroke:currentColor;stroke-width:1.4;stroke-linecap:round;opacity:.55}
.kb-n{fill:currentColor}.kb-s{fill:var(--muted);opacity:.45}
.kb-k{fill:var(--ink)}.kb-c{fill:var(--surface);stroke:currentColor;stroke-width:1.2}
.kb-mini.ok{color:#14a376}.kb-mini.ok .kb-k{fill:#14a376}
.kb-mini.off{color:#d23b3b}.kb-mini.off .kb-k{fill:#d23b3b}
@media (min-width:981px){.kb-mini{order:3}.hdr-act{order:4}.nav{order:2}.hdr-in{gap:1rem}}
@media (max-width:980px){.kb-mini{margin-inline:auto}.hdr-act{margin-inline-start:0}}
@media (max-width:380px){.kb-mini{width:34px;height:34px}.kb-mini svg{width:32px;height:32px}.hdr-in{gap:.4rem}}

/* Qibla-Kompass: Fenster */
.kp-box{position:fixed;inset:0;z-index:100;background:#07120f;color:#e8f2ee;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overscroll-behavior:contain;overflow-y:auto;--kc:#2fbf93}
.kp-box.off{--kc:#e04848}
.kp-top{display:flex;align-items:center;gap:.8rem;padding:.7rem max(16px,env(safe-area-inset-left,0px));flex:none}
.kp-top h2{font:600 1.15rem/1.2 var(--f-disp);color:#fff;margin:0}
.kp-stage{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:.6rem;padding:.4rem 16px 1rem}
.kp-wrap{width:max(220px,min(80vw,calc(100dvh - 360px),400px));aspect-ratio:1}
.kp-svg{width:100%;height:100%;overflow:visible;display:block}
.kp-r1,.kp-r2,.kp-hub{fill:none;stroke:var(--kc);stroke-width:2;transition:stroke .3s}.kp-r2{stroke-width:1.2;opacity:.8}.kp-hub{stroke-width:1.6}
.kp-tri{fill:var(--kc);transition:fill .3s}
.kp-face{fill:#0c1b17}
.kp-ticks line{stroke:#c9d8d2;stroke-width:1.1;opacity:.75}.kp-ticks line.lg{stroke:#fff;stroke-width:3;opacity:1}
.kp-svg text{fill:#fff;font:700 20px/1 var(--f-body);text-anchor:middle;dominant-baseline:middle}
.kp-svg text.n{fill:var(--kc)}
.kp-ray{stroke:var(--kc);stroke-width:2;stroke-dasharray:3 6;opacity:.6}
.kb1{fill:var(--kc);transition:fill .3s}.kb2{fill:none;stroke:#07120f;stroke-width:1.6;stroke-linejoin:round}.kb3{fill:none;stroke:#e9c46a;stroke-width:2.2}
.kp-dot{fill:#fff}
.kp-note{min-height:1.3em;margin:0;color:#9fc1b6;text-align:center;font-size:.9rem;max-width:36ch}
.kp-start[hidden]{display:none}
.kp-panel{flex:none;background:#16241f;padding:1rem max(16px,env(safe-area-inset-left,0px)) calc(1rem + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto 1fr;gap:.8rem 1.2rem;align-items:center;transition:background .3s}
.kp-box.ok .kp-panel{background:#11845f}
.kp-main{display:grid;justify-items:center;min-width:6.5rem}
.kp-main b{font:600 clamp(2.4rem,11vw,3.4rem)/1 var(--f-disp);color:#fff}
.kp-box.off .kp-main b{color:#ff8a8a}
.kp-main span{font-size:.85rem;color:#d6e6e0;text-align:center;line-height:1.3}
.kp-facts{display:grid;gap:.5rem;margin:0}
.kp-facts dt,.kp-locrow>div>span{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#9fc1b6}
.kp-facts dd{margin:0;font-weight:600;color:#fff}
.kp-locrow{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-top:.8rem;border-top:1px solid rgb(255 255 255/.12)}
.kp-locrow b{color:#fff;font-weight:600}
.kp-locbtn{flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .9rem;border-radius:999px;border:1px solid rgb(255 255 255/.28);background:transparent;color:#fff;font:600 .9rem/1.2 var(--f-body);cursor:pointer}
.kp-locbtn:hover{background:rgb(255 255 255/.08)}.kp-locbtn:disabled{opacity:.6;cursor:wait}
.kp-locbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.kp-hint{grid-column:1/-1;margin:0;font-size:.76rem;line-height:1.45;color:#9fc1b6}
.kp-box.ok .kp-facts dt,.kp-box.ok .kp-locrow>div>span,.kp-box.ok .kp-hint{color:#d5f2e7}
@media (min-width:760px){.kp-panel{grid-template-columns:auto 1fr 1.4fr;max-width:860px;margin:0 auto 1.2rem;border-radius:18px;width:calc(100% - 32px);padding:1.2rem 1.4rem}.kp-locrow{grid-column:auto;border-top:0;padding-top:0}.kp-facts{grid-template-columns:1fr 1fr}}
.nav>a,.dd-btn{white-space:nowrap}
@media (min-width:981px){.nav>a[data-kompass]{display:none}}
@media (min-width:981px) and (max-width:1180px){.nav>a,.dd-btn{padding-inline:.55rem;font-size:.92rem}.hdr-in{gap:.6rem}.logo{height:34px}}

h1{font-weight:700}h2,h3{font-weight:600}
.qr-box[hidden],.kp-box[hidden]{display:none!important}