:root {
  --terra: #c8643b;
  --terra-d: #8f3f1f;
  --gold: #f2c14e;
  --gold-l: #ffe39a;
  --gold-d: #b9831b;
  --cream: #fff4e0;
  --parch: #f6e6c4;
  --parch-d: #e2c896;
  --ink: #3b2414;
  --dark: #1c120b;
  --u: min(1vw, 1.78vh);          /* Layout-Einheit: skaliert mit dem kleineren Maß */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--dark);
  font-family: 'Andika', system-ui, sans-serif; color: var(--cream);
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
  cursor: default;
}
body.kiosk, body.kiosk * { cursor: none !important; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(20, 10, 4, .55) 100%); }
#flash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff8e0, #ffd27a 40%, transparent 75%); opacity: 0; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.screen, .overlay { position: absolute; inset: 0; display: none; pointer-events: none; }
.screen.show, .overlay.show { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; pointer-events: auto; touch-action: manipulation; }

/* ---------- Logo ---------- */
.logo { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.logo-a { display: block; font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: calc(var(--u) * 11);
  line-height: 1; letter-spacing: .02em; color: var(--gold-l);
  background: linear-gradient(180deg, #fff3c4 0%, #f7cf5c 45%, #c98a22 55%, #ffe08a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(var(--u)*.5) 0 #5a2c12) drop-shadow(0 0 calc(var(--u)*2) rgba(255, 190, 80, .45)); }
.logo-b { display: block; margin-top: calc(var(--u) * 1); font-family: 'Cinzel', serif; font-weight: 800;
  font-size: calc(var(--u) * 3.6); color: var(--cream); letter-spacing: .08em; text-shadow: 0 3px 0 #3b1c0c, 0 0 18px rgba(0,0,0,.6); }
.logo.big { top: 7%; }
#s-loading .logo { top: 30%; }
.loadbar { position: absolute; left: 50%; top: 62%; width: calc(var(--u) * 40); height: calc(var(--u) * 1.6); transform: translateX(-50%);
  border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 2px rgba(242,193,78,.5); overflow: hidden; }
.loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terra), var(--gold)); border-radius: 99px; transition: width .3s; }

/* ---------- Start ---------- */
.tap-start { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); white-space: nowrap;
  display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.4) calc(var(--u) * 4) calc(var(--u) * 1.4) calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 3.4); font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, var(--gold-l), var(--gold) 55%, #e0a536);
  border-radius: 999px; box-shadow: 0 calc(var(--u)*.7) 0 var(--gold-d), 0 calc(var(--u)*1.4) calc(var(--u)*3) rgba(0,0,0,.5), 0 0 0 calc(var(--u)*.5) rgba(255,240,200,.35);
  animation: pulse 1.6s ease-in-out infinite; }
.tap-start .hand { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); fill: #fff; stroke: var(--ink); stroke-width: 3; animation: tap 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
@keyframes tap { 0%,100% { transform: translate(0,0) rotate(-8deg); } 45% { transform: translate(0, -12%) rotate(-8deg); } 55% { transform: translate(0, 4%) rotate(-8deg) scale(.95); } }

/* ---------- Werkzeugwahl ---------- */
.headline { position: absolute; top: 3.5%; width: 100%; margin: 0; text-align: center; font-family: 'Cinzel', serif; font-weight: 800;
  font-size: calc(var(--u) * 5.2); color: var(--gold-l); text-shadow: 0 4px 0 #3b1c0c, 0 0 24px rgba(0,0,0,.7); }
.cards { position: absolute; left: 0; right: 0; top: 17%; display: flex; justify-content: center; gap: calc(var(--u) * 4); }
.card { width: calc(var(--u) * 25); padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 3);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .8);
  background: linear-gradient(170deg, #fbefd6, var(--parch) 40%, var(--parch-d));
  color: var(--ink); box-shadow: 0 calc(var(--u)*1) 0 #a77d45, 0 calc(var(--u)*2) calc(var(--u)*4) rgba(0,0,0,.55), inset 0 0 0 calc(var(--u)*.45) rgba(255,255,255,.55);
  transform: translateY(40vh) scale(.8); opacity: 0; transition: transform .7s cubic-bezier(.2,1.5,.4,1), opacity .4s; }
