@font-face{font-family:"Cormorant Garamond";src:url(/fonts/CormorantGaramond-Light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/CormorantGaramond-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/CormorantGaramond-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/Inter-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Devanagari";src:url(/fonts/NotoSerifDevanagari-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Devanagari";src:url(/fonts/NotoSerifDevanagari-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --stoff:#f7efde; --papier:#fffcf5; --tinte:#2d1b36; --tinte2:#6d5470;
  --magenta:#d6246e; --orange:#f08a24; --safran:#f4b400; --blau:#2c3fa6; --gruen:#3a7d44; --rot:#c4122f;
  --linie:#eadbc4; --saum:56px;
  --serif:"Cormorant Garamond","Noto Serif Devanagari",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--tinte);font:300 1.28rem/1.5 var(--serif);min-height:100vh;
  background-color:var(--stoff);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='130' viewBox='0 0 110 130'><g id='k'><path d='M27 62 L27 40' stroke='%236b7a2a' stroke-width='2.2' fill='none'/><ellipse cx='20' cy='56' rx='10' ry='4' fill='%236b7a2a' transform='rotate(-30 20 56)'/><ellipse cx='34' cy='56' rx='10' ry='4' fill='%236b7a2a' transform='rotate(30 34 56)'/><ellipse cx='27' cy='22' rx='5' ry='11' fill='%23c4223d'/><ellipse cx='19' cy='27' rx='5' ry='10' fill='%23d6366a' transform='rotate(-35 19 27)'/><ellipse cx='35' cy='27' rx='5' ry='10' fill='%23d6366a' transform='rotate(35 35 27)'/><ellipse cx='27' cy='30' rx='3.5' ry='6' fill='%23f08a24'/></g><use href='%23k' x='55' y='65'/></svg>");
  background-size:110px 130px;
}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,252,245,.8),rgba(255,252,245,0) 70%);pointer-events:none;z-index:0}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.1;margin:0 0 .35em;letter-spacing:-.01em}
h1{font-size:3rem}h2{font-size:2.3rem}h3{font-size:1.5rem;font-weight:400}
a{color:var(--magenta)}
b,strong{font-weight:600}
[hidden]{display:none!important}
.klein{font:400 .78rem/1.45 var(--sans);color:var(--tinte2);letter-spacing:.01em}
.fehler{color:var(--rot);min-height:1.4em;margin:.4em 0 0;font:400 .85rem var(--sans)}
.zahl{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:400}

/* Säume wie im Tuch */
.saum{position:fixed;top:0;bottom:0;width:var(--saum);z-index:1;pointer-events:none;
  background-color:var(--magenta);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='72' viewBox='0 0 56 72'><rect width='56' height='72' fill='%23d6246e'/><rect x='0' width='5' height='72' fill='%23f4b400'/><rect x='51' width='5' height='72' fill='%23f4b400'/><circle cx='28' cy='20' r='13' fill='%23f7ecda'/><circle cx='28' cy='20' r='9' fill='%232c3fa6'/><circle cx='28' cy='20' r='3.5' fill='%23f4b400'/><path d='M28 33 C14 44 14 54 28 62 C42 54 42 44 28 33Z' fill='%233a7d44'/><circle cx='28' cy='56' r='4' fill='%23f08a24'/></svg>");
  background-size:56px 72px;box-shadow:0 0 18px rgba(80,20,40,.25)}
.saum-l{left:0}.saum-r{right:0;transform:scaleX(-1)}

