/* Zungo — Herkunftsspiel auf wie-schmeckt.de.
   Eingebettet per Shortcode in einen Beitrag, .zg laeuft also INNERHALB des Themes.
   Deshalb ist alles unter .zg gescoped und setzt zurueck, .zg was Newspaper mitbringt.
   Kein Dunkelmodus: die Seite hat keinen, .zg ein dunkler Block auf weissem Grund
   wirkt wie ein Fehler. */
.zg /* Schriften liegen lokal. Nichts von Google — das waere zustimmungspflichtig. */
@font-face{
  font-family:'ZungoDisplay';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/archivo-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'ZungoText';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/opensans-var-latin.woff2) format('woff2');
}

.zg{
  --ink:#1a1817; --muted:#55504a; --line:#ded6c9;
  --paper:#fbf7f1; --surface:#ffffff;
  --land:#efe4d4; --land-line:#b6a68d; --ocean:#cbdcda;
  --accent:#e1523d; --accent-dark:#b93a28; --accent-ink:#ffffff;
  --truth:#1e8e5a;
  --b1:#1e8e5a; --b2:#d9a520; --b3:#e07b39; --b4:#d64545; --b5:#b3aca4;
  --radius:18px;

  position:relative;
  max-width:680px;
  margin:34px auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(29,27,26,.07);
  overflow:hidden;
  color:var(--ink);
  font-family:'ZungoText','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
/* --- Zuruecksetzen, .zg was das Theme mitbringt --- */
.zg .zg *, .zg *::before, .zg *::after{box-sizing:border-box}
.zg p, .zg h2, .zg h3, .zg ul, .zg ol, .zg li{margin:0;padding:0}
.zg ul, .zg ol{list-style:none}
.zg h2, .zg h3{font-family:'ZungoDisplay',system-ui,sans-serif;text-transform:none;letter-spacing:normal}
.zg button{
  font:inherit;color:inherit;cursor:pointer;border:0;background:none;
  margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;
}
.zg input{font:inherit;margin:0}
.zg img{max-width:100%;height:auto;display:block;margin:0;border-radius:0}
.zg a{box-shadow:none}
.zg :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:5px}
.zg [hidden]{display:none !important}
/* --- Ansichten (Start / Ende) --- */
.zg .zg-view{padding:30px 26px 28px;background:var(--paper)}
.zg .kicker{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px !important;
}
.zg .hero{
  font-weight:800;font-size:clamp(34px,8.5vw,50px);line-height:.98;letter-spacing:-.04em;
  margin:0 0 14px !important;color:var(--ink);
}
.zg .hero i{color:var(--accent);font-style:normal}
.zg .lede{margin:0 0 22px !important;font-size:16px;color:var(--muted);max-width:38ch}
.zg .rules{margin:0 0 26px !important;display:flex;flex-direction:column;gap:11px}
.zg .rules li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.zg .rules b{font-family:'ZungoDisplay',system-ui,sans-serif;color:var(--accent);flex:0 0 auto;width:18px}
.zg .rules em{font-style:normal;font-weight:700;color:var(--ink)}
.zg .btn{
  display:block;width:100%;padding:13px 18px;border-radius:14px;
  background:var(--accent);color:var(--accent-ink);
  font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:700;font-size:16.5px;
  transition:background .2s ease,transform .12s ease;
}
.zg .btn:hover{background:var(--accent-dark);color:var(--accent-ink)}
.zg .btn:active{transform:translateY(1px)}
.zg .btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed;transform:none}
.zg .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.zg .btn.ghost:hover{background:var(--paper);color:var(--ink)}
/* --- Spielansicht --- */
.zg .bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper);
}
.zg .mark{font-weight:800;font-size:18px;letter-spacing:-.03em;margin:0 !important;line-height:1}
.zg .mark i{color:var(--accent);font-style:normal}
.zg .pips{display:flex;gap:5px;margin-left:auto}
.zg .pip{width:12px;height:16px;display:block;color:var(--line);transition:color .4s ease}
.zg .pip.b1{color:var(--b1)}
.zg .pip.b2{color:var(--b2)}
.zg .pip.b3{color:var(--b3)}
.zg .pip.b4{color:var(--b4)}
.zg .pip.b5{color:var(--b5)}
.zg .pip.now{color:var(--muted)}
.zg .score{
  font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;min-width:56px;text-align:right;
}
.zg .card{padding:14px 16px 12px;display:flex;flex-direction:column;gap:11px;background:var(--paper);min-width:0}
.zg .thumb{
  width:100%;aspect-ratio:4/3;max-height:210px;border-radius:15px;border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(199,189,169,.35) 9px 10px),
    var(--paper);
  display:grid;place-items:center;overflow:hidden;
}
.zg .thumb span{
  font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:800;font-size:26px;
  letter-spacing:-.02em;color:var(--ink);padding:0 18px;text-align:center;
}
.zg .thumb.has-img{background:var(--paper);padding:0}
.zg .thumb.has-img img{width:100%;height:100%;object-fit:cover}
.zg .cap{display:flex;flex-direction:column;gap:4px}
.zg .prompt{font-weight:800;font-size:clamp(23px,6.5vw,29px);line-height:1.1;letter-spacing:-.025em;margin:0 !important}
.zg .sub{margin:0 !important;color:var(--muted);font-size:13.5px}
.zg .card.result .kicker{color:var(--muted)}
.zg .kicker.v1{color:var(--b1)}
.zg .kicker.v2{color:var(--b2)}
.zg .kicker.v3{color:var(--b3)}
.zg .kicker.v4{color:var(--b4)}
.zg .kicker.v5{color:var(--b5)}
.zg .res-head{display:flex;align-items:baseline;gap:12px}
.zg .res-place{font-weight:800;font-size:clamp(21px,6vw,26px);letter-spacing:-.025em;line-height:1.12;margin:0 !important}
.zg .res-pts{
  font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:800;font-size:30px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-left:auto;white-space:nowrap;
}
.zg .res-pts.v1{color:var(--b1)}
.zg .res-pts.v2{color:var(--b2)}
.zg .res-pts.v3{color:var(--b3)}
.zg .res-km{
  margin:0 !important;font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.zg .fact{margin:0 !important;font-size:14px;color:var(--muted);border-left:2px solid var(--line);padding-left:11px}
.zg .fact a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* --- Karte --- */
.zg .stage{
  position:relative;width:100%;aspect-ratio:2000/1287;min-height:180px;
  background:var(--ocean);overflow:hidden;touch-action:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.zg .stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.zg #zg-land path{fill:var(--land);stroke:var(--land-line);stroke-width:.7;vector-effect:non-scaling-stroke}
.zg .zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:5px;z-index:2}
.zg .zoom button{
  width:34px;height:34px;border:1px solid var(--line);background:var(--surface);border-radius:10px;
  font-size:18px;font-weight:700;line-height:1;display:grid;place-items:center;padding:0;
  box-shadow:0 6px 18px rgba(29,27,26,.12);
}
.zg .hint, .zg .readout{
  position:absolute;z-index:2;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(29,27,26,.12);pointer-events:none;
}
.zg .hint{
  left:50%;top:10px;transform:translateX(-50%);border-radius:999px;padding:5px 13px;
  font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:opacity .3s ease;margin:0 !important;
}
.zg .readout{
  left:10px;bottom:10px;border-radius:8px;padding:4px 8px;
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;color:var(--muted);
}
.zg .sheet{padding:12px 16px 14px;background:var(--paper)}
/* --- Endbildschirm --- */
.zg .total{
  font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:800;
  font-size:clamp(46px,13vw,66px);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;margin:0 !important;
}
.zg .total small{display:block;font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:5px}
.zg .rank{
  display:inline-block;margin:14px 0 16px;padding:7px 15px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:700;font-size:14px;
}








/* --- Teilen --- */
.zg .sharebox{border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 20px;background:var(--surface)}
.zg .sharehead{
  font-family:'ZungoDisplay',system-ui,sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px !important;
}
.zg .sharecard{width:100%;border-radius:12px;border:1px solid var(--line);margin:0 0 13px}
.zg .sharebtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.zg .sharebtns button, .zg .sharebtns a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 10px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:700;text-decoration:none;line-height:1;
  transition:border-color .18s ease,background .18s ease;
}
.zg .sharebtns button:hover, .zg .sharebtns a:hover{border-color:var(--accent);background:var(--paper);color:var(--ink)}
.zg .sharebtns svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}
.zg .sharebtns .wa{color:#1f8f4e}
.zg .sharebtns .tg{color:#2b8fd0}
.zg .sharebtns .fb{color:#3b5998}
.zg .sharebtns .xx{color:var(--ink)}
/* --- Bestenliste --- */
.zg .board{border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 20px;background:var(--surface)}
.zg .board h3{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 3px !important;
}
.zg .board .note{font-size:12.5px;color:var(--muted);margin:0 0 12px !important}
.zg .tabs{display:flex;gap:6px;margin:0 0 12px}
.zg .tabs button{flex:1;padding:8px 4px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted)}
.zg .tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zg .board ol{margin:0 0 13px !important}
.zg .board li{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line)}
.zg .board li:last-child{border-bottom:0}
.zg .board li.you{color:var(--accent);font-weight:700}
.zg .board li.leer{display:block;color:var(--muted);font-size:13px;border-bottom:0}
.zg .board .pos{font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:700;color:var(--muted);width:20px;font-variant-numeric:tabular-nums}
.zg .board li.you .pos{color:var(--accent)}
.zg .board .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zg .board .val{font-family:'ZungoDisplay',system-ui,sans-serif;font-weight:700;font-variant-numeric:tabular-nums}
.zg .namewrap{display:flex;gap:8px}
.zg .namewrap input{
  flex:1;min-width:0;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;
  background:var(--paper);color:var(--ink);font-size:15px;
}
.zg .namewrap .btn{width:auto;flex:0 0 auto;padding:11px 18px;font-size:15px}
.zg .err{color:var(--b4);font-size:13px;font-weight:600;margin:9px 0 0 !important}
.zg .ok{color:var(--truth);font-size:13px;font-weight:600;margin:9px 0 0 !important}
.zg-fehler{margin:14px 0 0 !important;color:var(--b4);font-size:13.5px;font-weight:600}
/* --- Konfetti --- */
.zg #fx{position:absolute;inset:0;z-index:20;pointer-events:none}
/* --- Bewegung --- */
.zg @keyframes zgDrop{from{transform:translateY(-30px) scale(.6);opacity:0}
to{transform:none;opacity:1}
.zg }
@keyframes zgPop{0%{transform:scale(0);opacity:0}
62%{transform:scale(1.3)}
100%{transform:scale(1);opacity:1}
.zg }
@keyframes zgRing{from{transform:scale(1);opacity:.85}
to{transform:scale(3.4);opacity:0}
.zg }
@keyframes zgRise{from{transform:translateY(14px);opacity:0}
to{transform:none;opacity:1}
.zg }
@keyframes zgBadge{0%{transform:scale(.4) rotate(-7deg);opacity:0}
65%{transform:scale(1.12) rotate(2deg)}
100%{transform:scale(1) rotate(0);opacity:1}
.zg }
@keyframes zgSquare{from{transform:translateY(-10px) scale(.4);opacity:0}
to{transform:none;opacity:1}
.zg }
.zg .zg-drop{animation:zgDrop .34s cubic-bezier(.2,1.5,.4,1) both}
.zg .zg-pop{animation:zgPop .42s cubic-bezier(.2,1.6,.4,1) both}
.zg .zg-ring{animation:zgRing 1.1s ease-out both}
.zg .pip.pop{animation:zgPop .5s cubic-bezier(.2,1.6,.4,1) both}
.zg-view.in .total{animation:zgRise .5s ease-out both}
.zg-view.in .rank{animation:zgBadge .6s cubic-bezier(.2,1.5,.4,1) .45s both}



@media (prefers-reduced-motion:reduce){
.zg *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important}

}

