/* Handy / Pult: Eingang, Lobby, Tippkarte, Endstand. */
body { overflow: hidden; height: 100dvh; font-size: 17px; }
#inhalt { height: 100%; overflow: auto; padding: max(1.2em, env(safe-area-inset-top)) 1.2em 1.5em; display: flex; flex-direction: column; gap: 1.1em; align-items: stretch; }
#inhalt:empty { display: none; }
#inhalt.mitte { justify-content: center; text-align: center; }
.logo { font-family: var(--titel); font-weight: 700; font-size: 2.6em; text-align: center; line-height: 1; }
.logo::first-letter { color: var(--akzent); }
.logo small { display: block; font-family: var(--schrift); font-weight: 400; font-size: .4em; color: var(--leise); margin-top: .4em; }
.eingabe { display: flex; flex-direction: column; gap: .8em; }
.frage { font-size: 1.15em; margin: 0; }
.fehler { color: var(--rot); min-height: 1.2em; margin: 0; }
.wackel { animation: wackel .4s; }
@keyframes wackel { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ich { text-align: center; font-size: 1.3em; font-weight: 600; }
.einstellen { display: flex; flex-direction: column; gap: .8em; }
.einstellen fieldset { border: 1px solid var(--linie); border-radius: .8em; padding: .6em .9em .9em; margin: 0; }
.einstellen legend { color: var(--leise); padding: 0 .4em; }
.chips { display: flex; gap: .5em; flex-wrap: wrap; }
.chip { font: inherit; font-family: var(--titel); font-weight: 700; font-size: 1.15em; min-width: 3.2em; padding: .35em .8em; border-radius: 2em; border: 2px solid var(--linie); background: transparent; color: var(--text); }
.chip.an { background: var(--akzent); border-color: var(--akzent); color: #1a1400; }
.chip:disabled { opacity: .6; }
.sprachwahl { align-self: center; }
.tafel { width: 100%; border-collapse: collapse; font-size: 1.15em; }
.tafel td { padding: .45em .3em; border-bottom: 1px solid var(--grund-hell); }
.tafel td:last-child { text-align: right; font-family: var(--titel); font-weight: 700; font-size: 1.2em; }
.tafel tr.selbst { color: var(--akzent); }
.medaille { font-size: 4em; text-align: center; }

/* Tippkarte */
.suche { position: fixed; inset: 0; display: flex; flex-direction: column; }
.leiste { display: flex; justify-content: space-between; gap: 1em; padding: max(.5em, env(safe-area-inset-top)) .9em .5em; background: rgba(40, 22, 10, .55); border-bottom: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.leiste b { font-family: var(--titel); font-size: 1.2em; color: var(--akzent); }
.karte { flex: 1; min-height: 0; }
.fuss { padding: .6em .9em max(.6em, env(safe-area-inset-bottom)); background: rgba(40, 22, 10, .55); border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: .3em; }
.fuss .knopf { width: 100%; font-size: 1.35rem; }
.fuss .osm { text-align: right; }
.meldung { position: absolute; left: 50%; top: 4.2em; translate: -50% 0; background: var(--rot); color: #fff; font-family: var(--titel); font-weight: 700; font-size: 1.5em; padding: .3em 1em; border-radius: 2em; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); animation: meldung 1.6s both; pointer-events: none; }
@keyframes meldung { 0% { opacity: 0; transform: scale(1.4); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.ergebnis { position: absolute; left: .7em; right: .7em; bottom: 6.2em; background: var(--papier); color: var(--tinte); border-radius: .4em; padding: .9em 1.1em; display: flex; flex-direction: column; gap: .5em; text-align: center; box-shadow: 0 8px 30px rgba(20, 8, 0, .5); animation: hoch .4s both; }
.ergebnis .gross { font-family: var(--titel); font-weight: 700; font-size: 1.9em; line-height: 1.1; }
.ergebnis .ort { font-family: var(--titel); font-weight: 700; font-size: 1.4em; color: var(--siegel); }
.ergebnis p { margin: 0; }
.ergebnis .leise { color: #6b5038; }
@keyframes hoch { from { opacity: 0; transform: translateY(1em); } }

.verbindung { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: .6em; text-align: center; background: var(--rot); color: #fff; z-index: 5; }

/* Im Online-Fenster (iframe) etwas kleiner */
body.eingebettet { font-size: 15px; }