#s-levels.show .card { transform: none; opacity: 1; }
#s-levels.show .card:nth-child(2) { transition-delay: .12s; }
#s-levels.show .card:nth-child(3) { transition-delay: .24s; }
.card:active { transform: scale(.95) !important; }
.card .tool { width: calc(var(--u) * 11); height: calc(var(--u) * 11); filter: drop-shadow(0 6px 4px rgba(0,0,0,.3)); }
.card b { font-family: 'Cinzel', serif; font-weight: 800; font-size: calc(var(--u) * 4.4); line-height: 1; }
.card small { font-size: calc(var(--u) * 2.6); font-weight: 700; color: #7a4a2a; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .6); max-width: calc(var(--u) * 20); min-height: calc(var(--u) * 4.2); align-content: center; }
.dots i { width: calc(var(--u) * 2.1); height: calc(var(--u) * 1.7); background: var(--terra); border-radius: 40% 60% 45% 55%; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.card.pulse { animation: cardpulse .9s ease-in-out 2; }
@keyframes cardpulse { 50% { transform: scale(1.08); } }

/* ---------- HUD ---------- */
#progress { position: absolute; top: calc(var(--u) * 2.2); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2); border-radius: 99px; background: rgba(28,18,11,.55); box-shadow: inset 0 0 0 2px rgba(242,193,78,.35); }
#progress i { width: calc(var(--u) * 3.2); height: calc(var(--u) * 2.6); border-radius: 40% 60% 45% 55%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: background .3s; }
#progress i.on { background: linear-gradient(180deg, #e98a5c, var(--terra)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 12px rgba(255,190,80,.7); animation: pop .5s cubic-bezier(.2,2,.4,1); }
@keyframes pop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
.round { position: absolute; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff1c9, var(--gold) 60%, #d39a2c); box-shadow: 0 calc(var(--u)*.6) 0 var(--gold-d), 0 calc(var(--u)*1) calc(var(--u)*2.4) rgba(0,0,0,.5); }
.round:active { transform: translateY(calc(var(--u)*.4)); box-shadow: 0 calc(var(--u)*.2) 0 var(--gold-d); }
.round svg { width: 62%; height: 62%; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.round.hint svg { fill: #fff8d8; stroke-width: 3; }
.rot { top: 42%; display: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.rot.show { display: block; animation: wiggle 2.4s ease-in-out infinite; }
#btn-rot-l { left: calc(34.5% - var(--u) * 4); }
#btn-rot-r { right: calc(34.5% - var(--u) * 4); }
@keyframes wiggle { 0%, 80%, 100% { rotate: 0deg; } 85% { rotate: -10deg; } 90% { rotate: 10deg; } 95% { rotate: -6deg; } }
.hint { right: calc(var(--u) * 3); top: calc(var(--u) * 2.5); width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); }
.hint.nudge { animation: hintnudge 1s ease-in-out infinite; }
@keyframes hintnudge { 50% { transform: scale(1.15); box-shadow: 0 0 0 calc(var(--u)*1.5) rgba(255,220,120,.35), 0 0 calc(var(--u)*4) rgba(255,210,100,.9); } }
.home { left: calc(var(--u) * 3); top: calc(var(--u) * 2.5); width: calc(var(--u) * 7); height: calc(var(--u) * 7); opacity: .85;
  background: radial-gradient(circle at 40% 30%, #fbe7cc, #d7b78b 60%, #a98352); box-shadow: 0 calc(var(--u)*.5) 0 #7b5a33, 0 calc(var(--u)*1) calc(var(--u)*2) rgba(0,0,0,.45); }

/* ---------- Sprechblase ---------- */
#bubble { position: absolute; left: 50%; bottom: calc(var(--u) * 2.5); transform: translate(-50%, 140%); width: max-content; max-width: min(84vw, calc(var(--u) * 125));
  display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 3) calc(var(--u) * 1.4) calc(var(--u) * 1.4);
  background: linear-gradient(180deg, #fffaf0, var(--parch)); color: var(--ink); border-radius: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u)*.6) 0 #b79262, 0 calc(var(--u)*1.5) calc(var(--u)*4) rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
#bubble.show { transform: translate(-50%, 0); }
#bubble .avatar { flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: #6b3a1e center/cover no-repeat;
  box-shadow: 0 0 0 calc(var(--u)*.45) var(--gold), 0 0 calc(var(--u)*2) rgba(255,190,80,.8); }
#bubble.talk .avatar { animation: talk .22s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scale(1.06) rotate(2deg); } }
#bubble p { margin: 0; font-size: calc(var(--u) * 3.1); line-height: 1.25; font-weight: 700; }

/* ---------- Geisterhand ---------- */
#ghosthand { position: absolute; left: 0; top: 0; width: calc(var(--u) * 9); height: calc(var(--u) * 9); opacity: 0; pointer-events: none; transform-origin: 30% 15%;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
#ghosthand svg { width: 100%; height: 100%; fill: #fff; stroke: var(--ink); stroke-width: 3; }
#ghosthand.press svg { transform: scale(.9); }

#toast { position: absolute; left: 50%; top: 16%; transform: translateX(-50%) scale(.6); opacity: 0; transition: all .35s cubic-bezier(.2,1.6,.4,1);
  font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: calc(var(--u) * 7); color: var(--gold-l); text-shadow: 0 4px 0 #5a2c12, 0 0 30px rgba(255,190,80,.8);
  width: max-content; max-width: 90vw; text-align: center; line-height: 1.1; }
#toast.small { font-family: 'Andika', sans-serif; font-weight: 700; font-size: calc(var(--u) * 4); }
#toast.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---------- Pergament-Dialoge ---------- */
.parch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, calc(var(--u) * 130));
  padding: calc(var(--u) * 3) calc(var(--u) * 3.5) calc(var(--u) * 3); border-radius: calc(var(--u) * 2.5); color: var(--ink); pointer-events: auto;
  background: radial-gradient(ellipse at 50% 40%, #fff6e2, var(--parch) 60%, var(--parch-d)); box-shadow: 0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.6), inset 0 0 calc(var(--u)*3) rgba(150,100,40,.35); }
.parch.small { width: min(80vw, calc(var(--u) * 70)); text-align: center; }
.parch h2 { margin: 0 0 calc(var(--u) * 1.6); text-align: center; font-family: 'Cinzel', serif; font-weight: 800; font-size: calc(var(--u) * 4.6); }
.parch p { font-size: calc(var(--u) * 3); margin: 0 0 calc(var(--u) * 1.5); }
.row { display: flex; justify-content: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2); }
.overlay { background: rgba(20,10,4,.55); pointer-events: auto; }
.overlay .round { position: static; }
.round.big { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.round.yes { background: radial-gradient(circle at 40% 30%, #ffd9c7, #e98a5c 60%, #b5532b); box-shadow: 0 calc(var(--u)*.6) 0 #7d3317, 0 calc(var(--u)*1) calc(var(--u)*2.4) rgba(0,0,0,.5); }
.round.no { background: radial-gradient(circle at 40% 30%, #e6ffd6, #7fc26a 60%, #4c8d3a); box-shadow: 0 calc(var(--u)*.6) 0 #2f5d24, 0 calc(var(--u)*1) calc(var(--u)*2.4) rgba(0,0,0,.5); }
.timer { height: calc(var(--u) * 1.2); border-radius: 99px; background: rgba(0,0,0,.15); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: var(--terra); }

#name-field { margin: 0 auto calc(var(--u) * 1.6); width: 60%; min-height: calc(var(--u) * 7.5); display: flex; align-items: center; justify-content: center;
  background: #fffdf6; border-radius: calc(var(--u) * 1.5); box-shadow: inset 0 3px 8px rgba(0,0,0,.2), 0 0 0 3px var(--gold);
  font-size: calc(var(--u) * 6); font-weight: 700; letter-spacing: .03em; }
.caret { width: 4px; height: calc(var(--u) * 6); background: var(--terra); margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#kbd { display: grid; grid-template-columns: repeat(13, 1fr); gap: calc(var(--u) * .8); }
#kbd button { height: calc(var(--u) * 6.6); border-radius: calc(var(--u) * 1.2); font-size: calc(var(--u) * 3.8); font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #fff, #f1e3c6); box-shadow: 0 calc(var(--u)*.45) 0 #b99a68, 0 2px 6px rgba(0,0,0,.25); }
#kbd button:active { transform: translateY(calc(var(--u)*.35)); box-shadow: 0 1px 0 #b99a68; background: var(--gold-l); }
#kbd button.wide { grid-column: span 2; }
#kbd button.del { background: linear-gradient(180deg, #ffe3d6, #f0b79c); }
.btn { padding: calc(var(--u) * 1.6) calc(var(--u) * 4); border-radius: 999px; font-size: calc(var(--u) * 3.4); font-weight: 700; }
.btn.gold { color: var(--ink); background: linear-gradient(180deg, var(--gold-l), var(--gold) 55%, #e0a536); box-shadow: 0 calc(var(--u)*.6) 0 var(--gold-d), 0 calc(var(--u)*1) calc(var(--u)*2.4) rgba(0,0,0,.35); }
.btn.ghost { color: var(--ink); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 3px rgba(120,80,40,.4); }
.btn:active { transform: translateY(3px); }
.btn.big { font-size: calc(var(--u) * 3.8); }

/* ---------- Urkunde erzeugen ---------- */
.making { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: calc(var(--u) * 60); }
.making p { font-size: calc(var(--u) * 4); font-weight: 700; text-shadow: 0 3px 0 #3b1c0c; }
.making .loadbar { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
.quill { width: calc(var(--u) * 14); height: calc(var(--u) * 14); margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,120,.9), rgba(255,180,60,.2) 60%, transparent 70%); animation: glowp 1.2s ease-in-out infinite; }
@keyframes glowp { 50% { transform: scale(1.25); opacity: .6; } }

/* ---------- Urkunde + QR ---------- */
#s-cert.show { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.2); }
.cert-wrap { display: flex; align-items: center; gap: calc(var(--u) * 4); pointer-events: auto; max-height: 84vh; }
#cert-img { height: min(70vh, calc(var(--u) * 40)); aspect-ratio: 3 / 4; border-radius: calc(var(--u) * 1.5); box-shadow: 0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.6), 0 0 0 calc(var(--u)*.6) var(--gold);
  background: var(--parch); animation: certin .9s cubic-bezier(.2,1.3,.4,1); }
@keyframes certin { from { transform: rotate(-8deg) scale(.4); opacity: 0; } }
.qr-col { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); width: calc(var(--u) * 42); }
.qr-step { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2);
  background: rgba(255,244,224,.95); color: var(--ink); box-shadow: 0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.4); }
.qr-step canvas { width: calc(var(--u) * 13); height: calc(var(--u) * 13); image-rendering: pixelated; background: #fff; border-radius: 6px; }
.qr-step p { margin: 0; font-size: calc(var(--u) * 2.4); font-weight: 700; line-height: 1.2; }
.num { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); border-radius: 50%; display: grid; place-items: center; font-family: 'Cinzel', serif; font-weight: 800;
  font-size: calc(var(--u) * 3.4); color: var(--ink); background: var(--gold); }
.code { display: flex; align-items: baseline; justify-content: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 2.8); font-weight: 700; text-shadow: 0 2px 0 #3b1c0c; }
.code b { font-family: 'Cinzel', serif; font-size: calc(var(--u) * 4.6); letter-spacing: .18em; color: var(--gold-l); }
#s-cert.noqr .qr-step { display: none; }
/* Web-Fassung (#s-cert.web): ohne QR-Codes und Bild-Code, dafür ein Knopf zum Speichern des GIFs */
#btn-save { display: none; }
#s-cert.web .code { display: none; }
#s-cert.web .qr-col { width: auto; }
#s-cert.web #btn-save:not([hidden]) { display: block; text-align: center; text-decoration: none; pointer-events: auto; }
#btn-again { position: relative; flex: none; font-size: calc(var(--u) * 3); padding: calc(var(--u) * 1.2) calc(var(--u) * 4); }

/* ---------- Sprachen ---------- */
#langs { position: absolute; left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 2.5); display: none; flex-direction: column; gap: calc(var(--u) * 1.2); pointer-events: auto; }
#langs.show { display: flex; }
.flag { position: relative; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 calc(var(--u)*.4) rgba(255,255,255,.7), 0 4px 10px rgba(0,0,0,.5); opacity: .7; transition: transform .2s, opacity .2s; }
.flag.on { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 calc(var(--u)*.5) var(--gold), 0 0 calc(var(--u)*2) rgba(255,200,90,.9); }
.flag i { flex: 1; display: block; }
.flag.de i:nth-child(1) { background: #111; } .flag.de i:nth-child(2) { background: #d00; } .flag.de i:nth-child(3) { background: #ffce00; }
.flag.fr { flex-direction: row; } .flag.fr i:nth-child(1) { background: #0055a4; } .flag.fr i:nth-child(2) { background: #fff; } .flag.fr i:nth-child(3) { background: #ef4135; }
.flag.en i { background:
  linear-gradient(90deg, transparent 42%, #c8102e 42%, #c8102e 58%, transparent 58%),
  linear-gradient(0deg, transparent 42%, #c8102e 42%, #c8102e 58%, transparent 58%),
  linear-gradient(90deg, transparent 36%, #fff 36%, #fff 64%, transparent 64%),
  linear-gradient(0deg, transparent 34%, #fff 34%, #fff 66%, transparent 66%),
  linear-gradient(33deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
  linear-gradient(-33deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), #012169; }

#debug { position: absolute; left: 6px; bottom: 6px; font: 12px/1.3 monospace; color: #0f0; background: rgba(0,0,0,.6); padding: 4px 6px; display: none; white-space: pre; }
#debug.show { display: block; }

/* ---------- Zauberpinsel ---------- */
#brush { position: absolute; left: 0; top: 0; width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin: calc(var(--u) * -1.9) 0 0 calc(var(--u) * -1.9);
  pointer-events: none; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
#brush.show { opacity: 1; }
#brush svg { width: 100%; height: 100%; }

/* im Puzzle: schmale Blase in der Mitte, damit die Scherbenfelder links/rechts frei bleiben */
body.play #bubble { max-width: min(38vw, calc(var(--u) * 62)); padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 1) calc(var(--u) * 1); }
body.play #bubble p { font-size: calc(var(--u) * 2.4); }
body.play #bubble .avatar { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); }

#s-name .parch { top: auto; bottom: calc(var(--u) * 1.5); transform: translateX(-50%); width: min(96vw, calc(var(--u) * 150)); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4) calc(var(--u) * 2); }
#s-name .parch h2 { font-size: calc(var(--u) * 3.6); margin-bottom: calc(var(--u) * 1); }
#s-name .row { margin-top: calc(var(--u) * 1.4); }

/* auf dem Urkunden-Bildschirm spricht Flavius von oben */
body.namingview #bubble { display: none; }
body.certview #bubble { display: none; }


/* ---------- Web-Fassung (body.web, siehe main.js) ---------- */
/* Werkzeugkarte, deren Scherbenmodell gerade nachlädt */
.card.loading { animation: cardpulse .9s ease-in-out infinite; }
/* Meldung nach einem Ladefehler: auf der Werkzeugwahl unter den Karten (darüber war Goldschrift auf hellen Karten kaum lesbar);
   die Position springt, statt mitzugleiten, wenn die Karten verschwinden */
body.web #s-levels.show ~ #toast { top: 80%; }
body.web #toast { transition-property: opacity, transform; }
/* kleiner Link zurück zur Fallstudie, oben links auf dem Startbildschirm (dort liegen keine Spielknöpfe) */
#back-link { display: none; }
body.web #back-link { display: block; position: absolute; left: calc(var(--u) * 2.5); top: calc(var(--u) * 2.5); pointer-events: auto;
  font-size: clamp(13px, calc(var(--u) * 1.5), 18px); font-weight: 700; color: var(--cream); opacity: .8; text-decoration: none; text-shadow: 0 2px 0 #3b1c0c, 0 0 10px rgba(0,0,0,.6); }
body.web #back-link::before { content: '\2190\00a0'; }
/* unter 800 px Breite nur „← Fallstudie“: die lange Beschriftung lief sonst (Querformat, Breite bis rund 760 px) in das FLAVIUS-Logo */
body.web #back-link .short { display: none; }
@media (max-width: 799px) {
  body.web #back-link .full { display: none; }
  body.web #back-link .short { display: inline; }
}
body.web #back-link:hover, body.web #back-link:focus-visible { opacity: 1; text-decoration: underline; }
/* Handy im Hochformat: Hinweis zum Querdrehen; verschwindet beim Drehen von selbst oder nach Antippen */
@media (orientation: portrait) and (max-width: 600px) and (pointer: coarse) {
  body.web:not(.rotate-ok) #s-rotate { display: block; }
}
#s-rotate .parch h2 { font-size: max(20px, calc(var(--u) * 4.6)); }
#s-rotate .parch p { font-size: max(15px, calc(var(--u) * 3)); margin: 0; }