/* Petitopia Startseite im Nachtwald-Design. Keine externen Schriften oder Skripte (Datenschutz, CSP default-src 'self'). */
*{box-sizing:border-box}
html,body{margin:0;background:#0A1B2A}
body{font:16px/1.55 ui-rounded,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:#E8FAF3;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
.site{--glass:rgba(8,26,40,.62);--glassbd:rgba(160,255,230,.2);--mut:#9CC9C0;--shadow:rgba(0,10,20,.5);
  position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:#0A1B2A}
.scene{position:absolute;inset:0;z-index:-1}
.scene svg{width:100%;height:100%;display:block}
.nav{display:flex;align-items:center;margin:14px;padding:7px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glassbd);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px var(--shadow);max-width:1120px;width:calc(100% - 28px);align-self:center}
.nav .wm{height:36px;width:auto}
.body{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;padding:16px 24px 160px;align-items:center;max-width:1120px;width:100%;margin:0 auto}
.copy{display:grid;gap:16px;justify-items:start}
.hl{font:800 clamp(2.4rem,6vw,4.1rem)/1 ui-rounded,"Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;margin:0;text-wrap:balance;text-shadow:0 3px 18px var(--shadow)}
.glass{background:var(--glass);border:1px solid var(--glassbd);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 10px 24px var(--shadow);min-width:0}
.lead{margin:0;font-size:1.15rem;padding:14px 18px;max-width:34em}
.soon{margin:0;padding:8px 16px;border-radius:999px;color:var(--mut);font-size:.95rem}
.logo{display:grid;justify-items:center}
.logo-big{width:min(400px,100%);height:auto;filter:drop-shadow(0 14px 22px var(--shadow))}
.tiles{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:0 18px 18px;max-width:1156px;margin:0 auto}
.tile{padding:14px 16px;display:flex;gap:12px;align-items:center}
.tile b{display:block;font-size:1.1rem}
.tile span:not(.cube){font-size:.9rem;color:var(--mut)}
.cube{width:42px;height:42px;border-radius:13px;background:linear-gradient(160deg,var(--c1),var(--c2));flex:none;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.18),0 6px 12px rgba(0,0,0,.3)}
.nav{gap:6px}
.nav .brand{margin-right:auto;display:flex}
.nav nav{display:flex;gap:6px;flex-wrap:wrap}
.nav nav a{color:#E8FAF3;text-decoration:none;font-weight:700;padding:9px 16px;border-radius:999px}
.nav nav a.on{background:rgba(255,255,255,.14)}
.nav nav a:hover{background:rgba(255,255,255,.1)}
.nav nav a.adm{background:linear-gradient(#c6f26a,#7fd02e);color:#0c2204;box-shadow:0 3px 0 #3f7d14}
.nav nav a.adm:hover{background:linear-gradient(#d3f784,#8fdc3a)}
a:focus-visible{outline:3px solid #F2BF60;outline-offset:2px}
.soon a{color:#B6F05A;font-weight:700}
.page{min-height:100vh;min-height:100svh}
.pagebody{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:8px 18px 28px;display:flex;flex-direction:column;gap:16px}
.pagebody .hl{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.mapframe{border-radius:28px;overflow:hidden;border:4px solid var(--glassbd);box-shadow:0 18px 40px var(--shadow);height:min(72vh,720px);min-height:420px;background:#0C2233}
.mapframe iframe{width:100%;height:100%;border:0;display:block}
.pagebody .soon{align-self:flex-start}
.offline{display:grid;place-items:center;min-height:100vh;background:#0C2233;padding:24px}
.offbox{display:grid;gap:16px;justify-items:center;text-align:center;max-width:520px}
.logo-small{width:min(200px,60%);height:auto}
.hl.small{font-size:clamp(1.5rem,4vw,2.2rem)}
@media (max-width:700px){.body{padding-bottom:20px}.tiles{position:static;padding:0 14px 14px}}
@supports not (backdrop-filter:blur(1px)){.glass,.nav{background:rgba(8,26,40,.88)}}