/* Plopptown · Mein Dorf (Spiel-Prototyp). Handy zuerst, Vollbild-App. Farben wie die Webseite. */
:root {
  --orange: #ff6b3d;
  --orange-dunkel: #e8552a;
  --orange-weich: #fff0ea;
  --navy: #1f2a44;
  --mint: #2fbf85;
  --mint-dunkel: #1f9e6c;
  --mint-weich: #e3f6ee;
  --gras: #8fd06a;
  --flaeche: #ffffff;
  --bg: #f3f5f9;
  --tinte: #1f2a44;
  --leise: #5d6783;
  --linie: #e3e7f0;
  --rot: #d63c30;
  --schatten: 0 6px 18px rgba(31, 42, 68, 0.14);
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Montserrat", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--gras); color: var(--tinte); font-family: var(--text); font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.1; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.app { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; }

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; background: var(--flaeche);
  box-shadow: 0 1px 0 var(--linie); z-index: 5; }
.logo { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--orange); min-width: 0; }
.logo-icon { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--orange); display: grid; place-items: center; box-shadow: 0 3px 0 var(--orange-dunkel); }
.logo-icon svg { width: 20px; height: 20px; fill: #fff; }
.logo-text { font-family: var(--display); font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.werte { display: flex; gap: 4px; flex: none; }
.wert { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; background: var(--bg); font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.wert svg { width: 15px; height: 15px; fill: var(--tinte); }
.wert small { font-size: 10.5px; color: var(--mint-dunkel); font-weight: 800; }
.muenze { width: 17px; height: 17px; border-radius: 50%; background: #ffc83d; color: #8a5a00; border: 1.5px solid #8a5a00; display: grid; place-items: center; font-weight: 900; font-size: 9.5px; }
.wert.puls { animation: puls 0.5s; }
@keyframes puls { 40% { transform: scale(1.12); background: #fff3c4; } }

.stufe { display: flex; align-items: center; gap: 10px; padding: 3px 12px 7px; background: var(--flaeche); box-shadow: 0 1px 0 var(--linie); z-index: 4; }
.stufe-text { display: flex; flex: none; gap: 6px; font-size: 11px; font-weight: 800; }
.stufe-text b { letter-spacing: 0.04em; text-transform: uppercase; }
.stufe-text span { color: var(--leise); }
.balken { flex: 1; height: 7px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.balken i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--mint); transition: width 0.6s ease-out; }

/* Welt */
.welt { position: relative; overflow: hidden; }
.welt canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.schilder { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wschild { position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; white-space: nowrap; font-family: var(--text); }
.wschild.muenzen { display: flex; align-items: center; gap: 5px; padding: 5px 11px 5px 6px; border-radius: 999px; background: #fff7d6; border: 2.5px solid #8a5a00;
  font-weight: 900; font-size: 14px; color: #6b4600; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); cursor: pointer; animation: huepf 1.4s infinite; }
.wschild.muenzen .muenze { width: 20px; height: 20px; font-size: 11px; }
@keyframes huepf { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.wschild.baustelle { padding: 4px 10px; border-radius: 12px; background: #fff; box-shadow: var(--schatten); font-weight: 800; font-size: 12px; text-align: center; cursor: pointer; }
.wschild.baustelle i { display: block; height: 4px; margin-top: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.wschild.baustelle i::after { content: ""; display: block; height: 100%; width: var(--k, 0%); background: var(--mint); }
.wschild.frage { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 16px; background: #fff; box-shadow: var(--schatten); font-weight: 800; font-size: 14px; }
.wschild.frage.schlecht { color: var(--rot); padding-right: 12px; }
.wschild.frage button { width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; font-size: 18px; font-weight: 900; }
.wschild.frage .ja { background: var(--mint); color: #fff; box-shadow: 0 3px 0 var(--mint-dunkel); }
.wschild.frage .nein { background: var(--bg); color: var(--leise); }
.wschild.plus { font-family: var(--display); font-size: 20px; color: #fff; -webkit-text-stroke: 5px var(--navy); paint-order: stroke fill; pointer-events: none; animation: hoch 1.6s forwards; }
.wschild.plus.gruen { color: #7dff9a; }
@keyframes hoch { to { margin-top: -50px; opacity: 0; } }

.oben-stapel { position: absolute; z-index: 3; left: 10px; right: 10px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.oben-stapel > * { pointer-events: auto; }
.plopp-karte { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; border: 0; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.96); box-shadow: var(--schatten); touch-action: manipulation; }
.plopp-mitte { display: grid; min-width: 0; flex: 1; }
.plopp-text { font-weight: 700; font-size: 14px; }
.plopp-karte.eingeklappt { padding: 6px 10px; }
.plopp-karte.eingeklappt .plopp-kopf { width: 28px; height: 28px; border-width: 2px; font-size: 14px; }
.plopp-karte.eingeklappt .plopp-text { display: none; }
.plopp-karte .pfeil { flex: none; color: var(--leise); font-size: 14px; transition: transform 0.2s; }
.plopp-karte:not(.eingeklappt) .pfeil { transform: rotate(180deg); }
.plopp-kopf { width: 38px; height: 38px; flex: none; border-radius: 50%; background: #e8a06a; border: 3px solid #f2c14e; display: grid; place-items: center; font-family: var(--display); color: #fff; }
.plopp-ueber { font-weight: 900; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.belohnung { margin-left: auto; flex: none; padding: 4px 8px; border-radius: 10px; background: var(--mint-weich); color: var(--mint-dunkel); font-weight: 900; font-size: 12.5px; }
.plopp-karte.geschafft { animation: geschafft 0.6s; }
@keyframes geschafft { 30% { transform: scale(1.04); background: var(--mint-weich); } }

.brief-knopf { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; border: 0; border-radius: 14px;
  background: #fff; box-shadow: var(--schatten); cursor: pointer; text-align: left; max-width: calc(100% - 20px); }
.brief-knopf .umschlag { font-size: 22px; }
.brief-knopf .punkt { position: absolute; left: 24px; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--rot); color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.brief-knopf b { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; }
.brief-knopf small { display: block; color: var(--leise); font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.baumodus { position: absolute; z-index: 3; left: 10px; right: 56px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 16px; background: var(--navy); color: #fff; font-weight: 800; font-size: 13.5px; box-shadow: var(--schatten); }
.baumodus span { min-width: 0; }
.baumodus .knopf { flex: none; }

.lade { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--gras); font-weight: 800; color: #1f3a1a; transition: opacity 0.4s; }
.lade.weg { opacity: 0; pointer-events: none; }
.lade-haus { width: 56px; height: 56px; border-radius: 16px; background: var(--orange) url("bilder/icon.svg") center / cover; animation: plopp 0.9s infinite; box-shadow: 0 5px 0 var(--orange-dunkel); }
@keyframes plopp { 30% { transform: scale(1.15, 0.85); } 55% { transform: scale(0.92, 1.12) translateY(-10px); } }

/* Katalog */
.katalog { background: var(--flaeche); border-radius: 22px 22px 0 0; box-shadow: 0 -6px 18px rgba(31, 42, 68, 0.12); padding: 0 0 8px; z-index: 4; }
.griff { display: block; width: 100%; height: 18px; border: 0; background: none; cursor: pointer; padding: 0; touch-action: manipulation; }
.griff i { display: block; width: 42px; height: 5px; margin: 7px auto 0; border-radius: 3px; background: var(--linie); }
.katalog.eingeklappt .karten { display: none; }
.katalog.eingeklappt { padding-bottom: 6px; }
.reiter { display: flex; gap: 6px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.reiter button { flex: none; padding: 6px 13px; border-radius: 999px; border: 0; background: var(--bg); font-weight: 800; font-size: 13px; color: var(--leise); cursor: pointer; }
.reiter button[aria-selected="true"] { background: var(--navy); color: #fff; }
.karten { display: flex; gap: 8px; padding: 10px 10px 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.karte { flex: none; width: 118px; scroll-snap-align: start; display: grid; justify-items: center; gap: 1px; padding: 8px 6px 9px; border-radius: 16px; border: 2px solid var(--linie);
  background: #fff; cursor: pointer; text-align: center; transition: transform 0.1s, border-color 0.15s; }
.karte:active { transform: scale(0.96); }
.karte .bild { width: 100%; height: 52px; border-radius: 11px; display: grid; place-items: center; font-size: 30px; background: var(--orange-weich); margin-bottom: 4px; }
.karte b { font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1.1; }
.karte small { font-weight: 800; font-size: 11.5px; color: var(--mint-dunkel); }
.karte .preis { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 13px; }
.karte .preis .muenze { width: 15px; height: 15px; font-size: 8.5px; }
.karte.aktiv { border-color: var(--orange); background: var(--orange-weich); }
.karte.zu-teuer .preis { color: var(--rot); }
.karte.gesperrt { opacity: 0.55; }
.karte.gesperrt .bild { background: var(--bg); filter: grayscale(1); }
.karte.gesperrt small { color: var(--leise); }

/* Navigation unten */
.unten { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--flaeche); border-top: 1px solid var(--linie); padding: 4px 0 max(6px, env(safe-area-inset-bottom)); z-index: 4; }
.unten a, .unten button { display: grid; justify-items: center; gap: 1px; padding: 5px 0; border: 0; background: none; text-decoration: none; font-weight: 800; font-size: 11px; color: var(--leise); cursor: pointer; }
.unten svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.unten .aktiv { color: var(--orange); }

/* Dialoge */
.dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(20, 28, 46, 0.45); animation: einblenden 0.2s; }
@keyframes einblenden { from { opacity: 0; } }
.dialog.unten-dialog { place-items: end center; padding: 10px; background: rgba(20, 28, 46, 0.2); }
.blatt { position: relative; width: min(100%, 460px); display: grid; gap: 12px; padding: 20px 18px; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); animation: rein 0.25s ease-out; }
@keyframes rein { from { transform: translateY(24px); opacity: 0; } }
.blatt.mitte { text-align: center; }
.blatt h2 { font-size: 26px; }
.leise { color: var(--leise); font-weight: 600; font-size: 14px; }
.fein { color: var(--leise); font-weight: 600; font-size: 12px; }
.zu { position: absolute; right: 8px; top: 6px; width: 38px; height: 38px; border: 0; background: none; font-size: 26px; color: var(--leise); cursor: pointer; }
.ueber { font-weight: 900; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--orange); color: #fff;
  font-family: var(--display); font-size: 18px; cursor: pointer; box-shadow: 0 4px 0 var(--orange-dunkel); text-decoration: none; }
.knopf:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-dunkel); }
.knopf.leicht { background: var(--bg); color: var(--tinte); box-shadow: 0 4px 0 var(--linie); }
.knopf.gruen { background: var(--mint); box-shadow: 0 4px 0 var(--mint-dunkel); }
.knopf.klein { min-height: 40px; font-size: 15px; padding: 0 14px; }
.knopf[disabled] { opacity: 0.5; cursor: default; }
.knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knoepfe .knopf:only-child { grid-column: 1 / -1; }
.sprechblase { width: min(100%, 460px); margin-bottom: 10px; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--schatten); font-weight: 700; font-size: 15px; }
.sprechblase b { display: block; color: var(--orange); font-family: var(--display); font-weight: 400; font-size: 16px; }
#gruenden { place-items: end center; align-content: end; background: rgba(20, 28, 46, 0.1); }
#gruenden input { height: 54px; padding: 0 16px; border-radius: 16px; border: 2.5px solid var(--orange); background: #fffaf7; font-family: var(--display); font-size: 22px; outline: 0; }
.stile { display: flex; flex-wrap: wrap; gap: 6px; }
.stile button { padding: 8px 13px; border-radius: 999px; border: 0; background: var(--bg); font-weight: 800; font-size: 13.5px; cursor: pointer; }
.stile button[aria-checked="true"] { background: var(--navy); color: #fff; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; text-align: left; }
.liste li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--linie); font-weight: 700; font-size: 14.5px; }
.liste li:last-child { border-bottom: 0; }
.liste li b { color: var(--mint-dunkel); white-space: nowrap; }
.brief { text-align: left; }
.brief p { font-weight: 600; font-size: 15px; }
.brief .optionen { display: grid; gap: 8px; }
.brief .optionen button { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--linie); background: #fff; text-align: left; cursor: pointer; }
.brief .optionen button:hover { border-color: var(--orange); }
.brief .optionen b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.brief .optionen small { color: var(--leise); font-weight: 700; }
.fortschritt { height: 10px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--mint); }
.aufstieg .konfetti { font-size: 46px; animation: plopp 0.9s 2; }
.video-flaeche { aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(135deg, var(--navy), #3a4d7a); display: grid; place-items: center; color: #fff; font-family: var(--display); font-size: 46px; }

.werkstatt { position: fixed; z-index: 15; right: 10px; bottom: calc(max(6px, env(safe-area-inset-bottom)) + 262px); }
.werkstatt summary { list-style: none; width: 34px; height: 34px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); display: grid; place-items: center; cursor: pointer; box-shadow: var(--schatten); }
.werkstatt summary::-webkit-details-marker { display: none; }
.werkstatt[open] > div { position: absolute; right: 0; bottom: 40px; display: grid; gap: 6px; width: 190px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: var(--schatten); font-size: 13px; }
.werkstatt button { padding: 8px 10px; border-radius: 10px; border: 0; background: var(--bg); font-weight: 700; text-align: left; cursor: pointer; }

.meldung { position: fixed; z-index: 30; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 60px); transform: translate(-50%, -160%); padding: 11px 18px; border-radius: 14px; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 14.5px; box-shadow: var(--schatten); transition: transform 0.3s; max-width: calc(100% - 32px); text-align: center; visibility: hidden; }
.meldung.an { transform: translate(-50%, 0); visibility: visible; }

@media (min-width: 900px) {
  .app { left: 50%; width: 520px; transform: translateX(-50%); box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); }
  body { background: #6faa52; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.recht-links { text-align: center; margin: 10px 0 0; font-size: 13px; } .recht-links a { color: inherit; }

button, a, summary { touch-action: manipulation; }

/* Werkstatt/Einstellungen: unten rechts in der Welt */
.werkstatt { position: absolute; z-index: 4; right: 10px; bottom: 10px; }
.werkstatt summary { width: 40px; height: 40px; font-size: 18px; }
.werkstatt[open] > div { bottom: 46px; width: 220px; }
.werkstatt b { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); margin-top: 4px; }

/* Anleitung: Sprechblase von Plopp unten in der Welt + Zeiger auf das, was man antippen soll */
.tipp { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 10px;
  border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(31, 42, 68, 0.28); border: 2.5px solid var(--orange); animation: rein 0.25s ease-out; }
.tipp.oben { bottom: auto; top: 54px; }
.tipp .plopp-kopf { width: 40px; height: 40px; }
.tipp-mitte { display: grid; gap: 4px; min-width: 0; flex: 1; }
.tipp b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--orange); }
.tipp p { font-weight: 700; font-size: 14.5px; }
.tipp-knoepfe { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.tipp-ueberspringen { border: 0; background: none; padding: 6px 2px; color: var(--leise); font-weight: 700; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.zeiger { position: fixed; z-index: 25; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.zeiger i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--orange); animation: ring 1.2s ease-out infinite; }
.zeiger span { position: absolute; left: -4px; top: 6px; font-size: 34px; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.3)); animation: tippen 1.2s ease-in-out infinite; }
.zeiger.wischen span { animation: wischen 2s ease-in-out infinite; }
.zeiger.wischen i { display: none; }
@keyframes ring { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes tippen { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-4px, -8px); } }
@keyframes wischen { 0%, 100% { transform: translate(-50px, 0); } 50% { transform: translate(50px, 10px); } }
.hervor { position: relative; z-index: 6; box-shadow: 0 0 0 4px var(--orange), var(--schatten) !important; border-radius: 16px; }
.tipp.hoch { bottom: 66px; }

/* ---------- Gemeinde (Ortsteile, Ortsmitte, Gemeinderat) ---------- */
.unten button { position: relative; }
.nav-punkt { position: absolute; top: 3px; left: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--rot); border: 2px solid #fff; }
.gemeinde-blatt { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: 40vh; max-height: 40dvh; }
.gemeinde-blatt.eingeklappt .g-inhalt { display: none; }
.g-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 6px; }
.g-titel { display: grid; min-width: 0; }
.g-titel h2 { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-titel small { color: var(--leise); font-weight: 700; font-size: 12px; }
.g-kopf .knopf { flex: none; }
.g-inhalt { overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 6px; display: grid; gap: 12px; align-content: start; }
.g-inhalt h3 { font-size: 16px; margin: 2px 0 -4px; }
.g-karte { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--bg); }
.g-projekt { display: flex; gap: 10px; align-items: center; }
.g-projekt .bild { width: 46px; height: 46px; flex: none; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 26px; }
.g-projekt > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.g-projekt b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.15; }
.g-projekt small, .g-karte > small { color: var(--leise); font-weight: 700; font-size: 12.5px; }
.g-projekt .wirkung { color: var(--mint-dunkel); }
.g-karte .fortschritt { height: 9px; background: #fff; }
.g-einzahlen { display: flex; gap: 6px; flex-wrap: wrap; }
.g-einzahlen button { flex: 1; min-width: 86px; min-height: 40px; border-radius: 12px; border: 0; background: var(--mint); color: #fff; font-weight: 800; font-size: 13.5px;
  box-shadow: 0 3px 0 var(--mint-dunkel); cursor: pointer; }
.g-einzahlen button[disabled] { background: var(--linie); color: var(--leise); box-shadow: none; cursor: default; }
.g-wahl { display: grid; gap: 6px; }
.g-wahl > b { font-family: var(--display); font-weight: 400; font-size: 16px; }
.g-wahl button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 2px solid var(--linie); background: #fff; text-align: left; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.g-wahl button span { flex: 1; min-width: 0; }
.g-wahl button small { display: block; color: var(--leise); font-size: 11.5px; }
.g-wahl button i { font-style: normal; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--bg); display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.g-wahl button[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-weich); }
.g-wahl button[aria-pressed="true"] i { background: var(--orange); color: #fff; }
.g-klein { border: 0; background: none; padding: 4px 0; color: var(--orange-dunkel); font-weight: 800; font-size: 13px; text-align: left; cursor: pointer; text-decoration: underline; }
.g-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.g-liste li { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--linie); font-size: 13.5px; font-weight: 700; }
.g-liste li:last-child { border-bottom: 0; }
.g-liste li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-liste li small { color: var(--leise); font-weight: 700; white-space: nowrap; }
.g-liste .du { padding: 1px 7px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; }
.g-hinweis { color: var(--leise); font-weight: 600; font-size: 13px; }
.wschild.ortsteil { display: grid; justify-items: center; padding: 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--schatten); cursor: pointer; line-height: 1.15; }
.wschild.ortsteil b { font-family: var(--display); font-weight: 400; font-size: 15px; }
.wschild.ortsteil small { color: var(--leise); font-weight: 800; font-size: 11px; }
.wschild.ortsteil i { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 900; }
.wschild.ortsteil.eigen { border: 2.5px solid var(--orange); }
.wschild.stempel { padding: 5px 10px; border-radius: 999px; background: var(--mint); color: #fff; font-weight: 900; font-size: 12.5px; box-shadow: 0 3px 0 var(--mint-dunkel); cursor: pointer; animation: huepf 1.6s infinite; }
.wschild.stempel.fertig { background: #fff; color: var(--mint-dunkel); box-shadow: var(--schatten); animation: none; cursor: default; }
.wschild.frei { padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); border: 2px dashed var(--mint-dunkel); color: var(--mint-dunkel); font-weight: 900; font-size: 13px; cursor: pointer; }
.wschild.projekt { padding: 4px 10px; border-radius: 12px; background: #fff; box-shadow: var(--schatten); font-weight: 800; font-size: 12px; cursor: pointer; }
.wschild.rathaus-g { padding: 5px 12px; border-radius: 12px; background: var(--navy); color: #fff; font-family: var(--display); font-size: 15px; cursor: pointer; box-shadow: var(--schatten); }
.cloud-status { font-size: 12px; font-weight: 700; color: var(--leise); padding: 0 2px; }
.cloud-status.ok { color: var(--mint-dunkel); }
.cloud-status.fehler { color: var(--rot); }
.link-feld { width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--linie); background: var(--bg); font-size: 13px; font-weight: 600; }

/* Tagesaufträge auf Plopps Karte, Gutschein-Knopf, Story-Bild (seit 11.11.2026) */
.plopp-text .tages { display: block; margin-top: 3px; }
.plopp-text .tages.fertig { color: #2a9d5c; text-decoration: line-through; text-decoration-thickness: 2px; }
.plopp-text .tages i { font-style: normal; color: var(--leise); font-size: 12.5px; margin-left: 4px; }
.plopp-text .tages.tipp-zeile { margin-top: 6px; font-size: 12.5px; color: var(--leise); font-weight: 600; }
.knopf.gelb { background: #ffd23d; color: #1f2430; }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.story-blatt img { display: block; width: min(56vw, 240px); aspect-ratio: 9 / 16; margin: 6px auto 12px; border-radius: 14px; box-shadow: var(--schatten); background: #8fd06a; object-fit: cover; }
.story-blatt .knoepfe { justify-content: center; }

/* =====================================================================================================================
   Website-Look (seit 11.11.2026): Nachtblau wie die Startseite, cremefarbene Flächen mit dicker Navy-Kante,
   Pillen-Knöpfe, Retro-Sprechblase für Plopp, dunkler Katalog und dunkle Navigation. Darunter: Desktop-Layout.
   ===================================================================================================================== */
:root { --nacht: #141c30; --navy-hell: #2c3a5c; --creme: #fffaf1; --creme-gelb: #fff1c9; --orange-hell: #ff8a5c; --mint-leucht: #5fe0a8; --gold: #ffd45a;
  --kante: 3px solid var(--navy); --stufe-schatten: 0 5px 0 rgba(20, 28, 48, 0.9); }
body { background: var(--nacht); }

/* Kopf und Stadtstufe: dunkel wie die Website */
.kopf { background: rgba(20, 28, 48, 0.96); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.logo { color: #fff; }
.logo-text { color: #fff; }
.wert { background: rgba(255, 255, 255, 0.09); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.16); }
.wert svg { fill: #fff; }
.wert small { color: var(--mint-leucht); }
.wert.puls { animation: puls-dunkel 0.5s; }
@keyframes puls-dunkel { 40% { transform: scale(1.12); background: rgba(255, 212, 90, 0.3); } }
.stufe { background: var(--navy); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); color: #fff; }
.stufe-text b { color: var(--creme-gelb); }
.stufe-text span { color: #a3acc4; }
.balken { background: rgba(255, 255, 255, 0.14); }
.balken i { background: linear-gradient(90deg, var(--mint), var(--mint-leucht)); box-shadow: 0 0 10px rgba(95, 224, 168, 0.6); }

/* Karten in der Welt: Creme mit Navy-Kante */
.plopp-karte, .brief-knopf { background: var(--creme); border: var(--kante); box-shadow: var(--stufe-schatten); }
.plopp-karte.eingeklappt { padding: 5px 10px; }
.plopp-ueber { color: var(--orange-dunkel); }
.belohnung { background: var(--creme-gelb); color: var(--navy); border: 2px solid var(--navy); }
.brief-knopf .punkt { border: 2px solid var(--creme); }
.wschild.baustelle, .wschild.frage, .wschild.projekt, .wschild.ortsteil { background: var(--creme); border: 2.5px solid var(--navy); box-shadow: 0 3px 0 var(--navy); }
.wschild.muenzen { border-color: var(--navy); box-shadow: 0 4px 0 var(--navy); }

/* Plopps Anleitung als Retro-Sprechblase (wie auf der Startseite) */
.tipp { background: #fff; border: var(--kante); border-radius: 0; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #cfd6e8, 6px 6px 0 var(--navy); }
.tipp b { color: var(--orange-dunkel); font-size: 18px; }
.tipp p { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.25; letter-spacing: 0.01em; }
.tipp .knopf { border-radius: 0; border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--navy); font-family: var(--text); font-weight: 800; font-size: 14px; min-height: 36px; }
.tipp .knopf::before { content: ""; border: 5px solid transparent; border-right: 0; border-left: 7px solid #fff; margin-right: 2px; }

/* Knöpfe als Pillen (wie .pille auf der Website) */
.knopf { border-radius: 999px; font-family: var(--text); font-weight: 800; font-size: 15.5px; transition: transform 0.12s; }
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(2px); }
.knopf.leicht { background: #fff; color: var(--navy); box-shadow: 0 4px 0 rgba(31, 42, 68, 0.25); border: 2px solid var(--navy); }
.knopf.klein { font-size: 14px; }

/* Baumodus-Leiste */
.baumodus { background: var(--navy); border: 2px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }

/* Katalog: dunkel, Reiter mit Punkten, Karten in Creme */
.katalog { background: var(--navy); color: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.griff i { background: rgba(255, 255, 255, 0.28); }
.reiter button { position: relative; background: transparent; color: rgba(255, 255, 255, 0.62); font-family: var(--display); font-weight: 400; font-size: 16px; padding: 6px 16px; }
.reiter button:hover { color: #fff; }
.reiter button[aria-selected="true"] { background: transparent; color: #fff; }
.reiter button[aria-selected="true"]::before, .reiter button[aria-selected="true"]::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--orange); }
.reiter button[aria-selected="true"]::before { left: 3px; }
.reiter button[aria-selected="true"]::after { right: 3px; }
.karte { background: var(--creme); border: 2.5px solid transparent; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); color: var(--navy); }
.karte .bild { background: var(--creme-gelb); }
.karte.aktiv { border-color: var(--orange); background: #fff; box-shadow: 0 4px 0 var(--orange-dunkel); }
.karte.gesperrt { opacity: 0.6; }
.karte.gesperrt .bild { background: #e9e4d8; }
.karte:not(.gesperrt):hover { transform: translateY(-3px); }
.tasten-hilfe { display: none; }

/* Navigation unten: dunkel */
.unten { background: rgba(20, 28, 48, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.unten a, .unten button { color: #9aa5bf; }
.unten .aktiv { color: var(--orange-hell); }
.nav-punkt { border-color: var(--nacht); }

/* Dialoge: Creme mit Navy-Kante */
.dialog { background: rgba(14, 20, 36, 0.62); }
.dialog.unten-dialog { background: rgba(14, 20, 36, 0.3); }
.blatt { background: var(--creme); border: var(--kante); border-radius: 26px; box-shadow: 0 8px 0 var(--navy), 0 24px 50px rgba(0, 0, 0, 0.35); }
.blatt h2 { color: var(--navy); }
.ueber { color: var(--orange-dunkel); }
.brief .optionen button, .liste li { border-color: #e6dfd0; }
.brief .optionen button { background: #fff; border-width: 2.5px; }
.brief .optionen button:hover { border-color: var(--orange); transform: translateY(-2px); }
.sprechblase { border: var(--kante); border-radius: 0; box-shadow: 6px 6px 0 var(--navy); font-family: var(--display); font-weight: 400; font-size: 17px; }
.meldung { border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.werkstatt summary { background: var(--navy); color: #fff; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.werkstatt[open] > div { background: var(--creme); border: var(--kante); box-shadow: var(--stufe-schatten); }
.werkstatt button { background: #fff; border: 2px solid #e6dfd0; }
.werkstatt button:hover { border-color: var(--orange); }
.lade { background: radial-gradient(ellipse at 50% 70%, #33406a, var(--nacht)); color: #fff; }
.gemeinde-blatt .g-karte { background: rgba(255, 255, 255, 0.07); color: #fff; }
.gemeinde-blatt .g-titel h2 { color: #fff; }
.gemeinde-blatt .g-titel small, .gemeinde-blatt .g-projekt small, .gemeinde-blatt .g-karte > small, .gemeinde-blatt .g-hinweis, .gemeinde-blatt .g-liste li small { color: #a3acc4; }
.gemeinde-blatt .g-projekt .bild { background: var(--creme-gelb); }
.gemeinde-blatt .g-liste li { border-color: rgba(255, 255, 255, 0.1); }
.gemeinde-blatt .g-wahl button { background: var(--creme); color: var(--navy); }
.gemeinde-blatt .g-klein { color: var(--orange-hell); }

/* ---------- Desktop: Welt groß, Seitenleiste rechts (Katalog/Gemeinde), Navigation oben ---------- */
@media (min-width: 900px) {
  body { background: var(--nacht); }
  .app { left: 0; width: auto; transform: none; box-shadow: none;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 28vw, 420px); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "stufe seite" "welt seite"; }
  .kopf { grid-area: kopf; padding: 10px 18px; }
  .logo-icon { width: 38px; height: 38px; }
  .logo-text { font-size: 26px; }
  .werte { gap: 8px; }
  .wert { padding: 7px 12px; font-size: 15px; }
  .stufe { grid-area: stufe; padding: 6px 18px 8px; }
  .stufe-text { font-size: 12.5px; }
  .welt { grid-area: welt; }
  .katalog, .gemeinde-blatt { grid-area: seite; border-radius: 0; max-height: none; box-shadow: -8px 0 28px rgba(0, 0, 0, 0.3); border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; flex-direction: column; min-height: 0; padding: 14px 0 0; }
  .katalog .griff, .gemeinde-blatt .griff { display: none; }
  .katalog.eingeklappt .karten { display: grid; }
  .gemeinde-blatt.eingeklappt .g-inhalt { display: grid; }
  .reiter { flex-wrap: wrap; overflow: visible; padding: 0 12px 6px; gap: 0; }
  .reiter button { padding: 6px 13px; font-size: 15.5px; }
  .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; padding: 10px 16px 16px; overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: none; flex: 1; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
  .karte { width: auto; min-width: 0; padding: 10px 8px 11px; }
  .karte b, .karte small { overflow-wrap: anywhere; hyphens: auto; }
  .karte .bild { height: 60px; font-size: 34px; }
  .karte b { font-size: 16px; }
  .tasten-hilfe { display: block; margin: 0; padding: 10px 16px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #a3acc4; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
  .tasten-hilfe b { color: var(--creme-gelb); font-weight: 800; margin-right: 4px; }
  .g-kopf { padding: 0 16px 8px; }
  .g-inhalt { flex: 1; padding: 4px 16px 16px; }
  /* Navigation als Reiter oben rechts (wie auf der Website) */
  /* Navigation mittig in der Kopfzeile (liegt in derselben Grid-Zelle wie der Kopf) */
  .unten { grid-area: kopf; justify-self: center; align-self: center; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; }
  .unten a, .unten button { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 9px; font-family: var(--display); font-weight: 400; font-size: 15.5px; white-space: nowrap; color: rgba(255, 255, 255, 0.62); }
  .unten .aktiv::before, .unten .aktiv::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: var(--orange); }
  .unten .aktiv::before { left: 0; } .unten .aktiv::after { right: 0; }
  .unten a:hover, .unten button:hover { color: #fff; }
  .unten svg { display: none; }
  .unten .aktiv { color: #fff; }
  .nav-punkt { top: 2px; left: auto; right: 0; }
  /* Welt-Elemente: nicht über die ganze Breite */
  .oben-stapel { right: auto; width: min(440px, calc(100% - 20px)); left: 14px; top: 14px; }
  .tipp { left: 14px; right: auto; width: min(520px, calc(100% - 28px)); bottom: 14px; }
  .tipp.oben { top: 14px; }
  .tipp.hoch { bottom: 14px; }
  .baumodus { left: 50%; right: auto; transform: translateX(-50%); width: min(620px, calc(100% - 140px)); bottom: 14px; }
  .werkstatt { right: 14px; bottom: 14px; }
  .meldung { top: 84px; }
  .dialog.unten-dialog { place-items: center; }
  .maus .welt canvas { cursor: grab; }
  .maus .welt canvas:active { cursor: grabbing; }
}
@media (min-width: 900px) and (max-height: 640px) { .tasten-hilfe { display: none; } }

/* Mittelgroße Fenster: Navigation nur als Symbole, damit Kopf und Werte Platz haben */
@media (min-width: 900px) and (max-width: 1179px) {
  .unten a, .unten button { font-size: 0; gap: 0; padding: 8px 10px; }
  .unten svg { display: block; width: 22px; height: 22px; }
  .unten .aktiv::before, .unten .aktiv::after { display: none; }
  .unten .aktiv { color: var(--orange-hell); }
}

/* Brief: echtes Briefpapier mit Absender, Briefmarke, Poststempel und Unterschrift (seit 11.11.2026) */
.brief-papier { position: relative; width: min(100%, 500px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px 24px 18px; color: #2b2f3a;
  background: repeating-linear-gradient(transparent 0 31px, rgba(58, 123, 213, 0.13) 31px 32px), linear-gradient(#fffdf6, #fbf4e3);
  border-radius: 6px; box-shadow: 0 1px 0 #e9dfc6, 0 30px 70px rgba(0, 0, 0, 0.45); transform: rotate(-0.6deg); animation: brief-rein 0.45s cubic-bezier(.2,.9,.3,1.2); }
.brief-papier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, #e8613c 0 18px, #fffdf6 18px 26px, #3a7bd5 26px 44px, #fffdf6 44px 52px); }
@keyframes brief-rein { from { transform: translateY(40px) rotate(-4deg) scale(0.92); opacity: 0; } }
.brief-kopf { position: relative; display: flex; justify-content: space-between; align-items: flex-start; min-height: 78px; }
.brief-absender small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8a90a0; }
.brief-absender b { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--navy); }
.briefmarke { width: 64px; height: 76px; padding: 5px; background: #fff; transform: rotate(4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  -webkit-mask: radial-gradient(circle 3.5px at 3.5px 3.5px, transparent 98%, #000) -3.5px -3.5px / 8px 8px; mask: radial-gradient(circle 3.5px at 3.5px 3.5px, transparent 98%, #000) -3.5px -3.5px / 8px 8px; }
.briefmarke span { display: grid; place-items: center; height: 48px; background: linear-gradient(135deg, var(--orange), #ff9f43); color: #fff; font-family: var(--display); font-size: 30px; }
.briefmarke i { display: block; text-align: center; font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; color: var(--navy); margin-top: 3px; text-transform: uppercase; }
.poststempel { position: absolute; right: 74px; top: 18px; width: 66px; height: 66px; border: 2.5px solid rgba(43, 47, 58, 0.45); border-radius: 50%; display: grid; place-items: center;
  transform: rotate(-14deg); color: rgba(43, 47, 58, 0.55); font-weight: 900; font-size: 12px; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(43, 47, 58, 0.35) 5px 7px) 72px 22px / 60px 22px no-repeat; }
.brief-an { margin-top: 6px; font-weight: 800; font-size: 12.5px; color: #5d6478; }
.brief-papier h2 { margin: 10px 0 6px; font-size: 25px; color: var(--navy); }
.brief-papier > p { font-weight: 600; font-size: 15px; line-height: 2.1; margin: 0; }
.brief-gruss { margin-top: 8px !important; font-style: italic; color: #4a5068; text-align: right; }
.brief-antwort { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: #8a90a0; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.brief-antwort::before, .brief-antwort::after { content: ""; flex: 1; border-top: 2px dashed #d9cfb6; }
.brief-papier .optionen { display: grid; gap: 10px; }
.brief-papier .optionen button { position: relative; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; border: 2px solid #e2d7bd; background: rgba(255, 255, 255, 0.85);
  text-align: left; cursor: pointer; overflow: hidden; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.brief-papier .optionen button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #3a7bd5, #6a5cff); opacity: 0; transition: opacity 0.25s; }
.brief-papier .optionen button > * { position: relative; }
.brief-papier .optionen button:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 10px 24px rgba(58, 91, 213, 0.35); }
.brief-papier .optionen button:hover::before { opacity: 1; }
.brief-papier .optionen button:hover b, .brief-papier .optionen button:hover small { color: #fff; }
.brief-papier .optionen b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--navy); transition: color 0.2s; }
.brief-papier .optionen small { color: #5d6478; font-weight: 700; transition: color 0.2s; }
.brief-spaeter { display: block; margin: 12px auto 0; padding: 6px 10px; border: 0; background: none; color: #8a90a0; font-weight: 800; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* =====================================================================================================================
   Modern (Runde 4, 11.11.2026): Glas-Flächen mit Farbverläufen, Karten mit Glas → Blau-Verlauf beim Hovern,
   schwebende Seitenleiste zum Einklappen, Kopf schrumpft zur Pille, eigener weißer Mauszeiger.
   ===================================================================================================================== */
:root {
  --glas-dunkel: linear-gradient(150deg, rgba(36, 48, 80, 0.78), rgba(18, 25, 44, 0.82));
  --glas-hell: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  --glas-rand: 1px solid rgba(255, 255, 255, 0.16);
  --glas-schatten: 0 18px 44px rgba(8, 12, 24, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --verlauf-blau: linear-gradient(135deg, #3a7bd5 0%, #5b5cff 55%, #8a5cff 100%);
  --verlauf-orange: linear-gradient(135deg, #ff7a45 0%, #ff5a5f 100%);
  --verlauf-mint: linear-gradient(135deg, #2fbf85 0%, #22b3c9 100%);
  --sanft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Werte-Chips und Stufe: Glas */
.wert { background: rgba(255, 255, 255, 0.08); border: var(--glas-rand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); }
.balken { height: 8px; background: rgba(255, 255, 255, 0.12); }
.balken i { background: linear-gradient(90deg, #2fbf85, #22d3c5, #5fe0a8); background-size: 200% 100%; animation: schimmer 3s linear infinite; }
@keyframes schimmer { to { background-position: -200% 0; } }

/* Plopps Karte, Brief-Knopf, Welt-Schilder: helles Glas statt harter Kante */
.plopp-karte, .brief-knopf { background: var(--glas-hell); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 12px 30px rgba(20, 28, 48, 0.22);
  backdrop-filter: blur(14px) saturate(140%); transition: transform 0.3s var(--sanft), box-shadow 0.3s; }
.plopp-karte:hover, .brief-knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(20, 28, 48, 0.3); }
.belohnung { background: var(--verlauf-mint); color: #fff; border: 0; }
.wschild.baustelle, .wschild.frage, .wschild.projekt, .wschild.ortsteil { background: var(--glas-hell); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 8px 22px rgba(20, 28, 48, 0.28); backdrop-filter: blur(10px); }
.wschild.frage.maus { pointer-events: none; padding: 8px 14px; font-size: 13.5px; }
.wschild.frage.maus b { color: #3a5bd5; }
.wschild.frage.maus .preis-mini { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--verlauf-blau); color: #fff; font-size: 12px; }

/* Knöpfe: Verläufe mit Glanz */
.knopf { background: var(--verlauf-orange); box-shadow: 0 8px 20px rgba(255, 90, 95, 0.35); border: 0; }
.knopf:hover { box-shadow: 0 12px 26px rgba(255, 90, 95, 0.45); }
.knopf.gruen { background: var(--verlauf-mint); box-shadow: 0 8px 20px rgba(34, 179, 201, 0.35); }
.knopf.leicht { background: rgba(255, 255, 255, 0.92); color: var(--navy); border: 1px solid rgba(31, 42, 68, 0.12); box-shadow: 0 6px 16px rgba(20, 28, 48, 0.14); }
.knopf.gelb { background: linear-gradient(135deg, #ffd45a, #ffb23d); color: #1f2430; box-shadow: 0 8px 20px rgba(255, 178, 61, 0.4); }
.baumodus { background: var(--glas-dunkel); border: var(--glas-rand); box-shadow: var(--glas-schatten); backdrop-filter: blur(16px); border-radius: 999px; padding: 6px 6px 6px 20px; }
.baumodus .knopf { background: #fff; color: var(--navy); box-shadow: none; }

/* Katalog: Glas, Reiter als Segment-Pille mit Verlauf */
.katalog { background: var(--glas-dunkel); backdrop-filter: blur(20px) saturate(150%); border-top: var(--glas-rand); }
.reiter { gap: 4px; }
.reiter button { border-radius: 999px; transition: color 0.25s, background 0.3s var(--sanft), box-shadow 0.3s; }
.reiter button[aria-selected="true"] { background: var(--verlauf-blau); color: #fff; box-shadow: 0 6px 16px rgba(91, 92, 255, 0.4); }
.reiter button[aria-selected="true"]::before, .reiter button[aria-selected="true"]::after { display: none; }
.reiter button:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, 0.08); }

/* Baukarten: erst Glas, beim Hovern Blau-Verlauf mit Lichtstreif */
.karte { position: relative; overflow: hidden; isolation: isolate; color: #fff; border: var(--glas-rand); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.4s var(--sanft), box-shadow 0.4s var(--sanft), border-color 0.3s; }
.karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--verlauf-blau); opacity: 0; transition: opacity 0.4s var(--sanft); }
.karte::after { content: ""; position: absolute; inset: -20% -60%; z-index: -1; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.38) 50%, transparent 60%);
  transform: translateX(-70%); transition: transform 0.8s var(--sanft); pointer-events: none; }
.karte .bild { background: rgba(255, 255, 255, 0.14); border-radius: 14px; transition: transform 0.4s var(--sanft), background 0.3s; }
.karte b { color: #fff; }
.karte small { color: #8ff0c6; }
.karte .preis { color: #fff; }
.karte:not(.gesperrt):hover { transform: translateY(-6px) scale(1.03); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 20px 40px rgba(70, 80, 230, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.karte:not(.gesperrt):hover::before { opacity: 1; }
.karte:not(.gesperrt):hover::after { transform: translateX(70%); }
.karte:not(.gesperrt):hover .bild { transform: scale(1.08) rotate(-3deg); background: rgba(255, 255, 255, 0.22); }
.karte:not(.gesperrt):hover small { color: #fff; }
.karte:active { transform: translateY(-2px) scale(0.98); }
.karte.aktiv { border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.55), 0 18px 36px rgba(255, 90, 95, 0.4); }
.karte.aktiv::before { opacity: 1; background: var(--verlauf-orange); }
.karte.zu-teuer .preis { color: #ffb4a8; }
.karte.gesperrt { opacity: 0.45; }
.karte.gesperrt .bild { background: rgba(255, 255, 255, 0.06); filter: grayscale(1); }
.karte.gesperrt small { color: rgba(255, 255, 255, 0.6); }

/* Dialoge: helles Glas mit Verlaufs-Akzent */
.blatt { background: var(--glas-hell); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 28px; backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 70px rgba(8, 12, 24, 0.45); overflow: hidden; }
.blatt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--verlauf-blau); }
.dialog { background: radial-gradient(ellipse at 50% 40%, rgba(40, 52, 96, 0.45), rgba(8, 12, 24, 0.7)); backdrop-filter: blur(3px); }
.werkstatt summary { background: var(--glas-dunkel); border: var(--glas-rand); backdrop-filter: blur(12px); border-radius: 14px; transition: transform 0.3s var(--sanft); }
.werkstatt summary:hover { transform: rotate(45deg); }
.werkstatt[open] > div { background: var(--glas-hell); border: 1px solid rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); border-radius: 18px; box-shadow: 0 20px 44px rgba(8, 12, 24, 0.35); }
.meldung { background: var(--glas-dunkel); border: var(--glas-rand); backdrop-filter: blur(14px); border-radius: 999px; }
.layout-knopf { display: none; }

/* ---------- Desktop: alles schwebt über der Welt ---------- */
@media (min-width: 900px) {
  .app { display: block; }
  .welt { position: absolute; inset: 0; }
  /* Kopf: schwebende Glasleiste, wird beim Einklappen zur Pille */
  .kopf { position: absolute; z-index: 8; top: 14px; left: 50%; transform: translateX(-50%); width: calc(100% - 28px); height: 64px; padding: 0 12px 0 10px;
    border-radius: 22px; background: var(--glas-dunkel); border: var(--glas-rand); box-shadow: var(--glas-schatten); backdrop-filter: blur(18px) saturate(150%);
    transition: width 0.6s var(--sanft), height 0.6s var(--sanft), border-radius 0.6s var(--sanft), top 0.6s var(--sanft); }
  .logo-text { max-width: 320px; transition: max-width 0.6s var(--sanft), opacity 0.4s; }
  .unten { position: absolute; z-index: 9; top: 14px; left: 50%; transform: translateX(-50%); height: 64px; grid-area: auto; transition: opacity 0.35s, transform 0.5s var(--sanft); }
  .unten a, .unten button { border-radius: 999px; transition: color 0.25s, background 0.3s; }
  .unten a:hover, .unten button:hover { background: rgba(255, 255, 255, 0.08); }
  .unten .aktiv { background: rgba(255, 255, 255, 0.1); }
  .stufe { position: absolute; z-index: 7; top: 90px; left: 14px; width: min(560px, calc(100% - clamp(340px, 27vw, 400px) - 56px)); padding: 8px 16px; border-radius: 16px;
    background: var(--glas-dunkel); border: var(--glas-rand); box-shadow: var(--glas-schatten); backdrop-filter: blur(16px);
    transition: top 0.6s var(--sanft), left 0.6s var(--sanft), width 0.6s var(--sanft), transform 0.6s var(--sanft); }
  .oben-stapel { top: 140px; left: 14px; transition: top 0.6s var(--sanft); }
  /* Seitenleiste: schwebende Glasplatte rechts */
  .katalog, .gemeinde-blatt { position: absolute; z-index: 7; top: 90px; right: 14px; bottom: 14px; width: clamp(340px, 27vw, 400px); border-radius: 26px;
    border: var(--glas-rand); box-shadow: var(--glas-schatten); backdrop-filter: blur(22px) saturate(150%); background: var(--glas-dunkel);
    transition: transform 0.6s var(--sanft), opacity 0.45s; }
  .katalog { padding-top: 14px; }
  .tasten-hilfe { border-top: var(--glas-rand); }
  /* Knopf zum Ein-/Ausklappen: hängt an der linken Kante der Seitenleiste */
  .layout-knopf { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 9; top: 104px; right: calc(clamp(340px, 27vw, 400px) + 22px); height: 40px; padding: 0 12px 0 10px;
    border-radius: 999px; border: var(--glas-rand); background: var(--glas-dunkel); color: #fff; backdrop-filter: blur(14px); box-shadow: var(--glas-schatten);
    font-family: var(--display); font-size: 15px; transition: right 0.6s var(--sanft), background 0.3s, transform 0.25s; }
  .layout-knopf:hover { transform: scale(1.05); }
  .layout-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform 0.6s var(--sanft); }
  .layout-knopf span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.5s var(--sanft), opacity 0.3s; white-space: nowrap; }
  /* Eingeklappt: Seitenleiste fährt raus, Kopf wird zur Pille, Stufe rückt mittig darunter */
  .app.kompakt .katalog, .app.kompakt .gemeinde-blatt { transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; }
  .app.kompakt .kopf { width: min(600px, calc(100% - 28px)); height: 54px; top: 12px; border-radius: 999px; }
  .app.kompakt .logo-text { max-width: 170px; }
  .app.kompakt .unten { opacity: 0; pointer-events: none; transform: translate(-50%, -12px); }
  .app.kompakt .stufe { top: 76px; left: 50%; width: min(460px, calc(100% - 28px)); transform: translateX(-50%); }
  .app.kompakt .oben-stapel { top: 128px; }
  .app.kompakt .layout-knopf { right: 14px; background: var(--verlauf-blau); }
  .app.kompakt .layout-knopf svg { transform: rotate(0deg); }
  .app.kompakt .layout-knopf span { max-width: 80px; opacity: 1; }
  /* Anleitung oben links (unten liegt die Bauleiste), Bauleiste mittig unten */
  .tipp, .tipp.oben, .tipp.hoch { top: 140px; bottom: auto; left: 14px; width: min(460px, calc(100% - 28px)); }
  .baumodus { bottom: 18px; width: min(560px, calc(100% - clamp(340px, 27vw, 400px) - 60px)); left: calc((100% - clamp(340px, 27vw, 400px) - 28px) / 2); transition: left 0.6s var(--sanft), width 0.6s var(--sanft); }
  .app.kompakt .baumodus { left: 50%; width: min(560px, calc(100% - 140px)); }
  .meldung { top: 92px; }
}

/* Eigener Mauszeiger (Desktop): weißer Pfeil mit dunklem Rand und weichem Schatten; über Klickbarem leicht bläulich */
html.maus, html.maus body, html.maus .welt canvas, html.maus .welt canvas:active {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4v21l5.6-5.3 4 8.6 3.6-1.6-3.9-8.4H23z' fill='%23142030' fill-opacity='.35' transform='translate(1.6 1.8)'/%3E%3Cpath d='M6 4v21l5.6-5.3 4 8.6 3.6-1.6-3.9-8.4H23z' fill='%23fff' stroke='%231f2a44' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto;
}
html.maus :is(button, a, summary, label, [role="tab"], .karte, .wschild.muenzen, .wschild.baustelle, .wschild.ortsteil, .wschild.stempel, .plopp-karte, .brief-knopf):not([disabled]) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 4v21l5.6-5.3 4 8.6 3.6-1.6-3.9-8.4H23z' fill='%23142030' fill-opacity='.35' transform='translate(1.6 1.8)'/%3E%3Cpath d='M6 4v21l5.6-5.3 4 8.6 3.6-1.6-3.9-8.4H23z' fill='%23e3f0ff' stroke='%233a5bd5' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, pointer;
}
html.maus input { cursor: text; }
@media (prefers-reduced-motion: reduce) { .karte::after, .balken i { animation: none; transition: none; } }

/* Fehlerbehebungen aus dem Bug-Test (11.11.2026) */
.meldung { pointer-events: none; }                           /* blockiert keine Klicks mehr */
.wschild.durch { pointer-events: none; opacity: 0.55; }      /* Münzen im Baumodus: Klick geht auf die Kachel */
.brief-knopf .punkt { left: -6px; top: -6px; }               /* roter Punkt verdeckt das „P“ nicht */
.plopp-karte:not(.eingeklappt) .plopp-ueber { white-space: normal; }
.app.mit-tipp .werkstatt { bottom: calc(var(--tipp-h, 150px) + 22px); transition: bottom 0.3s; }
@media (max-width: 440px) {
  .wert { padding: 5px 7px; gap: 3px; }
  .wert small { display: none; }                              /* „+256/h“ weg, damit der Dorfname Platz hat */
  .logo-text { font-size: 19px; }
  .werte { gap: 3px; }
}
@media (min-width: 900px) {
  /* ⚙ unten links (rechts liegt die Seitenleiste), Menü klappt nach rechts oben auf */
  .werkstatt { left: 14px; right: auto; bottom: 14px; }
  .werkstatt[open] > div { left: 0; right: auto; }
  .app.mit-tipp .werkstatt { bottom: 14px; }
  /* Anleitung unten links über dem ⚙, oben bleiben Plopp-Karte und Brief frei */
  .tipp, .tipp.oben, .tipp.hoch { top: auto; bottom: 70px; left: 14px; width: min(440px, calc(100% - clamp(340px, 27vw, 400px) - 60px)); }
  .app.kompakt .tipp { width: min(440px, calc(100% - 28px)); }
  /* Bauleiste rechts neben der Anleitung, damit sich beide nicht decken */
  .baumodus { left: auto; right: calc(clamp(340px, 27vw, 400px) + 28px); transform: none; width: min(460px, calc(100% - clamp(340px, 27vw, 400px) - 520px)); min-width: 300px; }
  .app.kompakt .baumodus { left: auto; right: 14px; transform: none; width: min(460px, calc(100% - 520px)); }
}

/* =====================================================================================================================
   Saison 1 „Unterwelt“ (12.11.2026): Ruf-Chip, Ruf-Fenster, Unterboss-Briefe, Ruf-Reiter
   ===================================================================================================================== */
:root { --pate: #b03a2e; --sauber: #2471a3; }
.ruf-chip { cursor: pointer; font: inherit; color: inherit; }
.ruf-chip.pate { background: linear-gradient(135deg, rgba(176, 58, 46, 0.55), rgba(40, 20, 20, 0.6)); }
.ruf-chip.sauber { background: linear-gradient(135deg, rgba(36, 113, 163, 0.6), rgba(20, 40, 70, 0.6)); }
.ruf-chip:hover { transform: translateY(-1px); }
.reiter .ruf-reiter { position: relative; }
.reiter .ruf-reiter::after { content: "😎😇"; font-size: 10px; margin-left: 4px; }
.reiter .ruf-reiter.pate::after { content: "😎"; }
.reiter .ruf-reiter.sauber::after { content: "😇"; }
.karte.ruf-karte { background: linear-gradient(135deg, #2b2f45, #4a2a40) !important; color: #fff; }
.karte.ruf-karte.sauber { background: linear-gradient(135deg, #1f4e79, #2f7fb8) !important; }
.karte.ruf-karte.pate { background: linear-gradient(135deg, #2a1a1a, #7b1e1e) !important; }
.karte.ruf-karte b, .karte.ruf-karte small { color: #fff !important; }
.karte.ruf-karte .preis { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Brief-Optionen: Ruf-Kärtchen und gesperrte Optionen */
.brief-papier .optionen .ruf-chip-klein { position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 900; color: #fff; }
.ruf-chip-klein.sauber { background: var(--sauber); }
.ruf-chip-klein.pate { background: var(--pate); }
.brief-papier .optionen button:has(.ruf-chip-klein) b { padding-right: 92px; }
.brief-papier .optionen button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.brief-papier .optionen button[disabled]::before { display: none; }
.brief-papier .optionen button[disabled] b, .brief-papier .optionen button[disabled] small { color: #5d6478 !important; }
/* Briefe vom Unterboss: dunkles Papier, Sonnenbrillen-Marke */
.brief-papier.unterwelt { background: repeating-linear-gradient(transparent 0 31px, rgba(255, 255, 255, 0.05) 31px 32px), linear-gradient(#2a2730, #1c1a21); color: #eee6d8; }
.brief-papier.unterwelt::before { background: repeating-linear-gradient(90deg, #b03a2e 0 18px, #1c1a21 18px 26px, #d4af37 26px 44px, #1c1a21 44px 52px); }
.brief-papier.unterwelt h2, .brief-papier.unterwelt .brief-absender b { color: #f3d27a; }
.brief-papier.unterwelt .brief-an, .brief-papier.unterwelt .brief-gruss { color: #c9bfae; }
.brief-papier.unterwelt .briefmarke span { background: linear-gradient(135deg, #1c1a21, #7b1e1e); font-size: 0; }
.brief-papier.unterwelt .briefmarke span::after { content: "😎"; font-size: 28px; }
.brief-papier.unterwelt .poststempel { border-color: rgba(243, 210, 122, 0.5); color: rgba(243, 210, 122, 0.7); }
.brief-papier.unterwelt .brief-antwort { color: #a99f8e; }
.brief-papier.unterwelt .brief-antwort::before, .brief-papier.unterwelt .brief-antwort::after { border-color: #4a4552; }
.brief-papier.unterwelt .optionen button { background: rgba(255, 255, 255, 0.06); border-color: #4a4552; }
.brief-papier.unterwelt .optionen b { color: #f6efe2; }
.brief-papier.unterwelt .optionen small { color: #c9bfae; }
.brief-knopf.unterwelt { background: linear-gradient(135deg, rgba(42, 39, 48, 0.95), rgba(123, 30, 30, 0.9)); color: #fff; }
.brief-knopf.unterwelt small { color: #f3d27a; }
.brief-knopf.unterwelt .umschlag { filter: grayscale(1) brightness(2); }

/* Ruf-Fenster */
.ruf-blatt { width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.ruf-blatt .ueber { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #8a90a0; }
#ruf.enthuellung .ruf-blatt { animation: enthuellung 0.7s cubic-bezier(.2,.9,.3,1.3); }
#ruf.enthuellung h2 { animation: plopp 0.9s; }
@keyframes enthuellung { from { transform: scale(0.6) rotate(-3deg); opacity: 0; } }
.ruf-leiste { position: relative; padding-top: 18px; }
.ruf-leiste .ende { position: absolute; top: 0; font-size: 12px; font-weight: 900; }
.ruf-leiste .ende.pate { left: 0; color: var(--pate); }
.ruf-leiste .ende.sauber { right: 0; color: var(--sauber); }
.ruf-bahn { position: relative; height: 14px; margin: 8px 6px 18px; border-radius: 999px;
  background: linear-gradient(90deg, #7b1e1e, #b03a2e 22%, #c9c2b4 42%, #c9c2b4 58%, #2f7fb8 78%, #1f4e79); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }
.ruf-bahn::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: rgba(31, 42, 68, 0.35); }
.ruf-zeiger { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); min-width: 40px; padding: 4px 8px; border-radius: 999px; background: #fff; color: var(--navy);
  border: 3px solid var(--navy); font-size: 13px; font-weight: 900; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transition: left 1.6s cubic-bezier(.3,1.4,.4,1); }
.ruf-naechster { margin: 0; font-weight: 800; color: var(--navy); }
.ruf-woche { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: #5d6478; }
.ruf-woche i { width: 14px; height: 14px; border-radius: 50%; background: #e6dfd0; border: 2px solid #cfc5ae; }
.ruf-woche i.fertig { background: #2a2730; border-color: #2a2730; }
.ruf-woche i.offen { background: #f3d27a; border-color: #b8892c; animation: puls 1s infinite; }
.ruf-woche span { flex-basis: 100%; }
.ruf-taten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ruf-tat { display: grid; gap: 3px; padding: 10px 12px; border-radius: 16px; border: 0; color: #fff; text-align: left; cursor: pointer; font: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.ruf-tat.spende { background: linear-gradient(135deg, #1f4e79, #2f7fb8); }
.ruf-tat.deal { background: linear-gradient(135deg, #2a1a1a, #7b1e1e); }
.ruf-tat:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25); }
.ruf-tat[disabled] { opacity: 0.45; cursor: not-allowed; }
.ruf-tat b { font-family: var(--display); font-weight: 400; font-size: 17px; }
.ruf-tat small { font-size: 11.5px; font-weight: 700; opacity: 0.85; }
.ruf-tat span { font-size: 12.5px; font-weight: 900; }
.ruf-raenge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.ruf-raenge h3 { font-size: 16px; margin-bottom: 4px; }
.ruf-raenge .sauber h3 { color: var(--sauber); }
.ruf-raenge .pate h3 { color: var(--pate); }
.ruf-raenge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ruf-raenge li { padding: 6px 8px; border-radius: 10px; background: rgba(31, 42, 68, 0.05); }
.ruf-raenge li.da { background: rgba(47, 191, 133, 0.14); }
.ruf-raenge li b { display: block; font-size: 13px; }
.ruf-raenge li small { display: block; font-size: 11px; color: #5d6478; font-weight: 700; }
@media (max-width: 420px) { .ruf-taten, .ruf-raenge { grid-template-columns: 1fr; } }