@media (max-width:520px){
.zg{margin:24px auto;border-radius:14px}
.zg-view{padding:24px 18px 22px}
.zg .thumb{max-height:170px}

}

/* --- Desktop: zwei Spalten. Untereinander wird der Block sonst ueber 900 px
       hoch und man scrollt staendig. --- */
@media (min-width:1019px){
.zg{max-width:none}
.zg-game{
    display:grid;
    grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
    grid-template-areas:"bar bar" "card stage" "sheet sheet";
  }
.zg .bar{grid-area:bar}
.zg .card{grid-area:card;min-height:0;justify-content:flex-start}
.zg .stage{grid-area:stage;border-left:1px solid var(--line);border-right:0}
.zg .sheet{grid-area:sheet;border-top:1px solid var(--line)}
.zg .thumb{max-height:none;aspect-ratio:auto;flex:1 1 auto;min-height:130px}
.zg-view{padding:26px 24px 24px}

}

/* --- Kopfgrafik der Startansicht --- */
.zg .zg-hero{display:block;width:100%;max-width:520px;height:auto;margin:0 auto 14px}
.zg .zg-view .lede{margin:0 0 18px !important;font-size:15.5px;max-width:46ch}
.zg .zg-view .lede em{font-style:normal;font-weight:700;color:var(--ink)}
@media (max-width:520px){
  .zg .zg-hero{margin-bottom:12px}
}

