/* Portal Die Spielewelten | Event-Seite
   Das Portal im Kopf teilt beim Runterscrollen die Events als Spielkarten aus: Sie kommen verdeckt aus der Öffnung,
   drehen sich im Flug um und landen links nebeneinander. Unter der gewählten Karte steht ihr Text mit den nächsten Terminen.
   Rechts (Handy: darunter) liegt der Monat als Spielbrett: jeder Tag ein Feld am Laufweg, Event-Tage tragen ihre Karte,
   Montag heißt aussetzen, die Eröffnung ist das Startfeld, die Spielfigur steht auf heute, am Ende jeder Woche geht es
   durch ein kleines Portal in die nächste Reihe. Grundlagen (Farben, Schriften, Knöpfe, Navigation, Fuß) kommen aus portal.css. */

/* ---------- Kopf: das Portal ---------- */
.ev-kopf{position:relative;display:grid;align-items:center;min-height:min(100svh,980px);overflow:clip;padding:calc(var(--nav-h) + 40px) var(--gut) 116px;
  background:var(--t7) radial-gradient(ellipse 60% 75% at 74% 50%,var(--t3) -40%,var(--t6) 34%,var(--t7) 62%,var(--t8) 100%)}
.ev-kopf-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.ev-kopf h1{font-size:clamp(64px,8vw,124px);line-height:.86;color:var(--t3)}
.ev-kopf .lead{max-width:30em}
.ev-naechstes{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:10px 16px 10px 12px;border:2px solid var(--ink);border-radius:var(--rough);
  background:var(--t1);color:var(--t8);font-weight:600;font-size:15px;line-height:1.35;rotate:-1.5deg}
.ev-naechstes .ic{width:24px;height:24px;color:var(--t5)}
.ev-portal{position:relative;justify-self:center;width:min(100%,380px)}
.ev-portal-buehne{position:relative;aspect-ratio:1100/1379}
.ev-licht{position:absolute;left:54.6%;top:41.9%;width:140%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--t3),transparent);opacity:var(--glut,.55)}
.ev-scherben{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:54.6% 41.9%}
.motion .ev-portal-buehne{animation:evSchweben 6.5s ease-in-out infinite}
@keyframes evSchweben{50%{translate:0 -10px}}

/* ---------- Bühne: links die Karten, rechts das Spielbrett ---------- */
.ev-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.ev-links h2{font-size:clamp(52px,5.4vw,80px);color:var(--t8)}
.ev-rechts{position:sticky;top:calc(var(--nav-h) + 18px);display:grid;gap:26px}

/* ---------- Spielkarten: Geschwister des Pik-Ass, mit Wochentag und Zeichen in den Ecken ---------- */
.spielkarte,.flieger{--kr:clamp(9px,1vw,15px);--rand-k:clamp(2px,.2vw,3px)}
.blatt{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.8vw,26px);max-width:640px;margin-top:clamp(22px,2.4vw,34px);padding-top:20px}
.spielkarte{position:relative;display:block;width:100%;max-width:196px;justify-self:center;aspect-ratio:5/7;padding:0;border-radius:var(--kr);
  rotate:var(--dreh,0deg);transition:translate .45s var(--ease),rotate .45s var(--ease),scale .45s var(--ease);-webkit-tap-highlight-color:transparent}
.spielkarte:hover{translate:0 -8px}
.blatt.ausgeteilt .spielkarte[aria-selected="true"]{z-index:2;translate:0 -16px;rotate:0deg;scale:1.05}
.blatt.ausgeteilt .spielkarte[aria-selected="true"] .sk-vorne{box-shadow:0 22px 30px -10px rgba(0,39,54,.55),0 0 0 4px var(--t1),0 0 0 6.5px var(--ink)}
.spielkarte.wartet{opacity:0;pointer-events:none;transition:none}
.spielkarte:focus-visible{outline:none}
.spielkarte:focus-visible .sk-vorne{outline:3px dashed var(--t8);outline-offset:6px}

