/* ===== Kodo – Aussehen ===== */
@font-face { font-family: 'Andika'; src: url('fonts/andika-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('fonts/andika-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --papier: #f6efdf;
  --papier-dunkel: #eadfc6;
  --tinte: #2d2a26;
  --tinte-hell: #6b6359;
  --moos: #5f8a3e;
  --moos-dunkel: #3f6328;
  --teal: #2f7f7a;
  --ocker: #d8a64a;
  --holz: #7a5532;
  --rot: #c8402e;
  --nacht: #22331f;
  --bewegung: #d7e8f5;
  --bewegung-rand: #4a87b8;
  --aktion: #f7e6bf;
  --aktion-rand: #c8902c;
  --schwert: #f6d5cf;
  --schwert-rand: #c8402e;
  --schleife: #fbe0c2;
  --schleife-rand: #e07b22;
  --bedingung: #e8dcf3;
  --bedingung-rand: #8a5cb8;
  --schatten: 0 4px 14px rgba(40, 30, 10, 0.25);
  --rund: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Andika', system-ui, sans-serif;
  color: var(--tinte);
  background: var(--nacht);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Unsichtbare Bildschirme behalten ihre Größe (sonst wird das Spielfeld 0×0 und bleibt leer). */
.bildschirm { position: fixed; inset: 0; display: flex; flex-direction: column; visibility: hidden; pointer-events: none; }
.bildschirm.aktiv { visibility: visible; pointer-events: auto; }

.papier {
  background: var(--papier);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  border: 2px solid #d9c9a6;
}

/* ---- Knöpfe ---- */
.knopf {
  min-height: 48px; min-width: 48px;
  padding: 6px 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  background: var(--papier);
  font-size: 1.1rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.08s, box-shadow 0.08s;
}
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.knopf:disabled { opacity: 0.45; cursor: default; }
.knopf.klein { min-width: 44px; min-height: 44px; padding: 4px 10px; }
.knopf.gruen { background: var(--moos); color: white; }
.knopf.rot { background: var(--rot); color: white; }
.knopf.los { background: var(--rot); color: white; font-size: 1.5rem; flex: 1.4; letter-spacing: 0.04em; }
.knopf.los.laeuft { background: var(--holz); }
.knopf.leuchtet { animation: leuchten 1.2s ease-in-out infinite; }
@keyframes leuchten { 50% { box-shadow: 0 0 0 6px rgba(216, 166, 74, 0.7); } }

/* ---- Startbildschirm ---- */
#start {
  background: url('grafik/szenen/titelbild.webp') center / cover no-repeat, var(--nacht);
  align-items: center; justify-content: flex-start;
}
.start-inhalt { width: min(520px, 92vw); margin-top: 3vh; display: flex; flex-direction: column; align-items: center; gap: 2vh; }
@media (orientation: landscape) {
  #start { align-items: flex-end; padding-right: 4vw; }
}
.titel {
  margin: 0; text-align: center; color: #fff;
  font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1; letter-spacing: 0.06em;
  text-shadow: 0 3px 0 var(--rot), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.titel span { display: block; font-size: 0.32em; letter-spacing: 0.12em; margin-top: 0.3em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.start-karte { width: 100%; padding: 18px 20px; background: rgba(246, 239, 223, 0.94); }
.start-karte h2 { margin: 0 0 10px; font-size: 1.3rem; }
.spielstaende { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow: auto; }
.spielstand {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; border: 2px solid #d9c9a6; background: #fffaf0;
  font-size: 1.25rem; font-weight: 700; cursor: pointer; text-align: left;
}
.spielstand small { margin-left: auto; font-weight: 400; color: var(--tinte-hell); font-size: 1rem; }
.neuer-spielstand { display: flex; gap: 8px; margin-top: 12px; }
.neuer-spielstand input {
  flex: 1; min-width: 0; min-height: 48px; font: inherit; font-size: 1.2rem;
  padding: 6px 12px; border-radius: 12px; border: 2px solid #cdb98f; background: #fff; user-select: text;
}
.python-status { margin: 10px 0 0; font-size: 0.95rem; color: var(--tinte-hell); }
.python-status.fertig { color: var(--moos-dunkel); }
.python-status.fehler { color: var(--rot); }

/* ---- Leiste oben ---- */
.leiste {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: rgba(34, 51, 31, 0.92); color: #fff;
  flex-shrink: 0;
}
.leiste .knopf { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }
.leiste-titel { font-weight: 700; font-size: 1.2rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang { font-weight: 400; opacity: 0.8; font-size: 0.95rem; }
.sterne-gesamt { font-weight: 700; font-size: 1.1rem; }

/* ---- Karte ---- */
#karte { background: #1b2a18; }
.karte-rahmen { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; }
.karte-bild {
  position: relative;
  aspect-ratio: 1600 / 893;
  width: min(100%, calc((100vh - 80px) * 1600 / 893));
  background: url('grafik/szenen/karte.webp') center / contain no-repeat;
  border-radius: 10px; box-shadow: var(--schatten);
}
.stein {
  position: absolute; transform: translate(-50%, -62%);
  width: clamp(36px, 4.2vw, 50px); height: clamp(36px, 4.2vw, 50px);
  border-radius: 50%; border: 3px solid #fff;
  background: var(--papier); color: var(--tinte);
  font-weight: 700; font-size: clamp(1rem, 2vw, 1.4rem);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.stein.geschafft { background: var(--moos); color: #fff; }
.stein.offen { background: var(--rot); color: #fff; animation: huepfen 1.4s ease-in-out infinite; }
.stein.zu { background: #9a958c; color: #e9e4da; cursor: default; border-color: #ccc; }
.stein .mini-sterne { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 0.7rem; white-space: nowrap; text-shadow: 0 1px 2px #000; color: #ffd75a; letter-spacing: -1px; }
@keyframes huepfen { 50% { transform: translate(-50%, -75%); } }

/* ---- Level ---- */
.level-layout { flex: 1; display: grid; grid-template-columns: 56% 44%; min-height: 0; height: 100%; }
.spielbereich { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #273a22; position: relative; }
.spielfeld { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.spielfeld canvas { display: block; position: relative; z-index: 1; }
/* Bild-Modus: passt das Bild nicht genau, füllt es den Rand unscharf aus */
.spielfeld.bild-modus::before {
  content: ''; position: absolute; inset: -30px; z-index: 0;
  background: var(--bild-rand) center / cover no-repeat; filter: blur(18px) brightness(0.75) saturate(0.9);
}
.herzen { display: flex; gap: 10px; align-items: center; font-size: 1rem; }
.herzen .held-herzen { display: flex; align-items: center; gap: 2px; }
.herzen img { width: 22px; height: 22px; }
.herzen img.leer { filter: grayscale(1) brightness(1.6); opacity: 0.5; }
.ziele {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 12px;
  background: rgba(246, 239, 223, 0.95); font-size: 1rem; flex-shrink: 0;
}
.ziele .ziel::before { content: '○ '; }
.ziele .ziel.erfuellt::before { content: '✔ '; color: var(--moos-dunkel); }
.ziele .ziel.bonus { color: var(--tinte-hell); }
.ausgabe {
  position: absolute; left: 10px; bottom: 10px; max-width: 70%; max-height: 30%; overflow: auto;
  background: rgba(20, 20, 20, 0.75); color: #e9f5d0; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;
  padding: 6px 10px; border-radius: 8px; pointer-events: none;
}

.codebereich { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--papier); border-left: 3px solid #cdb98f; }
.bausteine {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; flex-shrink: 0;
  background: var(--papier-dunkel); border-bottom: 2px solid #d9c9a6; max-height: 34%; overflow: auto;
}
.bausteine .gruppe { display: contents; }
.bausteine .gruppen-name { width: 100%; font-weight: 700; font-size: 0.9rem; color: var(--tinte-hell); margin: 2px 0 -2px; }
.baustein-vorlage {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  min-height: 48px; padding: 4px 10px 5px 10px; border-radius: 10px;
  border: 2px solid var(--rand, #999); border-left-width: 8px;
  background: var(--fuellung, #eee); cursor: grab; touch-action: none;
  font-size: 0.85rem; line-height: 1.15; text-align: left;
}
.baustein-vorlage code { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; font-weight: 700; color: var(--tinte); }
.baustein-vorlage span { color: var(--tinte-hell); }
.baustein-vorlage.neu { box-shadow: 0 0 0 3px var(--ocker); }
.art-bewegung { --fuellung: var(--bewegung); --rand: var(--bewegung-rand); }
.art-aktion { --fuellung: var(--aktion); --rand: var(--aktion-rand); }
.art-schwert { --fuellung: var(--schwert); --rand: var(--schwert-rand); }
.art-schleife { --fuellung: var(--schleife); --rand: var(--schleife-rand); }
.art-bedingung { --fuellung: var(--bedingung); --rand: var(--bedingung-rand); }

.editor-rahmen { flex: 1; min-height: 0; position: relative; }
.editor { position: absolute; inset: 0; overflow: hidden; }
.editor .cm-editor { height: 100%; background: #fffdf7; }
.editor .cm-editor.cm-focused { outline: none; }
.editor .cm-scroller { font-family: 'JetBrains Mono', monospace; font-size: 19px; line-height: 1.75; }
.editor .cm-content { padding: 8px 0 80px; user-select: text; -webkit-user-select: text; }
.editor .cm-gutters { background: var(--papier-dunkel); border-right: 1px solid #d9c9a6; color: var(--tinte-hell); }
.editor .cm-line { padding-left: 6px; margin: 2px 6px 2px 2px; border-radius: 7px; }
.editor .cm-line.bs { border-left: 7px solid var(--rand); background: var(--fuellung); }
.editor .cm-line.bs-bewegung { --fuellung: var(--bewegung); --rand: var(--bewegung-rand); }
.editor .cm-line.bs-aktion { --fuellung: var(--aktion); --rand: var(--aktion-rand); }
.editor .cm-line.bs-schwert { --fuellung: var(--schwert); --rand: var(--schwert-rand); }
.editor .cm-line.bs-schleife { --fuellung: var(--schleife); --rand: var(--schleife-rand); }
.editor .cm-line.bs-bedingung { --fuellung: var(--bedingung); --rand: var(--bedingung-rand); }
.editor .cm-line.bs-sonst { --fuellung: #efefef; --rand: #aaa; }
.editor .cm-line.laeuft { box-shadow: 0 0 0 3px var(--ocker); background: #fff3c4; }
.editor .cm-line.fehlerzeile { box-shadow: 0 0 0 3px var(--rot); }
.editor .cm-activeLine { }
.griff { cursor: grab; touch-action: none; color: #a8987a; font-size: 18px; padding: 0 6px; display: inline-block; }
.cm-gutterElement .griff { line-height: inherit; }
.editor .untertitel { color: #9a8f7f; font-style: italic; font-family: 'Andika', sans-serif; font-size: 0.85em; margin-left: 1.2em; pointer-events: none; }
.fehler-box {
  margin: 2px 8px 6px 2px; padding: 6px 10px; border-radius: 8px;
  background: #fde3de; border: 2px solid var(--rot); color: #7a1d10;
  font-family: 'Andika', sans-serif; font-size: 1rem; line-height: 1.35; white-space: normal;
}
.leer-hinweis { color: #b0a48e; font-family: 'Andika', sans-serif; }

.einfuege-linie {
  position: absolute; height: 4px; border-radius: 2px; background: var(--rot);
  pointer-events: none; z-index: 20; box-shadow: 0 0 6px rgba(200, 64, 46, 0.6);
}
.zieh-geist {
  position: fixed; z-index: 1000; pointer-events: none; opacity: 0.9;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1rem;
  padding: 8px 12px; border-radius: 10px; border: 2px solid var(--rand, #999); border-left-width: 8px;
  background: var(--fuellung, #eee); box-shadow: var(--schatten); transform: translate(-20px, -60%);
}
.papierkorb {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  width: 58px; height: 58px; border-radius: 50%;
  background: #eee6d4; border: 2px dashed #b9a57c;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  opacity: 0; transition: opacity 0.15s, transform 0.15s; pointer-events: none;
}
.papierkorb.sichtbar { opacity: 1; }
.papierkorb.drueber { transform: scale(1.25); background: #f6c9c1; border-color: var(--rot); }

.zeichen { display: flex; gap: 4px; padding: 6px 8px; background: var(--papier-dunkel); border-top: 2px solid #d9c9a6; flex-shrink: 0; overflow-x: auto; }
.zeichen button {
  min-width: 44px; min-height: 44px; flex: 1;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.15rem;
  border-radius: 10px; border: 2px solid #cdb98f; background: #fffaf0; cursor: pointer;
}
.steuerung { display: flex; gap: 8px; padding: 8px; flex-shrink: 0; background: var(--papier-dunkel); }
.steuerung .knopf { flex: 1; padding: 4px 8px; }

/* Zahlen-Regler und Richtungs-Auswahl im Code */
.regler {
  position: fixed; z-index: 900; display: flex; gap: 6px; padding: 6px;
  background: var(--papier); border-radius: 14px; box-shadow: var(--schatten); border: 2px solid #cdb98f;
  align-items: center;
}
.regler button { min-width: 52px; min-height: 52px; font-size: 1.6rem; font-weight: 700; border-radius: 12px; border: 2px solid #cdb98f; background: #fff; cursor: pointer; }
.regler .wert { min-width: 44px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; }

/* ---- Dialog ---- */
.dialog-hintergrund {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 20, 12, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dialog {
  width: min(640px, 100%); max-height: 100%; overflow: auto;
  padding: 18px 22px; font-size: 1.15rem; line-height: 1.45;
  animation: auftauchen 0.25s ease-out;
}
.dialog.breit { width: min(900px, 100%); }
@keyframes auftauchen { from { transform: scale(0.92); opacity: 0; } }
.dialog h2 { margin: 0 0 8px; font-size: 1.5rem; }
.dialog p { margin: 8px 0; }
.dialog-bild img { width: 100%; border-radius: 10px; display: block; margin-bottom: 10px; }
.dialog-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.dialog .neu-box {
  margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px;
  background: #fff8e6; border: 2px solid var(--ocker);
}
.dialog .neu-box h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--holz); }
.dialog pre {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--bewegung); border-left: 7px solid var(--bewegung-rand);
  font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; white-space: pre-wrap;
}
.meister { display: flex; gap: 12px; align-items: flex-start; }
.meister .gesicht { font-size: 2.6rem; line-height: 1; }
.ergebnis-sterne { display: flex; justify-content: center; gap: 14px; margin: 10px 0; }
.ergebnis-sterne img { width: 72px; height: 72px; filter: grayscale(1) brightness(1.4); opacity: 0.35; transition: transform 0.3s; }
.ergebnis-sterne img.an { filter: none; opacity: 1; animation: sternPlopp 0.5s ease-out backwards; }
.ergebnis-sterne img.an:nth-child(2) { animation-delay: 0.25s; }
.ergebnis-sterne img.an:nth-child(3) { animation-delay: 0.5s; }
@keyframes sternPlopp { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.2); } }
.stern-liste { list-style: none; padding: 0; margin: 6px 0; font-size: 1.05rem; }
.stern-liste li::before { content: '☆ '; color: #b5a789; }
.stern-liste li.an::before { content: '★ '; color: #e0a91c; }
.einstellung { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.einstellung input { font: inherit; padding: 8px 10px; border-radius: 10px; border: 2px solid #cdb98f; width: 8em; user-select: text; }
.knopf.gewaehlt { background: var(--teal); color: #fff; }

/* ---- Hochformat: Spielfeld oben, Code unten ---- */
@media (orientation: portrait) {
  .level-layout { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .codebereich { border-left: none; border-top: 3px solid #cdb98f; }
  .bausteine { max-height: 30%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .editor .cm-scroller { font-size: 16px; line-height: 1.6; }
  .baustein-vorlage { min-height: 40px; }
  .zeichen button, .steuerung .knopf { min-height: 40px; }
  .ziele { font-size: 0.9rem; padding: 3px 10px; }
}

/* Pfeilkreuz im Bild-Modus: zeigt, wohin rechts, links, hoch und runter geht */
.kompass { position: absolute; left: 10px; bottom: 10px; width: 150px; height: 150px; pointer-events: none; z-index: 2; }
.kompass svg { width: 100%; height: 100%; overflow: visible; }
.kompass circle { fill: rgba(255, 250, 238, 0.82); stroke: rgba(45, 42, 38, 0.35); stroke-width: 2; }
.kompass circle.mitte { fill: #2d2a26; stroke: none; }
.kompass line { stroke-width: 7; stroke-linecap: round; }
.kompass text {
  font-family: Andika, sans-serif; font-size: 19px; font-weight: 700; text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(255, 250, 238, 0.95); stroke-width: 5px;
}
.kompass .k-rechts line, .kompass .k-rechts polygon { stroke: #c2412d; fill: #c2412d; }
.kompass .k-links line, .kompass .k-links polygon { stroke: #2f6db0; fill: #2f6db0; }
.kompass .k-hoch line, .kompass .k-hoch polygon { stroke: #3f8a3a; fill: #3f8a3a; }
.kompass .k-runter line, .kompass .k-runter polygon { stroke: #a8722a; fill: #a8722a; }
.kompass .k-rechts text { fill: #c2412d; }
.kompass .k-links text { fill: #2f6db0; }
.kompass .k-hoch text { fill: #3f8a3a; }
.kompass .k-runter text { fill: #a8722a; }
@media (max-width: 700px) { .kompass { width: 116px; height: 116px; } }

/* Knopf „Spielfeld groß“: nur am Handy sichtbar */
.spielfeld-umschalter {
  display: none; position: absolute; right: 8px; bottom: 8px; z-index: 3;
  background: rgba(246, 239, 223, 0.9); font-size: 1.3rem;
}

/* ===== Handy ===== */
/* Handy = schmal im Hochformat oder niedrig im Querformat. Tablets bleiben wie oben. */
@media (orientation: portrait) and (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .leiste { padding: 4px 8px; gap: 8px; }
  .leiste .knopf.klein { min-width: 40px; min-height: 40px; }
  .leiste-titel { font-size: 1.05rem; }
  .herzen { gap: 6px; font-size: 0.9rem; }
  .herzen img { width: 18px; height: 18px; }

  /* Ziele in einer Zeile, seitlich wischbar */
  .ziele { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; font-size: 0.9rem; padding: 3px 10px; gap: 14px; }

  /* Bausteine in einer Reihe, seitlich wischbar */
  .bausteine { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 6px; }
  .bausteine .gruppen-name { width: auto; flex-shrink: 0; align-self: center; margin: 0 2px 0 6px; white-space: nowrap; }
  .baustein-vorlage { flex-shrink: 0; min-height: 44px; white-space: nowrap; }

  .editor .cm-scroller { font-size: 16px; line-height: 1.6; }
  .editor .cm-content { padding-bottom: 40px; }

  /* Sonderzeichen nur beim Tippen (Tastatur offen) */
  .zeichen { display: none; }
  .codebereich:focus-within .zeichen { display: flex; }
  .zeichen button { min-height: 40px; min-width: 38px; }

  .steuerung { gap: 6px; padding: 6px; }
  .steuerung .knopf { min-height: 44px; min-width: 0; padding: 2px 4px; }
  .steuerung .knopf-text { display: none; }
  .knopf.los { font-size: 1.3rem; }

  .spielfeld-umschalter { display: block; }
  .kompass { width: 96px; height: 96px; left: 6px; bottom: 6px; }
  .ausgabe { font-size: 0.8rem; max-width: 60%; }

  .dialog { padding: 14px 16px; font-size: 1.05rem; line-height: 1.4; }
  .dialog h2 { font-size: 1.3rem; }
  .dialog-bild img { max-height: 38vh; object-fit: cover; }
  .meister .gesicht { font-size: 2rem; }
  .ergebnis-sterne img { width: 56px; height: 56px; }
  .dialog-hintergrund { padding: 8px; }
}

/* Handy hochkant: Spielfeld oben, Code unten. „Groß“ gibt dem Spielfeld mehr Platz. */
@media (orientation: portrait) and (max-width: 600px) {
  .level-layout { grid-template-rows: 44% 56%; }
  .level-layout.spielfeld-gross { grid-template-rows: 72% 28%; }
  /* Karte: höher und seitlich wischbar, damit die Steine nicht übereinander liegen */
  .karte-rahmen { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 8px 0; }
  .karte-bild { flex-shrink: 0; margin: auto 8px; width: min(820px, calc((100% - 16px) * 2.2)); }
  .stein { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* Handy quer: Spielfeld links, Code rechts */
@media (orientation: landscape) and (max-height: 500px) {
  .level-layout { grid-template-columns: 55% 45%; }
  .level-layout.spielfeld-gross { grid-template-columns: 72% 28%; }
  .level-layout.spielfeld-gross .bausteine { display: none; }
  .ziele { padding: 2px 10px; font-size: 0.85rem; }
  /* Karte: ganze Breite, nach oben und unten wischbar, damit die Steine nicht übereinander liegen */
  .karte-rahmen { align-items: flex-start; overflow-y: auto; padding: 6px 8px; }
  .karte-bild { width: 100%; flex-shrink: 0; }
  #start { padding-right: 2vw; }
  .start-inhalt { margin-top: 1vh; gap: 1vh; }
  .titel { font-size: clamp(2.2rem, 9vh, 3.5rem); }
  .start-karte { padding: 10px 14px; }
  .spielstaende { max-height: 30vh; }
}

/* Tastatur offen am Handy hochkant (wenig Höhe): nur noch der Code, das Spielfeld macht Platz */
@media (max-height: 460px) and (max-aspect-ratio: 4/3) {
  .level-layout:has(.cm-editor.cm-focused),
  .level-layout.spielfeld-gross:has(.cm-editor.cm-focused) { grid-template-columns: 1fr; grid-template-rows: 0 1fr; }
  .level-layout:has(.cm-editor.cm-focused) .codebereich { border: none; }
  .level-layout:has(.cm-editor.cm-focused) .spielbereich { overflow: hidden; }
  .level-layout:has(.cm-editor.cm-focused) .bausteine { display: none; }
}