/* Menüband: ruhig, eigener Grund, Doppelstrich wie ein Buchtitel */
.kopf{position:sticky;top:0;z-index:20;padding:10px 10px 0;background:var(--papier);box-shadow:0 1px 0 var(--linie),0 4px 0 var(--papier),0 5px 0 var(--linie),0 14px 24px -14px rgba(110,50,30,.35)}
.kopf::after{content:"";position:absolute;left:50%;bottom:-9px;width:13px;height:13px;margin-left:-6.5px;background:var(--papier);border:1px solid var(--linie);transform:rotate(45deg)}
.menu{display:flex;justify-content:center;gap:0;max-width:960px;margin:0 auto}
.menu button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0;padding:2px 2px 10px;text-align:center;-webkit-tap-highlight-color:transparent;position:relative}
.menu button:focus-visible{outline:3px solid var(--blau);outline-offset:1px;border-radius:14px}
.menu svg{width:min(88px,11.5vw);height:auto;transition:transform .3s cubic-bezier(.3,.8,.3,1)}
.menu button:hover svg,.menu button[aria-current=page] svg{transform:translateY(-3px) scale(1.06)}
.menu .hi{font:400 clamp(.95rem,2.7vw,1.3rem)/1.1 var(--serif);color:var(--tinte);margin-top:3px;white-space:nowrap}
.menu .de{display:block;font:400 clamp(.43rem,1.35vw,.58rem)/1.3 var(--sans);color:var(--tinte2);letter-spacing:.16em;text-transform:uppercase;padding:0 1px;margin-top:5px;position:relative;min-height:2.6em}
.menu .de::before{content:"";display:block;width:14px;height:1px;background:var(--c,var(--linie));margin:0 auto 5px;transition:width .3s}
.menu button:hover .de::before,.menu button[aria-current=page] .de::before{width:30px}
.menu button[aria-current=page] .hi{color:var(--magenta)}
.menu button[aria-current=page] .de{color:var(--tinte)}
.menu button::after{content:attr(data-gewuerz);position:absolute;top:100%;left:50%;transform:translate(-50%,10px);white-space:nowrap;
  background:var(--tinte);color:#fff;font:400 .72rem var(--sans);letter-spacing:.08em;padding:3px 11px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.menu button:hover::after,.menu button:focus-visible::after,.menu button.zeige::after{opacity:1}

.mitte{position:relative;z-index:2;max-width:940px;margin:40px auto 0;padding:0 calc(var(--saum) + 10px) 40px}
.fuss{position:relative;z-index:2;text-align:center;font:400 .78rem var(--sans);color:var(--tinte2);padding:0 0 28px}

/* Das Fenster ist ein Kreis; die Mitte (Mittelfeld) ist ebenfalls ein Kreis und wächst mit */
.fenster{position:relative;width:min(100%,860px,calc(100vh - 130px));aspect-ratio:1;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#fffefb 0 60%,var(--papier) 100%);
  box-shadow:0 0 0 2px var(--linie),0 0 0 9px rgba(255,252,245,.8),0 0 0 11px var(--linie),0 14px 50px rgba(110,50,30,.2)}
.innen{position:absolute;inset:13.5%;overflow-y:auto;overflow-x:hidden;padding:0 .5%;scrollbar-width:thin;scrollbar-color:var(--linie) transparent;-webkit-overflow-scrolling:touch}
.innen::-webkit-scrollbar{width:5px}.innen::-webkit-scrollbar-thumb{background:var(--linie);border-radius:9px}

/* Knöpfe: Pigmenthaufen */
.knopf{--c:#d6246e;--c2:#9d1650;position:relative;font:600 1.15rem/1.1 var(--serif);letter-spacing:.02em;border:0;cursor:pointer;color:#fff;
  padding:1.5em 2.6em .85em;margin:0 0 9px;
  border-radius:50% 50% 26% 24% / 96% 92% 22% 26%;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.42),transparent 38%),
    radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.5px) 0 0/6px 6px,
    radial-gradient(rgba(0,0,0,.14) 1px,transparent 1.6px) 3px 2px/8px 8px,
    var(--c);
  box-shadow:0 4px 0 -1px var(--c2),0 9px 14px -6px rgba(60,20,30,.45);
  transition:transform .15s,border-radius .4s;-webkit-tap-highlight-color:transparent}
.knopf::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-9px;height:10px;pointer-events:none;
  background:
    radial-gradient(circle at 8% 40%,var(--c) 2px,transparent 2.6px),radial-gradient(circle at 22% 70%,var(--c) 1.4px,transparent 2px),
    radial-gradient(circle at 41% 30%,var(--c) 1.6px,transparent 2.2px),radial-gradient(circle at 63% 65%,var(--c) 2.2px,transparent 2.8px),
    radial-gradient(circle at 81% 35%,var(--c) 1.5px,transparent 2.1px),radial-gradient(circle at 94% 60%,var(--c) 2px,transparent 2.6px);opacity:.8}