.sk-seite{position:absolute;inset:0;isolation:isolate;overflow:hidden;border:var(--rand-k) solid var(--ink);border-radius:var(--kr);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sk-seite::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:url(../img/marke/korn.png) 0 0/90px;mix-blend-mode:multiply;opacity:.22}
.sk-vorne{display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-items:center;padding:17% 9% 18%;color:var(--k-schrift);
  background:radial-gradient(ellipse 72% 50% at 50% 42%,var(--k-licht),var(--k-flaeche) 100%);box-shadow:0 12px 22px -9px rgba(0,39,54,.5);transition:box-shadow .45s var(--ease)}
.sk-vorne::before{content:"";position:absolute;inset:4.5%;border:1.5px solid currentColor;border-radius:calc(var(--kr) * .55);opacity:.3;pointer-events:none}
.sk-ecke{position:absolute;left:8%;top:6.5%;display:grid;justify-items:center;gap:3px}
.sk-ecke b{font:400 clamp(14px,1.5vw,23px)/.82 var(--head);text-transform:lowercase}
.sk-ecke .ic{width:clamp(10px,1.05vw,16px);height:clamp(10px,1.05vw,16px)}
.sk-ecke.unten{left:auto;top:auto;right:8%;bottom:6.5%;rotate:180deg}
.sk-zeichen.ic{width:48%;height:auto;aspect-ratio:1;background:var(--k-zeichen)}
.sk-name{max-width:100%;font:400 clamp(13px,1.45vw,21px)/.95 var(--head);text-align:center;text-transform:lowercase;text-wrap:balance;hyphens:manual}
.sk-zeit{max-width:64%;margin-top:6%;font-size:clamp(10.5px,.82vw,12.5px);font-weight:600;line-height:1.2;text-align:center;text-wrap:balance}
.sk-heute{position:absolute;right:-8px;top:-11px;z-index:3;padding:3px 10px;border:2px solid var(--ink);border-radius:var(--rough);background:var(--t3);color:var(--t8);
  font-weight:700;font-size:12.5px;rotate:7deg}

/* Rückseite: Portal auf Rautenmuster, wie bei einem Kartenspiel */
.sk-hinten{transform:rotateY(180deg);
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(81,202,168,.17) 9px 10.5px),repeating-linear-gradient(-45deg,transparent 0 9px,rgba(81,202,168,.17) 9px 10.5px),
  radial-gradient(ellipse 62% 46% at 50% 47%,var(--t5),var(--t7) 78%)}
.sk-hinten::before{content:"";position:absolute;inset:5.5%;border:1.5px solid rgba(186,241,255,.5);border-radius:calc(var(--kr) * .55)}
.sk-hinten img{position:absolute;left:50%;top:50%;width:64%;translate:-50% -50%}

/* Karten im Flug: liegen über allem außer der Navigation; die Schatten werden mit der Flughöhe weicher */
.flug{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:none}
.flieger{position:absolute;left:0;top:0;visibility:hidden;will-change:transform,opacity}
.sk-dreh{position:absolute;inset:0;transform-style:preserve-3d}
.flieger .sk-seite{box-shadow:0 calc(12px + 34px * var(--hoehe,0)) calc(22px + 28px * var(--hoehe,0)) -9px rgba(0,25,35,.5)}

/* Kleine Karte: auf den Feldern, im Text und in der Legende */
.mk{display:inline-grid;flex:none;place-items:center;width:var(--mk,22px);aspect-ratio:5/7;border:1.5px solid var(--ink);border-radius:calc(var(--mk,22px) * .17);
  background:radial-gradient(ellipse 80% 60% at 50% 45%,var(--k-licht),var(--k-flaeche));rotate:var(--dreh,-5deg)}
.mk .ic{width:64%;height:auto;aspect-ratio:1;background:var(--k-zeichen)}

/* ---------- Text der gewählten Karte: dreht sich beim Wechsel um ---------- */
.ev-karte{position:relative;max-width:640px;margin-top:30px;padding:30px 30px 28px;border:2.5px solid var(--ink);border-radius:26px 34px 24px 32px / 32px 24px 34px 26px;
  background:var(--t1);color:var(--t8);backface-visibility:hidden}