/* --- Ergebniskopf: eine Zeile statt drei Bloecke --- */
.zg .ergebnis{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--line);
}
.zg .ergebnis .total{
  font-size:clamp(42px,12vw,58px);line-height:1;letter-spacing:-.04em;
}
.zg .ergebnis .total small{
  display:inline;font-size:14.5px;font-weight:500;letter-spacing:0;
  color:var(--muted);margin:0 0 0 9px;
}
.zg .ergebnis .rank{margin:0;align-self:center}

/* --- Teilen: der eine wichtige Knopf zuerst --- */
.zg .sharebox{padding:16px;margin:0 0 18px}
.zg .sharebtns .prim{
  grid-column:1/-1;background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);font-size:15.5px;padding:13px 10px;
}
.zg .sharebtns .prim:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--accent-ink)}
.zg .sharebtns .prim svg{width:17px;height:17px}
.zg .sharecard{margin:0 0 12px}
.zg .board{margin:0 0 18px}

/* --- Instagram-Knopf --- */
.zg .sharebtns .ig{
  color:#fff;border-color:transparent;
  background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 48%,#6228d7 100%);
}
.zg .sharebtns .ig:hover{color:#fff;border-color:transparent;filter:brightness(1.07)}
.zg .sharebtns .ig svg{fill:currentColor}

/* --- Weiterweg nach dem Lauf. Nur wo die Seitenspalte fehlt, also mobil. --- */
.zg .weiter{
  border:1px solid var(--line);border-radius:16px;
  padding:16px;margin:0 0 18px;background:var(--surface);
}
.zg .weiterliste{margin:0}
.zg .weiterliste li{border-bottom:1px solid var(--line)}
.zg .weiterliste li:last-child{border-bottom:0}
.zg .weiterliste a{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;line-height:1.35;
}
.zg .weiterliste a:hover{color:var(--accent)}
.zg .weiterliste img{width:60px;height:60px;object-fit:cover;border-radius:10px;flex:0 0 auto}