/* OG Menü – Spielmenü-Stil: Himmel #7ACDEF, PixePurl weiß mit Petrol-Kontur #005350, Rosa #E37292, Sprites aus dem Startbild */
.og-burger{position:fixed;z-index:99991;top:20px;right:20px;width:56px;height:56px;padding:0;margin:0;border:0;border-radius:3px;background:#E37292;color:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.22);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}
.og-burger:hover{background:#d35f81}
.og-burger:focus-visible{outline:3px solid #fff;outline-offset:3px}
.og-burger svg{display:block;width:28px;height:24px;fill:currentColor}
.og-burger__x{display:none}
.og-burger[aria-expanded=true] .og-burger__bars{display:none}
.og-burger[aria-expanded=true] .og-burger__x{display:inline}
body.admin-bar .og-burger{top:52px}

/* Sprachschalter links neben dem Burger (nur auf Seiten mit Gegenstück DE/EN) */
.og-sprache{position:fixed;z-index:99989;top:20px;right:86px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:3px;background:#34938B;box-shadow:4px 4px 0 rgba(0,0,0,.22);color:#fff!important;font:400 28px/1 'PixePurl',sans-serif;letter-spacing:.06em;text-decoration:none!important;transition:background-color .2s ease}
.og-sprache:hover{background:#005350}
.og-sprache:focus-visible{outline:3px solid #fff;outline-offset:3px}
body.admin-bar .og-sprache{top:52px}
html.og-menu-offen .og-sprache{visibility:hidden}

.og-menu{--s:3;position:fixed;inset:0;z-index:99990;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#7ACDEF;opacity:0;transition:opacity .25s ease;image-rendering:pixelated}
.og-menu[hidden]{display:none}
.og-menu.is-open{opacity:1}
.og-menu *{box-sizing:border-box}

/* Wolken */
.og-menu__sky{position:absolute;inset:0;pointer-events:none}
.og-menu__wolke{position:absolute;left:0;background-repeat:no-repeat;background-size:100% 100%;animation:og-menu-wolke linear infinite}
.og-menu__wolke--1{top:16%;width:calc(174px*var(--s));height:calc(19px*var(--s));background-image:var(--og-wolke3);animation-duration:95s;animation-delay:-30s}
.og-menu__wolke--2{top:34%;width:calc(96px*var(--s));height:calc(30px*var(--s));background-image:var(--og-wolke4);animation-duration:120s;animation-delay:-85s}
.og-menu__wolke--3{top:58%;width:calc(120px*var(--s));height:calc(17px*var(--s));background-image:var(--og-wolke5);animation-duration:80s;animation-delay:-10s}
@keyframes og-menu-wolke{from{transform:translateX(-110%)}to{transform:translateX(100vw)}}

/* Logo */
.og-menu__logo{position:absolute;z-index:1;top:22px;left:24px;display:block;width:clamp(150px,17vw,250px);line-height:0}
.og-menu__logo img{display:block;width:100%;height:auto;image-rendering:auto}
.og-menu__logo:focus-visible{outline:3px solid #fff;outline-offset:6px}

/* Einträge */
.og-menu__nav{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 24px calc(44px*var(--s));text-align:center}
.og-menu__nav ul{list-style:none;margin:0;padding:0}
.og-menu__nav li{margin:0;padding:0}
.og-menu__nav li a{position:relative;display:inline-block;padding:.12em .25em;font-family:'PixePurl',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,6vw,82px);line-height:1.02;letter-spacing:.02em;color:#fff;text-decoration:none;
  text-shadow:3px 0 #005350,-3px 0 #005350,0 3px #005350,0 -3px #005350,3px 3px #005350,-3px -3px #005350,3px -3px #005350,-3px 3px #005350,7px 7px 0 #005350;transition:color .15s ease}
.og-menu__nav li a::before{content:'';position:absolute;top:50%;left:-.42em;width:.3em;height:.42em;margin-top:-.24em;background:#E37292;opacity:0;
  clip-path:polygon(0 0,34% 0,34% 17%,67% 17%,67% 34%,100% 34%,100% 67%,67% 67%,67% 84%,34% 84%,34% 100%,0 100%);filter:drop-shadow(3px 3px 0 #005350)}
.og-menu__nav li a:hover,.og-menu__nav li a:focus-visible,.og-menu__nav li a[aria-current=page]{color:#FE97B4;outline:0}
.og-menu__nav li a:hover::before,.og-menu__nav li a:focus-visible::before,.og-menu__nav li a[aria-current=page]::before{opacity:1}

/* Steam-Knopf wie im Wunschlisten-Kasten */
.og-menu__steam{display:inline-flex;align-items:center;gap:12px;height:56px;margin-top:clamp(22px,4vh,40px);padding:0 26px 0 20px;border-radius:3px;background:linear-gradient(to right,#47bfff 5%,#1a44c2 60%);background-size:330% 100%;background-position:25%;box-shadow:2px 2px 10px rgba(0,0,0,.25);color:#fff!important;font:700 20px/1 "Saira Lokal",Arial,sans-serif;text-decoration:none!important;white-space:nowrap;transition:background-position .25s;image-rendering:auto}
.og-menu__steam:hover{background-position:0%}
.og-menu__steam:focus-visible{outline:3px solid #fff;outline-offset:4px}
.og-menu__steam svg{width:24px;height:21px;flex:none}

/* Kanal mit Entenfamilie */
.og-menu__kanal{position:absolute;left:0;right:0;bottom:0;height:calc(44px*var(--s));background-image:var(--og-wasser);background-repeat:repeat-x;background-size:calc(2304px*var(--s)) 100%;animation:og-menu-wasser .3s steps(3) infinite}
@keyframes og-menu-wasser{from{background-position-x:0}to{background-position-x:calc(-2304px*var(--s))}}
.og-menu__familie{position:absolute;left:0;bottom:calc(16px*var(--s));display:flex;align-items:flex-end;gap:calc(5px*var(--s));animation:og-menu-schwimmen 30s linear infinite}
@keyframes og-menu-schwimmen{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.og-menu__tier{display:block;background-repeat:no-repeat}
.og-menu__ente{width:calc(15px*var(--s));height:calc(12px*var(--s));background-image:var(--og-ente);background-size:calc(45px*var(--s)) 100%;animation:og-menu-ente .3s steps(3) infinite}
.og-menu__k1{width:calc(14px*var(--s));height:calc(8px*var(--s));background-image:var(--og-k1);background-size:calc(28px*var(--s)) 100%;animation:og-menu-k1 .33s steps(2) infinite}
.og-menu__k2{width:calc(15px*var(--s));height:calc(8px*var(--s));background-image:var(--og-k2);background-size:calc(60px*var(--s)) 100%;animation:og-menu-k2 .75s steps(4) infinite}
.og-menu__k3{width:calc(12px*var(--s));height:calc(7px*var(--s));background-image:var(--og-k3);background-size:calc(24px*var(--s)) 100%;animation:og-menu-k3 .26s steps(2) infinite}
@keyframes og-menu-ente{to{background-position-x:calc(-45px*var(--s))}}
@keyframes og-menu-k1{to{background-position-x:calc(-28px*var(--s))}}
@keyframes og-menu-k2{to{background-position-x:calc(-60px*var(--s))}}
@keyframes og-menu-k3{to{background-position-x:calc(-24px*var(--s))}}

html.og-menu-offen,html.og-menu-offen body{overflow:hidden}

@media(max-width:700px){
  .og-burger{top:14px;right:14px;width:50px;height:50px}
  .og-burger svg{width:25px;height:21px}
  /* Handy: unter dem Burger, scrollt mit dem Kopf weg (links daneben läge er auf dem Logo) */
  .og-sprache{position:absolute;top:72px;right:14px;width:50px;height:50px;font-size:25px}
  body.admin-bar .og-sprache{top:110px}
  .og-menu{--s:2}
  .og-menu__logo{top:18px;left:18px}
  .og-menu__nav li a{font-size:clamp(28px,10vw,48px);padding:.16em .25em}
  .og-menu__steam{height:52px;font-size:17px;padding:0 18px 0 16px}
}
@media(max-height:560px) and (min-width:701px){.og-menu__nav li a{font-size:clamp(28px,8vh,60px)}}
@media(prefers-reduced-motion:reduce){.og-menu,.og-menu *{animation:none!important;transition:none!important}.og-menu__familie{left:12%}}