.ev-karte:focus-visible{outline:3px solid var(--t8);outline-offset:4px}
.ev-ohne-js{display:grid;gap:8px}
.js .ev-ohne-js{display:none}
.ev-wann{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--t7)}
.ev-wann .mk{--mk:26px}
.ev-titel{margin-top:14px;font-size:clamp(36px,3.4vw,52px);color:var(--t8)}
.ev-logo{display:block;width:min(100%,330px);padding:10px 16px;border:2px solid var(--ink);border-radius:var(--rough);background:#0A0F11}
.ev-aufhaenger{margin-top:18px;font:400 clamp(26px,2.3vw,34px)/1 var(--head);text-transform:lowercase;color:var(--t6)}
.ev-text{margin-top:12px;font-size:17px;line-height:1.6}
.ev-punkte{display:grid;gap:8px;margin-top:16px}
.ev-punkte li{display:flex;gap:12px;font-size:16px;line-height:1.45}
.ev-punkte li::before{content:"";flex:none;width:9px;height:9px;margin-top:.45em;border-radius:2px 4px 3px 4px;background:var(--t5);rotate:14deg}
.ev-schritte{display:grid;gap:12px;margin-top:16px;counter-reset:schritt}
.ev-schritte li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:16px;line-height:1.45;counter-increment:schritt}
.ev-schritte li::before{content:counter(schritt);font:400 34px/.85 var(--head);color:var(--t5)}
.ev-hinweis{display:inline-flex;margin-top:18px;padding:8px 14px;border:2px solid var(--ink);border-radius:var(--rough);background:var(--t3);color:var(--t8);font-weight:600;font-size:15px;rotate:-1deg}
.ev-termine{margin-top:24px}
.ev-termine-h{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t7)}
.ev-termine ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ev-termin{min-height:44px;padding:7px 12px 5px;border:2.5px solid var(--ink);border-radius:9px 12px 8px 11px;background:var(--t2);color:var(--t8);font:400 21px/1 var(--head);text-transform:lowercase;
  transition:translate .25s var(--ease),background-color .2s}
.ev-termin:hover{background:var(--t3);translate:0 -2px}
.ev-termin[aria-pressed="true"]{background:var(--t8);color:var(--t1)}
.ev-foto{margin-top:24px;aspect-ratio:4/3}
.ev-foto img{width:100%;height:100%;object-fit:cover}
.ev-knopf{margin-top:22px}
.ev-rechte{margin-top:18px;font-size:12.5px;color:var(--t7)}

/* ---------- Spielbrett ---------- */
.js .brett-sockel{display:block}
.brett-sockel{display:none;padding-bottom:11px;border:3px solid var(--ink);border-radius:28px 38px 26px 36px / 36px 26px 38px 28px;background:var(--t8)}
.brett{--g:clamp(5px,.7vw,10px);--rand:clamp(20px,2.5vw,36px);--tor:clamp(13px,1.5vw,21px);--weg:clamp(9px,1vw,14px);
  position:relative;margin:-3px -3px 0;padding:clamp(14px,1.6vw,22px) var(--rand) clamp(16px,1.8vw,24px);border:3px solid var(--ink);border-radius:inherit;
  background:var(--t6) radial-gradient(ellipse 80% 70% at 50% 38%,var(--t5) -30%,var(--t6) 58%,var(--t7) 100%);color:var(--t1)}
.brett-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kal-monat{font-size:clamp(32px,3vw,46px);color:var(--t1);text-align:center}
.kal-pfeil{display:grid;place-items:center;width:46px;height:46px;border:2px solid rgba(151,213,200,.55);border-radius:var(--rough);color:var(--t1);transition:border-color .2s,background-color .2s}
.kal-pfeil:hover{border-color:var(--t3);background:rgba(81,202,168,.14)}
.kal-pfeil:disabled{opacity:.35;cursor:default}
.kal-pfeil svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brett-woche,.reihe{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--g)}
.brett-woche{margin-top:14px;padding-bottom:8px}
.brett-woche span{text-align:center;font:400 clamp(16px,1.4vw,21px)/1 var(--head);color:var(--t2)}
.brett-felder{display:grid;gap:var(--g)}

/* Laufweg: ein Band hinter den Feldern einer Woche, an den Enden durchs Portal in die nächste Reihe */
.reihe{position:relative}
.reihe::before{content:"";position:absolute;top:50%;z-index:0;height:var(--weg);translate:0 -50%;border-block:2.5px solid var(--ink);background:var(--t3);
  left:calc((100% - 6 * var(--g)) / 7 * (var(--von) + .5) + var(--g) * var(--von));
  right:calc((100% - 6 * var(--g)) / 7 * (6.5 - var(--bis)) + var(--g) * (6 - var(--bis)))}