.knopf:hover{transform:translateY(-2px) scale(1.03);border-radius:52% 48% 26% 30% / 88% 92% 28% 24%}
.knopf:active{transform:translateY(2px) scale(1.02,.94)}
.knopf:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.knopf.zweit{--c:#f4b400;--c2:#b57f00;color:var(--tinte)}
.knopf.gruen{--c:#3a7d44;--c2:#265a30}
.knopf.rot{--c:#c4122f;--c2:#8c0c20}
.knopf.blau{--c:#2c3fa6;--c2:#1c2a75}
.knopf.gross{font-size:1.4rem;padding:1.5em 3em .9em}
.knopf.klein{font:600 .95rem/1.1 var(--serif);padding:1.15em 1.7em .65em;margin:0 0 7px;box-shadow:0 3px 0 -1px var(--c2),0 6px 10px -5px rgba(60,20,30,.4);letter-spacing:.01em}
.knopf.klein::after{bottom:-7px;height:8px}
.knopf:disabled{opacity:.55;cursor:default}
input,select,textarea{font:300 1.15rem var(--serif);padding:.45em .8em;border:1.5px solid var(--linie);border-radius:18px 24px 18px 24px/22px 18px 22px 18px;background:#fff;color:var(--tinte);width:100%}
input::placeholder,textarea::placeholder{color:#a8928a}
label{display:block;font:400 .7rem var(--sans);color:var(--tinte2);margin:.8em 0 .25em;text-transform:uppercase;letter-spacing:.12em}
.zeile{display:flex;gap:10px;flex-wrap:wrap}.zeile>*{flex:1 1 130px}
.kachel{background:rgba(255,255,255,.85);border:1px solid var(--linie);border-radius:26px 30px 26px 30px/30px 26px 30px 26px;padding:14px 18px;margin:0 0 14px}
.leer{color:var(--tinte2);text-align:center;padding:1em;font-style:italic}
.kennzahlen{display:flex;gap:10px;margin:.6em 0}
.kennzahlen>div{flex:1;text-align:center;padding:4px}
.kennzahlen b{display:block;font:300 3.2rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--magenta);letter-spacing:-.03em}
.kennzahlen span{font:400 .66rem var(--sans);color:var(--tinte2);text-transform:uppercase;letter-spacing:.12em}
.rubrik{font:400 .7rem var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--tinte2);margin:0 0 .5em}

/* Login */
.login{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.login-karte{width:min(440px,92vw,calc(100vh - 40px));aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 15%;text-align:center;background:rgba(255,252,245,.98);box-shadow:0 0 0 2px var(--linie),0 0 0 10px rgba(255,252,245,.8),0 0 0 12px var(--linie),0 10px 50px rgba(110,30,60,.35);position:relative;z-index:5}
.holi-schrift{font:400 5.4rem/1.15 var(--serif);color:var(--magenta);text-shadow:3px 3px 0 var(--safran)}
.login input{text-align:center;margin:.3em 0 .9em}

/* Rad */
.kachelrad{position:absolute;width:19%;aspect-ratio:1;left:50%;top:50%;border-radius:50%;display:grid;place-items:center;text-align:center;
  font:400 .6rem/1.15 var(--sans);padding:6%;color:var(--tinte);overflow:hidden;transition:all .8s cubic-bezier(.3,.8,.3,1);opacity:.5;background:#fbf1de;border:1.5px dashed #d7b98f}
.kachelrad.farbig{opacity:.6}
.kachelrad.gewaehlt{opacity:1;border-style:solid;color:#fff;transform:var(--pos) scale(1.14)!important;box-shadow:0 0 0 6px rgba(255,255,255,.9),0 6px 20px rgba(0,0,0,.25)}
.ring{position:absolute;inset:0}
.zeiger{position:absolute;inset:0;pointer-events:none;transform:rotate(0deg)}
.zeiger::before{content:"";position:absolute;left:50%;top:4%;width:5px;height:22%;margin-left:-2.5px;border-radius:3px;background:linear-gradient(var(--blau),var(--gruen))}
.zeiger::after{content:"";position:absolute;left:50%;top:1.5%;margin-left:-14px;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:radial-gradient(circle at 50% 50%,var(--safran) 0 22%,var(--blau) 23% 50%,var(--gruen) 51%);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mittelfeld{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 2px var(--linie),inset 0 0 26px rgba(214,36,110,.07);display:grid;place-items:center;z-index:3}
.dreh{all:unset;cursor:pointer;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:300 clamp(1.4rem,4.6vw,2.4rem)/1.1 var(--serif);color:var(--magenta);-webkit-tap-highlight-color:transparent}
.dreh:hover{background:radial-gradient(#fff,#fdeaf2)}.dreh:focus-visible{outline:4px solid var(--blau)}
.dreh small{display:block;font:400 .62rem var(--sans);color:var(--tinte2);letter-spacing:.14em;text-transform:uppercase;margin-top:.5em}
.dreh.dreht{animation:wiegen .6s ease-in-out infinite alternate}
@keyframes wiegen{to{transform:rotate(6deg) scale(.96)}}
.karte{position:absolute;left:50%;top:50%;width:60%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:6;pointer-events:none;text-align:center;
  background:#fffefb;border-radius:50% / 42%;border:1.5px solid var(--linie);padding:7% 9% 6%;box-shadow:0 10px 36px rgba(60,20,20,.3);transition:transform .6s cubic-bezier(.2,.9,.3,1.2),opacity .5s}
.karte.da{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.karte.weg{opacity:0;transform:translate(-50%,-250%) scale(1);transition:transform .7s ease-in,opacity .7s;pointer-events:none}
.karte .ding{font:400 .62rem var(--sans);color:var(--tinte2);text-transform:uppercase;letter-spacing:.14em}
.karte .schritt{font:400 clamp(1.15rem,3.4vw,1.8rem)/1.15 var(--serif);margin:.25em 0 .4em}
.karte textarea{min-height:46px;font-size:1rem;text-align:center;border-radius:20px}
.karte .reihe{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:6px;flex-wrap:wrap}
.schalter{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:600 1.05rem var(--serif);padding:.3em}
.schalter i{width:46px;height:26px;border-radius:99px;background:#e2d6c0;position:relative;transition:background .2s}
.schalter i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.schalter[aria-checked=true] i{background:var(--gruen)}.schalter[aria-checked=true] i::after{transform:translateX(20px)}
.schalter:focus-visible{outline:3px solid var(--blau);border-radius:10px}
.weissfleck{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;opacity:0;transition:opacity .5s;z-index:2;box-shadow:0 0 30px 10px #fff}
.weissfleck.an{opacity:1}
.rad-unten{text-align:center;margin-top:22px}

/* Leinwand */
.farbe{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}

/* Dinge: gesetzt wie eine Inhaltsseite, keine Kästen */
.ding-kachel{background:none;border:0;border-top:1px solid var(--linie);border-radius:0;padding:1.05em 0 .55em;margin:0}
.ding-kachel:first-of-type{border-top:0}
.ding-meta{display:flex;flex-wrap:wrap;gap:.2em 1em;align-items:center;font:400 .6rem var(--sans);text-transform:uppercase;letter-spacing:.17em;color:var(--tinte2);margin-bottom:.2em}
.ding-meta .d{color:var(--rot)}.ding-meta .o{color:var(--orange)}
.ding-meta i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--linie));display:inline-block;margin-right:.55em}
.ding-titel{font:300 clamp(1.5rem,4vw,2.15rem)/1.08 var(--serif);letter-spacing:-.01em;margin:0 0 .35em;display:flex;justify-content:space-between;gap:.6em;align-items:baseline}
.ding-titel span.zahl{font-size:.72rem;color:var(--tinte2);letter-spacing:.04em;white-space:nowrap}
.faden{height:3px;position:relative;margin:.1em 0 .55em;background:linear-gradient(var(--linie),var(--linie)) 0 50%/100% 1px no-repeat}
.faden i{position:absolute;left:0;top:0;height:3px;background:var(--magenta);border-radius:2px}
.schritte{list-style:none;margin:.2em 0 .5em;padding:0;counter-reset:s}
.schritte li{counter-increment:s;display:grid;grid-template-columns:2.1em 1fr;align-items:baseline;padding:.08em 0;font:300 1.2rem/1.35 var(--serif)}
.schritte li::before{content:counter(s);font:400 .68rem var(--sans);font-variant-numeric:tabular-nums;color:var(--tinte2);text-align:right;padding-right:.9em}
.schritte li.fertig{color:#a8928a}.schritte li.fertig>span:first-child{text-decoration:line-through;text-decoration-thickness:1px}
.schritte li.fertig::before{content:"✓";color:var(--gruen)}
.schritte .erg{display:block;font:400 .72rem var(--sans);color:var(--tinte2);margin-top:.1em}
.ding-notiz{font:italic 300 1.05rem/1.35 var(--serif);color:var(--tinte2);margin:.2em 0 .6em 2.1em}
.ding-knoepfe{display:flex;gap:4px 14px;flex-wrap:wrap;margin:.5em 0 0 2.1em}
.ding-knoepfe button{all:unset;cursor:pointer;font:400 .6rem var(--sans);text-transform:uppercase;letter-spacing:.15em;color:var(--tinte2);padding:.5em 0;border-bottom:1px solid transparent}
.ding-knoepfe button:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
.ding-knoepfe button:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

/* Konto */
.stand{font:300 3.6rem/1.1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em;text-align:center;margin:.05em 0}
.stand.minus{color:var(--rot)}.stand.plus{color:var(--gruen)}
.buchung{display:flex;gap:10px;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--linie);font-size:1.05rem}
.buchung .t{flex:1;min-width:0;overflow-wrap:anywhere}.buchung .d{color:var(--tinte2);font:400 .72rem var(--sans);width:5.2em;padding-top:.3em}
.buchung .b{font:400 .88rem var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:.2em}.b.m{color:var(--rot)}.b.p{color:var(--gruen)}
.stempel{display:inline-block;border:3px double var(--rot);color:var(--rot);font:600 .95rem/1 var(--serif);padding:6px 10px;border-radius:8px;transform:rotate(-8deg);opacity:.85;text-transform:uppercase;letter-spacing:.08em}
.flug{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.flug.fort .flugzeug{animation:fliegen 1.4s ease-in forwards}
@keyframes fliegen{to{transform:translate(120vw,-60vh) rotate(-20deg);opacity:0}}
.verlauf{display:flex;gap:6px;align-items:flex-end;height:70px;margin:8px 0}
.verlauf div{flex:1;background:linear-gradient(var(--safran),var(--magenta));border-radius:6px 6px 0 0;min-height:4px;position:relative}
.verlauf small{position:absolute;bottom:100%;left:0;right:0;text-align:center;font:400 .6rem var(--sans);color:var(--tinte2)}

/* Spiel */
.spiel{position:fixed;inset:0;z-index:60;background:rgba(40,15,20,.6);display:grid;place-items:center;padding:12px}
.spiel-box{background:#fffdf8;border-radius:30px;padding:16px;max-width:420px;width:100%;text-align:center;max-height:96vh;overflow:auto}
.spiel canvas{max-width:100%;border-radius:10px;background:#fff7e8;border:2px solid var(--linie);touch-action:none}
.tasten{display:flex;gap:12px;justify-content:center;margin:12px 0;flex-wrap:wrap}
.hinweis{position:fixed;left:50%;bottom:18px;transform:translate(-50%,40px);background:var(--tinte);color:#fff;padding:9px 20px;border-radius:99px;font:400 .88rem var(--sans);opacity:0;transition:all .3s;z-index:70;pointer-events:none;max-width:90vw;text-align:center}
.hinweis.an{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  :root{--saum:12px}
  body{font-size:1.15rem}
  .mitte{padding:0 calc(var(--saum) + 4px) 30px}
  .kopf{padding-left:calc(var(--saum) + 2px);padding-right:calc(var(--saum) + 2px)}
  .innen{inset:12.5%}
  h2{font-size:1.8rem}
  .stand{font-size:2.5rem}
  .kennzahlen b{font-size:2.4rem}
  .holi-schrift{font-size:4.4rem}
  .kachel{padding:10px 12px}
  .knopf{font-size:1rem;padding:1.25em 1.9em .8em}
  .knopf.gross{font-size:1.1rem;padding:1.25em 2.2em .8em}
  .knopf.klein{font-size:.85rem;padding:1.1em 1.3em .6em}
  .kennzahlen b{font-size:2rem}
  .kennzahlen span{font-size:.5rem;letter-spacing:.04em}
  h3{font-size:1.25rem}
  .innen{inset:13.5% 12.5%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}