.reihe.ein::before{left:calc(var(--rand) / -2)}
.reihe.aus::before{right:calc(var(--rand) / -2)}
.tor{position:absolute;top:50%;z-index:2;width:var(--tor);aspect-ratio:226/273;translate:-50% -50%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-112 -144 226 273'%3E%3Cpolygon points='10,-134 -16,-127 -40,-103 -96,-60 -102,-60 -94,19 -87,20 -73,46 -53,111 -44,119 -24,119 77,94 85,83 95,47 97,14 105,-17 103,-67 57,-104' fill='%2351CAA8' stroke='%230A0F11' stroke-width='12' stroke-linejoin='round'/%3E%3Cpolygon points='6,-86 -10,-82 -26,-66 -62,-39 -65,-39 -60,12 -56,13 -47,29 -34,71 -28,77 -15,77 49,60 54,53 61,30 62,9 67,-11 66,-43 36,-67' fill='%23002736' stroke='%230A0F11' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tor-ein{left:calc(var(--rand) / -2)}
.tor-aus{left:calc(100% + var(--rand) / 2)}

/* Felder */
.feld{position:relative;z-index:1;display:block;aspect-ratio:1;min-width:0;padding:0;border:2.5px solid var(--ink);border-radius:9px 12px 8px 11px;background:var(--t1);color:var(--t8);
  text-align:left;container-type:inline-size;transition:box-shadow .2s,background-color .2s}
.feld.leer{visibility:hidden}
.feld:hover{filter:brightness(1.07)}
.feld-zahl{position:absolute;left:11%;top:8%;font:400 clamp(13px,31cqi,23px)/1 var(--head)}
.feld-text{position:absolute;left:0;right:0;bottom:10%;text-align:center;font-size:clamp(8px,16cqi,12px);font-weight:700;line-height:1;letter-spacing:.01em}
@container (max-width:54px){.feld-text{display:none}}
.feld.ruhe{background:var(--t2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M-3 3L3-3M0 12L12 0M9 15L15 9' stroke='%230A0F11' stroke-opacity='.16' stroke-width='1.5'/%3E%3C/svg%3E");color:var(--t7)}
.feld.zu{border-style:dashed;border-color:rgba(186,241,255,.6);background:var(--t7);color:var(--t2)}
/* vorbei: zurückgenommen, aber deckend, damit der Laufweg nicht durchscheint */
.feld.vorbei{border-color:rgba(10,15,17,.75);background:#29718A;color:rgba(186,241,255,.6)}
.feld.vorbei.ruhe{background:#29718A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M-3 3L3-3M0 12L12 0M9 15L15 9' stroke='%23BAF1FF' stroke-opacity='.16' stroke-width='1.5'/%3E%3C/svg%3E")}
.feld .mk{position:absolute;right:8%;bottom:9%;--mk:38cqi}
.feld .mk+.mk{right:auto;left:8%}
.feld.heute .mk{right:auto;left:8%}
.brett-felder.wahl .feld:not(.markiert) .mk{opacity:.4}
.feld.markiert .mk{scale:1.14}
.feld .mk{transition:scale .3s var(--ease),opacity .3s}
.feld[aria-pressed="true"]{box-shadow:0 0 0 3px var(--t1),0 0 0 5.5px var(--ink)}
.feld:focus-visible{outline:3px dashed var(--t1);outline-offset:7px}
.start-fahne{position:absolute;left:68%;bottom:calc(100% - 1px);z-index:3;padding:3px 7px 2px;border:2px solid var(--ink);border-radius:6px 8px 5px 7px;background:#E2502F;color:#2A0B04;
  font:400 clamp(11px,1.05vw,15px)/1 var(--head);translate:-50% 0;rotate:-5deg;white-space:nowrap}
.figur-heute{position:absolute;left:66%;bottom:20%;z-index:4;width:44cqi;height:auto;translate:-50% 0;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,25,35,.35))}
.motion .brett-felder.neu .feld:not(.leer){animation:feldRein .4s var(--ease) both;animation-delay:calc(var(--i,0) * 12ms)}
@keyframes feldRein{from{opacity:0;translate:0 8px}}

.brett-legende{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:18px;color:var(--t1);font-size:13px;line-height:1.3}
.brett-legende li{display:flex;align-items:center;gap:8px}
.leg-feld{flex:none;width:18px;height:18px;border:2px solid var(--ink);border-radius:5px 6px 4px 6px;background:var(--t1)}
.leg-feld.ruhe{background:var(--t2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2L2-2M0 8L8 0M6 10L10 6' stroke='%230A0F11' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E")}
.leg-feld.zu{border:2px dashed rgba(186,241,255,.7);background:transparent}
.leg-fahne{padding:2px 6px 1px;border:2px solid var(--ink);border-radius:5px 7px 4px 6px;background:#E2502F;color:#2A0B04;font:400 13px/1 var(--head);rotate:-5deg}
.leg-figur{width:13px;height:auto}
.brett-legende .mk{--mk:16px}

/* Was am gewählten Tag los ist */
.tag-info{padding:20px 22px;border:2.5px solid var(--ink);border-radius:26px 34px 24px 32px / 32px 24px 34px 26px;background:var(--t1);color:var(--t8)}
.tag-info h3{font-size:clamp(28px,2.4vw,36px);color:var(--t8)}
.tag-info p{margin-top:8px;font-size:16px;line-height:1.5}
.tag-info ul{display:grid;gap:12px;margin-top:14px}
.tag-ev{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.tag-ev .mk{--mk:38px}
.tag-ev b{display:block;font:400 24px/1 var(--head);text-transform:lowercase}
.tag-ev span{font-size:15px;color:var(--t7)}
.tag-mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 11px;border:2px solid var(--ink);border-radius:var(--rough);background:var(--t8);color:var(--t1);font-weight:600;font-size:14px;white-space:nowrap}
.tag-mehr .ic{width:20px;height:20px;color:var(--t3)}
.tag-mehr:hover{background:var(--t7)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .ev-raster{grid-template-columns:1fr}
  .ev-rechts{position:static;max-width:640px}
}

/* ---------- Handy: Karten nebeneinander ohne Überlappung, Brett über die volle Breite ---------- */
@media (max-width:700px){
  .ev-kopf{min-height:0;padding:calc(var(--nav-h) + 26px) var(--gut) 90px;
    background:var(--t7) radial-gradient(ellipse 110% 50% at 50% 74%,var(--t3) -40%,var(--t6) 36%,var(--t7) 64%,var(--t8) 100%)}
  .ev-kopf-in{grid-template-columns:1fr}
  .ev-kopf h1{font-size:clamp(54px,15vw,70px)}
  .ev-naechstes{font-size:14px}
  .ev-portal{width:min(62vw,250px)}
  .ev-links h2{font-size:clamp(44px,12.5vw,60px)}
  .blatt{gap:10px;margin-top:18px;padding-top:16px}
  .blatt.ausgeteilt .spielkarte[aria-selected="true"]{translate:0 -10px;scale:1.04}
  .blatt.ausgeteilt .spielkarte[aria-selected="true"] .sk-vorne{box-shadow:0 16px 22px -10px rgba(0,39,54,.55),0 0 0 3px var(--t1),0 0 0 5px var(--ink)}
  .sk-vorne{padding:19% 8% 13%}
  .sk-zeit,.sk-ecke.unten{display:none}
  .sk-name{font-size:clamp(12px,3.5vw,14px)}
  .sk-heute{right:-6px;top:-10px;padding:2px 8px;font-size:11.5px}
  .ev-karte{margin-top:24px;padding:24px 20px 22px}
  .brett-sockel{padding-bottom:8px}
  .brett{--rand:17px;--tor:12px;--weg:7px;padding:14px var(--rand) 16px}
  .kal-pfeil{width:44px;height:44px}
  .kal-monat{font-size:clamp(24px,7.4vw,30px)}
  .feld{border-width:2px;border-radius:7px 9px 6px 8px}
  .start-fahne{padding:2px 5px 1px;border-width:1.5px;font-size:10.5px}
  .tag-info{padding:18px 18px}
  .tag-ev{grid-template-columns:auto 1fr}
  .tag-mehr{grid-column:1/-1;justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  .spielkarte,.sk-vorne,.feld .mk{transition:none}
}