/* Reference edition: real controls and live save data above the artwork. */
:root{--reference-cream:#fff4df;--reference-ink:#123f4c;--reference-gold:#ffcd60}
#startView{background:#ad8753 url('./home.webp') 50% 50%/cover no-repeat;backdrop-filter:none;padding:0 20px 30px;isolation:isolate}
#startView:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#3a271520,transparent 48%,#35210b38)}
/* ── Die Knopfgruppe haengt am UNTEREN Ende, nicht am oberen (v276) ──
   Gemeldet, dreimal: „Stand jetzt haengt ihr alles im Gesicht", zuletzt
   mit einem Bild, auf dem „Hundewahl" mitten auf Junas Stirn sass.

   Der erste Anlauf hat den Stapel oben festgemacht (margin-top:12vh) und
   traf damit nur den Fall der Vorlage: zwei Knoepfe unter dem Startknopf.
   Wer die Cyberstadt freigespielt hat, bekommt einen dritten, und 54
   Pixel spaeter sass die Spendenzeile wieder auf Junas Augen. Eine feste
   Zahl OBEN kann das nicht loesen, weil die Gruppe nicht immer gleich
   hoch ist.

   Der zweite Anlauf hat sie unten festgemacht: Stapel 50 Prozent hoch,
   Inhalt nach unten geschoben. Damit endet die Gruppe immer an derselben
   Stelle, egal wie viele Knoepfe darin stehen. Das war richtig und hat
   trotzdem nicht gereicht, denn eine feste Zahl UNTEN loest es auch
   nicht: WO Juna auf der Buehne steht, haengt vom Seitenverhaeltnis ab.
   Das Bild liegt formatfuellend (cover) darauf, und je nach Fenster wird
   es oben und unten oder links und rechts beschnitten.

   ── DIE RECHNUNG ──────────────────────────────────────────────────────
   Deshalb wird die Stelle jetzt AUSGERECHNET statt gesetzt. Zwei Zahlen
   gehen hinein, beide aus der Datei abgelesen und nicht geschaetzt:

     home.webp ist 941 x 1672, das Verhaeltnis Hoehe zu Breite ist 1,7768.
     Junas Ohrenspitzen liegen bei 47 Prozent der Bildhoehe.

   Bei background-size:cover gilt fuer eine Buehne b mal h:
     ist h/b groesser als 1,7768, wird das Bild auf die HOEHE gezogen,
     man sieht es ganz, und die Ohren stehen bei 0,47 h.
     Sonst wird es auf die BREITE gezogen, oben und unten faellt gleich
     viel weg, und die Ohren stehen bei 0,5 h minus 0,0533 b.
   Der kleinere der beiden Werte ist immer der richtige.

   Genau das steht unten als min(47cqh, 50cqh - 5.33cqw). Die
   Behaeltereinheiten beziehen sich auf #stage, das container-type:size
   traegt; vh und vw waeren falsch, weil die Buehne bei breiten Fenstern
   schmaler ist als das Fenster.

   Die 18 Punkte Abstand sind der einzige Wert nach Geschmack.

   Browser ohne Behaeltereinheiten behalten die Zeile davor, also 50
   Prozent. Das ist der alte Stand und nicht schlechter als vorher.

   Geprueft von qa/startgesicht.mjs ueber elf Fenstergroessen, mit
   Gegenprobe. Die Fussverweise haengen unveraendert absolut unten. */
#startView>.stack{margin:0 auto;height:50%;justify-content:flex-end;width:min(92%,440px);gap:8px!important}
#startView>.stack{height:100%;
  padding-bottom:calc(100cqh - 12px - min(47cqh, 50cqh - 5.33cqw))}
/* ── Der Schriftzug (v276) ─────────────────────────────────────────────
   Auf Ansage: „Die Pfoten oben weg und die Ueberschrift cooler."

   Die Pfote ist weg. Sie hing als :before oben rechts an der Ecke und
   war das einzige Element auf dem Schirm, das nichts tat und nichts
   sagte; die Pfoten stehen ohnehin schon auf dem Startknopf und in der
   Unterzeile.

   Der Schriftzug war flach: eine Farbe und vier harte Schatten
   darunter. Das liest sich als aufgeklebt. Jetzt zwei Dinge zusammen:

   1  Ein Verlauf IM Buchstaben, von fast weiss oben ueber Creme nach
      warmem Gold unten. Damit bekommt jede Letter oben Licht und unten
      Gewicht, statt ueberall dieselbe Flaeche zu sein.
   2  Der Block darunter aus gestapelten drop-shadow-Filtern statt aus
      text-shadow. Das ist kein Geschmack, sondern noetig: sobald die
      Schrift fuer den Verlauf durchsichtig wird, schiene ein text-shadow
      MITTEN DURCH die Buchstaben hindurch. drop-shadow arbeitet auf dem
      fertig gezeichneten Bild und kann das nicht. Die Filter stapeln
      sich aufeinander, jeder wirft den naechsten weiter, und aus fuenf
      Stufen von je zwei bis drei Pixeln wird ein durchgehender Koerper
      von elf Pixeln.

   Die Drehung ist von 2 auf 2,5 Grad gewachsen und die Zeilen stehen
   enger, damit die zwei Worte als EIN Block lesen statt als zwei
   Zeilen. Der Kasten braucht dafuer overflow:visible, sonst schneidet
   der Filter am Rand ab. */
#startView .title{margin-bottom:18px;line-height:.86;overflow:visible}
#startView .titelwort{display:block;
  font-size:clamp(46px,13.2vw,84px);line-height:.84;letter-spacing:-3px;
  /* Gerade, nicht gekippt. Auf Ansage: „Schrift grade." Die Drehung
     stand seit der Reference-Fassung hier und liess den Schriftzug wie
     einen aufgeklebten Sticker wirken; der Koerper aus den gestapelten
     Filtern traegt ihn jetzt auch ohne sie. */
  /* text-shadow WIRD VERERBT, und assets/v308/polish.css setzt auf
     .title einen dunklen blaugruenen Schatten. Bei durchsichtiger
     Schrift scheint der mitten durch die Buchstaben: im ersten Anlauf
     lag ein blaugrauer Strich quer durch JUNAS und der Verlauf sah
     schlammig aus. Hier muss er ausdruecklich weg. */
  text-shadow:none;
  background:linear-gradient(176deg,#fffdf2 14%,#ffeec0 42%,#ffcf73 70%,#f0a63c 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* Die Reihenfolge ist nicht beliebig. Gestapelte Filter wirken von
     links nach rechts, und jeder wirft den ganzen bisherigen Stand
     weiter; sichtbar bleibt darum vom ERSTEN Filter das Band direkt
     unter dem Buchstaben, vom letzten das unterste. Im ersten Anlauf
     stand hier das helle #b57f3a vorn, und genau dort, wo der Kontrast
     am meisten zaehlt, sass der hellste Ton. Jetzt liegt die dunkle
     Kante oben und der Block wird nach unten waermer. */
  filter:drop-shadow(0 1px 0 #7d5019) drop-shadow(0 2px 0 #6b4415)
         drop-shadow(0 2px 0 #5a3812) drop-shadow(0 3px 0 #43290e)
         drop-shadow(0 9px 14px rgba(24,12,3,.52))}
/* Die Unterzeile steht ausserhalb des Verlaufs und ausserhalb des
   Filters, siehe die Begruendung am <span> in index.html. Sie bleibt
   schlicht: sie ist ein Untertitel und kein zweiter Blickfang. */
#startView .title small{font-size:clamp(8px,2.2vw,13px);line-height:1.6;letter-spacing:1.5px;
  margin-top:14px;text-shadow:0 2px 3px #50351c}
#startView .title .paw{display:none}
#startView .ecke{top:max(14px,env(safe-area-inset-top));right:14px;display:flex;flex-direction:column;gap:8px}
#startView .ecke button{background:#6b584e85;border:1px solid #fff3da50;border-radius:13px;width:40px;height:40px;box-shadow:0 3px 0 #392d3040}
#startEasy,#garageStartBtn,#shopBack,#mapStart{background:linear-gradient(150deg,#ffec97,#ffd36d 55%,#ffbd48);border:1.5px solid #fff0b8;color:#30271c;border-radius:999px;box-shadow:inset 0 2px 4px #ffffdb80,0 3px 0 #b87b31,0 8px 16px #38200735;text-shadow:none}
#startEasy{font-size:clamp(18px,5vw,25px);padding:18px 20px;width:100%;margin:0 0 4px}
#startEasy:before{content:'▶';margin-right:14px}
/* ── Die Nebenknoepfe sind Glas (v276) ────────────────────────────────
   Auf Ansage und nach Vorlage: durchsichtig, nicht gefuellt.

   Bis v275 sahen die drei verschieden aus, und das war keine Absicht,
   sondern ein Schichtenstreit. assets/v275/polish.css setzt
   "#startView .btn.ghost" mit dem dunklen Blaugruen #23444bd9, diese
   Datei setzte nur "#startView .ghost". Die erste Auswahl ist
   spezifischer, also gewann sie fuer Hundewahl und Cyberstadt, waehrend
   der Spendenverweis die hiesige Regel bekam. Im Bild stand deshalb ein
   massiver dunkler Knopf neben einem durchscheinenden.

   Jetzt greift die Regel alle drei mit derselben Spezifitaet und, weil
   diese Datei nach polish.css laedt, auch als letzte. Ein Glas: heller
   Rand, weicher Untergrund, Weichzeichner dahinter, damit die Schrift
   ueber dem hellen Foto lesbar bleibt. Der Textschatten ist der Teil,
   der die Lesbarkeit wirklich traegt; ohne ihn verschwindet weisse
   Schrift ueber Junas hellem Fell. */
#startView .btn.ghost,#startView .btn.cyber,#startView .spendeknopf,#garageView .ghost{
  background:linear-gradient(rgba(255,250,240,.20),rgba(116,100,82,.28));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,248,232,.52);border-radius:999px;color:#fff8ea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 14px rgba(40,28,14,.26);
  text-shadow:0 1px 3px rgba(40,28,14,.58)}
/* Die Cyberstadt bleibt unterscheidbar: dasselbe Glas, aber violett
   eingefaerbt. Sie ist der Knopf, den man sich erarbeitet hat, und soll
   nicht aussehen wie die Hundewahl. */
#startView .btn.cyber{background:linear-gradient(rgba(216,198,255,.26),rgba(92,68,148,.36));
  border-color:rgba(226,210,255,.58)}
/* Gleich breit, damit sie als Gruppe lesen und nicht als drei Zufaelle.
   Und mindestens 44 Pixel hoch: das ist die Tippflaechenregel der Reihe.
   Der Spendenverweis lag mit 41 Pixeln darunter, auf einem 320 Pixel
   breiten Schirm sogar bei 33. Das stand nicht auf der Mangelliste, weil
   qa/tippflaechen.mjs den Startschirm nicht abfragt — gemessen ist es
   trotzdem zu klein, und beim Umbau kostet die Zeile nichts. */
#startView .btn.ghost,#startView .btn.cyber,#startView .spendeknopf{
  min-width:58%;justify-content:center;min-height:44px;align-items:center}
/* ── Die Hundewahl ist duenneres Glas (v277) ──────────────────
   Auf Ansage: nur dieser eine Knopf soll durchsichtiger sein. Er ist
   der unterste der drei und liegt damit als einziger auf Junas Kopf;
   was dort steht, verdeckt das Gesicht, auf das der ganze Schirm
   zulaeuft.

   Zurueckgenommen wird die FUELLUNG (20/28 auf 12/16 Prozent), der
   Rand (52 auf 38) und der Schlagschatten. NICHT zurueckgenommen wird
   der Textschatten: er ist das, was die weisse Schrift ueber hellem
   Fell ueberhaupt lesbar haelt, und ohne ihn waere der Knopf zwar
   durchsichtig, aber nicht mehr zu lesen. Der Weichzeichner bleibt
   aus demselben Grund. */
#startView #garageBtn.btn.ghost{
  background:linear-gradient(rgba(255,250,240,.12),rgba(116,100,82,.16));
  border-color:rgba(255,248,232,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(40,28,14,.18)}
#startView .spendeknopf{padding:11px 20px;font-size:14px;margin:0}
#startView .fussverweise{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:15px;right:15px;color:#fff0cc;font-size:11px;text-shadow:0 2px 3px #453018}
#garageView,#shopView,#mapView{background:linear-gradient(#71543565,#27180ddb),url('./home.webp') center/cover fixed;backdrop-filter:blur(8px)}
#garageView,#shopView{padding:24px 16px 26px}
#garageView>.stack,#shopView>.stack{max-width:490px!important;gap:12px!important}
/* ── Die Ueberschrift bekommt Koerper, aber KEINEN Verlauf (v276) ─────
   Der Startschirm traegt den Schriftzug mit background-clip:text und
   durchsichtiger Fuellung. Hier geht das nicht, und das ist nachgemessen
   und nicht vermutet: „Hundewahl" und „Ausruestung" beginnen mit einem
   Sinnbild, und ein farbiges Sinnbild verliert bei durchsichtiger
   Fuellung seine eigenen Farben. Im Versuch stand statt des roten
   Rucksacks ein cremefarbener Schattenriss.

   Der Koerper kommt deshalb aus gestapelten Schatten statt aus einem
   Verlauf. Sechs Stufen von je einem Punkt ergeben eine durchgehende
   Kante von sechs Punkten, darunter ein weicher Abwurf. Dieselbe
   Reihenfolge wie beim Startschriftzug: dunkel direkt unter dem
   Buchstaben, nach unten waermer. */
#garageView .title,#shopView .title{font-size:clamp(29px,7.5vw,43px)!important;
  color:#fff3d8;line-height:1.1;letter-spacing:-.5px;
  text-shadow:0 1px 0 #7d5019,0 2px 0 #6b4415,0 3px 0 #5a3812,0 4px 0 #492d0f,
    0 5px 0 #3a230c,0 6px 0 #2c1a09,0 9px 13px rgba(24,12,3,.5)}
#garageBank{font-size:20px!important;color:#ffe598!important}
.dogpick{width:100%;position:relative;padding:0 15px}
#dogCard{width:100%;padding:18px 18px 15px!important;gap:8px!important;border:2px solid #ffe38b!important;border-radius:28px!important;background:radial-gradient(ellipse at 50% 18%,#ffdf8c88,transparent 42%),linear-gradient(140deg,#a88b5360,#26190dde)!important;box-shadow:inset 0 0 0 2px #fff4b520,0 8px 25px #25150650!important}
#dogCard .reference-dog{width:100%!important;height:auto!important;aspect-ratio:1.45;object-fit:contain;border-radius:0!important;background:radial-gradient(ellipse at 50% 80%,#ffe78499,transparent 49%)!important;margin-top:8px}
#dogCard .dog-active{top:11px!important;right:12px!important;font-size:13px!important;padding:6px 14px!important;border:1px solid #9bffb3;border-radius:999px!important}
#dogCard .dog-name{font-size:33px!important;color:#fff8e9!important;text-shadow:0 4px #3d2818!important}
#dogCard .dog-description{font-size:16px!important;color:#ffe294!important}
#dogCard .dog-story{font-size:13px!important;line-height:1.45!important;opacity:.9!important;max-width:32ch}
#dogCard .dog-rotate-hint{font-size:9px!important;margin-top:-4px!important}
#dogCard .dog-equipment{width:100%;padding:9px!important;border:1px solid #ffecad33;border-radius:16px;font-size:19px!important;letter-spacing:4px!important}
#dogCard .dog-ability{padding:12px!important;background:#b89b4525!important;border:1px solid #e8b95380!important;border-radius:18px!important}
#dogCard .dog-ability>div:first-child{font-size:21px!important;color:#ffe28b!important}
#dogCard .dog-ability>div:nth-child(2){font-size:12px!important;margin-top:5px!important}
#dogCard .dog-actions button{font-size:18px!important;min-height:44px;border:1px solid #90eb9566!important;background:linear-gradient(#398852,#206441)!important;color:#beffca!important}
.dognav{position:absolute!important;top:29%;z-index:3;width:38px!important;height:56px!important;background:#e8d5a733!important;border:1px solid #ffefba66!important;border-radius:18px!important;font-size:35px!important}
#dogPrev{left:0}#dogNext{right:0}.dogdots{gap:10px!important}.dogdots button{width:10px;height:10px}.dogdots .on{background:#ffd663!important;box-shadow:0 0 14px #ffde74}
/* ── Die Buehne der Hundewahl (v276) ──────────────────────────────────
   Nach Vorlage: der Hund steht in einem warmen Schein, vier Funken
   liegen darum, und unter ihm ein leuchtender Teller statt einer
   flachen Ellipse. Der Schein liegt HINTER der Leinwand (z-index 0
   gegen 1), damit er den Hund nicht ueberstrahlt. */
.dog-buehne{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;isolation:isolate}
.dog-buehne:before{content:'';position:absolute;z-index:0;left:50%;top:48%;
  width:min(250px,64vw);height:min(250px,64vw);transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,226,150,.55) 0%,rgba(255,206,110,.22) 38%,transparent 68%)}
/* Der helle Teller unter dem Hund ist auf Ansage entfallen; was unter
   einem Hund liegt, ist ein Schatten, und der wird in drawCharPreview()
   gezeichnet. Hier bleibt nur ein sehr schwacher warmer Boden, damit der
   Hund nicht in der Luft zu schweben scheint. */
.dog-buehne:after{content:'';position:absolute;z-index:0;left:50%;bottom:13%;
  width:min(150px,38vw);height:min(26px,7vw);transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,228,160,.20) 0%,transparent 72%)}
.dog-buehne .reference-dog{position:relative;z-index:1}
.dog-funke{position:absolute;z-index:2;color:#FFEFB6;pointer-events:none;
  text-shadow:0 0 10px rgba(255,216,120,.9);opacity:.92;
  animation:funkeln 2.6s ease-in-out infinite}
.dog-funke:nth-of-type(2){animation-delay:.7s}
.dog-funke:nth-of-type(3){animation-delay:1.3s}
.dog-funke:nth-of-type(4){animation-delay:1.9s}
@keyframes funkeln{0%,100%{opacity:.30;transform:scale(.78)}50%{opacity:1;transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.dog-funke{animation:none;opacity:.8}}

/* ── Die Trageleiste (v276) ──────────────────────────────────────────
   Vier feste Faecher mit der Beschriftung davor. Ein leeres Fach ist
   absichtlich sichtbar: es sagt, dass dort etwas hingehoert. */
#dogCard .dog-equipment{display:flex!important;align-items:center;justify-content:center;
  gap:7px!important;letter-spacing:0!important;padding:8px 10px!important;
  border:1px solid #ffecad33;border-radius:16px;width:100%}
.traegt-wort{font-size:12px;color:#EADCC4;opacity:.8;margin-right:2px}
.traegt-fach{width:34px;height:34px;border-radius:11px;display:inline-flex;
  align-items:center;justify-content:center;font-size:19px;
  background:linear-gradient(#3d3226,#251d15);border:1px solid #ffecad2e}
.traegt-fach.leer{background:rgba(255,255,255,.04);border-style:dashed;
  border-color:#ffecad24}
#garageStartBtn{width:92%;font-size:23px;padding:16px;margin-top:5px}
#shopView{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 12px 26px}
#shopView>.stack{width:min(100%,500px)!important;max-width:500px!important;margin:0 auto;gap:10px!important}
#shopView .title{font-size:clamp(27px,7.2vw,38px)!important;margin:2px 0 0;color:#fff3dd;text-shadow:0 2px 0 #2c1b11,0 7px 16px #120b0780}
#shopView .panel{
  width:100%;max-width:500px!important;max-height:none!important;overflow:visible!important;
  border-radius:27px;padding:16px 13px 18px;
  background:linear-gradient(145deg,rgba(75,58,42,.95),rgba(37,27,21,.96));
  border:1px solid rgba(255,241,211,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 32px rgba(22,12,6,.38);
  backdrop-filter:blur(10px)
}
.shop-intro,.shop-balance{display:none}
.shop-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 2px 12px}
.shop-tabs button{
  min-width:0;min-height:82px;padding:9px 5px 8px;
  font:500 11.5px/1.05 Fredoka;color:#f0e5d2;
  border:2px solid rgba(214,199,169,.25);border-radius:17px;
  background:linear-gradient(155deg,rgba(92,75,58,.42),rgba(42,32,25,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  white-space:normal
}
.shop-tabs span{display:block;font-size:27px;line-height:1;margin-bottom:7px;filter:drop-shadow(0 2px 3px #0005)}
.shop-tabs [aria-selected=true]{
  border-color:#ffe17f;color:#fff0bd;
  background:radial-gradient(circle at 50% 20%,rgba(255,212,98,.12),rgba(86,63,36,.34));
  box-shadow:0 0 0 1px rgba(255,235,153,.20),0 0 17px rgba(255,195,63,.22),inset 0 0 18px rgba(255,214,94,.08)
}
.equipment-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0 1px}
.equipment-tile{
  position:relative;min-width:0;aspect-ratio:.86;padding:4px 3px 5px;
  font:500 10.8px/1 Fredoka;color:#fff4df;
  border:1.5px solid rgba(193,178,149,.28);border-radius:15px;
  background:linear-gradient(160deg,#44372c 0%,#251d17 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 3px 8px rgba(0,0,0,.12);
  overflow:hidden
}
.equipment-tile:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.06),transparent 55%)}
.equipment-tile svg{position:relative;z-index:1;width:100%;height:auto;max-height:69px;transform:scale(1.08);transform-origin:center 53%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.38))}
.equipment-tile>span{position:relative;z-index:2;min-height:15px;display:flex;align-items:center;justify-content:center;gap:2px;color:#fff2d8;text-shadow:0 1px 2px #0008;white-space:nowrap}
.equipment-tile.selected{border:2px solid #ffe27b;box-shadow:0 0 0 1px rgba(255,240,174,.18),0 0 14px rgba(255,190,54,.32),inset 0 0 18px rgba(255,199,66,.10)}
.equipment-tile.aktiv{border-color:#95de9b;background:radial-gradient(circle at 50% 34%,rgba(78,154,79,.28),rgba(31,43,28,.96) 68%)}
.equipment-tile.aktiv.selected{border-color:#ffe27b;background:radial-gradient(circle at 50% 35%,rgba(64,129,66,.35),rgba(27,39,25,.98) 70%)}
.equipment-tile.aktiv>span{font-size:18px;font-weight:700;color:#bfffc8;text-shadow:0 1px 3px #0009,0 0 10px rgba(120,255,150,.4)}
.equipment-detail{
  position:relative;margin:15px 1px 0;padding:17px 14px 13px;
  display:grid;grid-template-columns:44% 1fr;gap:13px;align-items:center;
  border:2px solid #f4d37f;border-radius:22px;
  background:radial-gradient(ellipse at 21% 50%,rgba(231,170,58,.34),transparent 55%),linear-gradient(145deg,rgba(70,52,34,.78),rgba(40,28,21,.86));
  box-shadow:inset 0 0 24px rgba(255,191,66,.05),0 8px 18px rgba(0,0,0,.12);overflow:visible
}
.equipment-badge{position:absolute;left:17px;top:-12px;z-index:5;
  font:700 10.5px Fredoka;letter-spacing:1.25px;color:#3a2912;
  padding:5px 15px;border-radius:999px;background:linear-gradient(#fff0ae,#f1be58);
  border:1px solid #fff4ce;box-shadow:0 3px 8px rgba(37,21,8,.33)
}
.equipment-hero{position:relative;min-height:124px;display:flex;align-items:center;justify-content:center}
.equipment-hero:before{content:'';position:absolute;inset:4% -1%;z-index:0;background:radial-gradient(circle,rgba(255,226,144,.56) 0%,rgba(240,174,49,.17) 41%,transparent 71%)}
.equipment-hero svg{position:relative;z-index:1;width:115%;max-width:180px;filter:drop-shadow(0 10px 8px rgba(255,181,48,.24)) drop-shadow(0 6px 7px rgba(0,0,0,.32))}
.eq-funke{position:absolute;z-index:2;width:10px;height:10px;pointer-events:none;background:radial-gradient(circle,#fff7d4 0%,rgba(255,224,140,.86) 40%,transparent 72%);animation:funkeln 2.6s ease-in-out infinite}
.eq-funke:nth-of-type(2){animation-delay:.8s}.eq-funke:nth-of-type(3){animation-delay:1.5s}.eq-funke:nth-of-type(4){animation-delay:2.1s}
.equipment-detail h2{font-size:21px;line-height:1.05;color:#fff5e7;margin:0 0 8px;letter-spacing:.1px;text-shadow:0 1px 2px #0005}
.equipment-sorte{display:inline-block;font:600 11px Fredoka;color:#f2e4c5;padding:4px 12px;border-radius:999px;margin:0 0 9px;background:rgba(255,255,255,.075);border:1px solid rgba(255,236,173,.18)}
.equipment-detail p{font-size:12.2px;line-height:1.38;color:#ead9bd;margin:0 0 11px}
.equipment-detail button{font:600 12.5px Fredoka;min-height:44px;width:100%;border:1px solid #64c978;border-radius:21px;background:linear-gradient(#2f8a4a,#216d39);color:#d6ffd7;padding:9px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.18)}
.equipment-detail button:disabled{opacity:.78;filter:saturate(.82)}
#shopBack{min-width:52%;padding:14px 28px;font-size:22px;margin-top:6px}
@media(max-width:390px){
  #shopView{padding-left:8px;padding-right:8px}
  #shopView .panel{padding:13px 9px 15px}
  .shop-tabs{gap:5px}.shop-tabs button{min-height:76px;font-size:10px;padding-left:2px;padding-right:2px}.shop-tabs span{font-size:25px}
  .equipment-grid{gap:5px}.equipment-tile{border-radius:13px;font-size:9.6px}.equipment-tile svg{max-height:62px}
  .equipment-detail{grid-template-columns:43% 1fr;gap:9px;padding:15px 10px 11px}.equipment-detail h2{font-size:18px}.equipment-detail p{font-size:11px}.equipment-hero{min-height:112px}
}
#mapView .title{color:#ffe49a;text-shadow:0 3px #503321,0 6px #302119}#mapView .mapregions button{background:linear-gradient(#5f574bd9,#383632eb);border:1px solid #c8bea578;border-radius:18px}#mapView .mapregions button.active{border:2px solid #ffe58b;box-shadow:0 0 16px #ffdc7970}#mapView .mapjourney{background:#dcc3a380;border:1px solid #fff3db;border-radius:999px}#mapView .mapjourney button{border-radius:999px}#mapView .mapjourney button[aria-pressed="true"]{background:linear-gradient(#fff099,#ffcc61);color:#164654}#mapView .kartebox{border:3px solid #fff4da;border-radius:25px;box-shadow:0 7px 0 #bea07680,0 13px 24px #34281950}
#hud .pill{background:#fff5e7;color:#164555;border:1px solid #fff9e5;box-shadow:0 3px 8px #45304022;border-radius:13px}#hud #pts{background:linear-gradient(#2c5d6b,#163e4c);color:#fff7e9;border-color:#79999d}#hud .hud-right button{border-radius:50%;background:#fff5e7;color:#164555;box-shadow:0 3px 8px #45304022}.finesse-strip{background:linear-gradient(#2e6071,#173d4d)!important;border:1px solid #85a6b377;border-radius:12px!important;color:#fff7e9}.zoomwrap{background:#fff4e2;border:1px solid #fff9e5}.zoomfill{background:linear-gradient(90deg,#ffe673,#ffbd3e)!important}#lives{color:#ed4558!important}
#barkBtnM,#duckBtn{background:linear-gradient(140deg,#316973,#123a48);color:#fff9ec;border:2px solid #8fb1b1;box-shadow:0 4px 0 #12343f,0 8px 16px #182b3940}#jumpBtn{background:linear-gradient(140deg,#ffec94,#ffc454);color:#163e4a;border:2px solid #fff0b8;box-shadow:0 4px 0 #bd8d45,0 8px 16px #182b3940}
/* V370: WUFF-Pfote nicht mehr als weiss gefiltertes Emoji. Eine SVG-Maske
   liefert exakt die gleiche graublaue Farbe wie die WUFF-Schrift. */
#barkBtnM .lb:before{
  content:'';
  display:block;
  width:28px;height:24px;
  margin:0 auto 3px;
  background:#5E7388;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cellipse cx='32' cy='36' rx='16' ry='13' fill='black'/%3E%3Cellipse cx='12' cy='23' rx='7' ry='9' transform='rotate(-25 12 23)' fill='black'/%3E%3Cellipse cx='25' cy='13' rx='7' ry='10' transform='rotate(-8 25 13)' fill='black'/%3E%3Cellipse cx='40' cy='13' rx='7' ry='10' transform='rotate(8 40 13)' fill='black'/%3E%3Cellipse cx='53' cy='23' rx='7' ry='9' transform='rotate(25 53 23)' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cellipse cx='32' cy='36' rx='16' ry='13' fill='black'/%3E%3Cellipse cx='12' cy='23' rx='7' ry='9' transform='rotate(-25 12 23)' fill='black'/%3E%3Cellipse cx='25' cy='13' rx='7' ry='10' transform='rotate(-8 25 13)' fill='black'/%3E%3Cellipse cx='40' cy='13' rx='7' ry='10' transform='rotate(8 40 13)' fill='black'/%3E%3Cellipse cx='53' cy='23' rx='7' ry='9' transform='rotate(25 53 23)' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
button:focus-visible,a:focus-visible{outline:3px solid #8bf1ed;outline-offset:3px}
@media(min-height:760px) and (orientation:portrait){#startEasy{margin-top:8px}#garageView,#shopView{padding-top:4vh}#dogCard .reference-dog{aspect-ratio:1.35}}
@media(max-width:350px){.equipment-grid{gap:4px}.equipment-tile{font-size:9px}.shop-tabs button{font-size:9px}#shopView .panel{padding:11px}.equipment-detail h2{font-size:17px}.equipment-detail{gap:7px;padding:9px}#dogCard{padding:15px 12px!important}#startView>.stack{width:100%}}
/* Auf einem kurzen Schirm wird der Titel kleiner, damit die Gruppe
   weiter oberhalb der 50 Prozent Platz findet. Die Verankerung unten
   BLEIBT: hier stand zuerst height:auto mit einem festen Rand oben,
   eine Regel aus der Zeit, als der Stapel noch oben hing. Gemessen
   auf 320 x 568 schob sie die Hundewahl auf 47 bis 55 Prozent und
   damit genau auf Junas Kopf, obwohl der Inhalt mit rund 260 Pixeln
   in die 284 verfuegbaren gepasst haette. */
@media(max-height:620px){#startView .titelwort{font-size:39px;letter-spacing:-2px}#startView .title{margin-bottom:4px}#startView .title small{margin-top:8px}#startEasy{padding:13px}#garageView>.stack,#shopView>.stack{margin:0 auto}#startView .spendeknopf{font-size:12px;padding:8px 16px}}
@media(orientation:landscape) and (max-height:600px){#startView{background-position:center 61%}#startView>.stack{width:45%;height:auto;justify-content:flex-start;margin:24px auto 55px 0}#startView .title{font-size:36px}#startView .title small{font-size:8px}#startView .ecke{flex-direction:row}#startEasy{font-size:17px;padding:11px}#garageView>.stack,#shopView>.stack{max-width:510px!important}#dogCard .reference-dog{max-width:240px}#garageView,#shopView{overflow-y:auto}}
/* Unter 470 Pixel Hoehe passt es nicht mehr, dort gilt: lieber alles
   sichtbar als schoen angeordnet. */
@media(max-height:470px) and (orientation:portrait){#startView>.stack{height:auto;justify-content:flex-start;margin-top:20px}}
@media(prefers-reduced-motion:reduce){#startView .title,.stack>*{animation:none!important}}

/* ══ Der Ergebnisschirm nach Vorlage (v277) ═══════════════════════════
   Auf Ansage nachgebaut. Der Schirm zeigt dieselben Angaben wie vorher,
   nur anders geordnet: eine HELLE Karte fuer den Lauf auf dunklem Grund,
   damit die Zahl des Laufs das Erste ist, was man sieht, darunter die
   drei Knoepfe, darunter die Bestenliste als zweite Karte.

   Wichtig dabei: die Liste sass vorher auf dunklem Grund und hat ihre
   Farben im style-Attribut mitgebracht. Cremefarbene Schrift auf Creme
   ist keine Schrift mehr, deshalb stehen die Farben jetzt hier. */
/* Die Kulisse ist ein eigenes hochkant Bild OHNE Schriftzug. Der
   Startschirm traegt seinen Schriftzug im Bild; auf dem Ergebnis steht er
   als Text darueber, und zwei Schriftzuege uebereinander waeren ein
   Doppel. Rund 140 kB als WebP bei Guete 0,70, und das reicht, weil das
   Bild ohnehin hinter einem Schleier liegt.

   Sie deckt das Fenster genau ab. Die dritte Lieferung setzt Juna schon
   im Bild dorthin, wo sie hingehoert: auf etwa 28 Prozent der Hoehe und
   leicht rechts der Mitte, also neben die Laufkarte. Die zweite musste
   dafuer noch um ein Viertel vergroessert und nach unten geschoben
   werden; das faellt damit weg, und mit ihm zwei krumme Zahlen.

   WICHTIG dabei: no-repeat. Ohne das kachelt der Browser, sobald das
   Bild schmaler wird als das Fenster, und auf einem breiten Schirm
   standen zwei Junas nebeneinander. Auf querformatigen Fenstern deckt
   deshalb wieder cover, dort passt die Hochkantfassung ohnehin nicht. */
#overView{background-color:#3a2a18;
  background-image:linear-gradient(rgba(42,25,11,.26),rgba(42,25,11,.08) 18%,
      rgba(38,22,10,.34) 50%,rgba(30,18,8,.66)),
    url('./kulisse-hoch.webp');
  background-repeat:no-repeat,no-repeat;
  background-size:auto,cover;
  background-position:center,66% top;
  background-attachment:fixed,fixed;
  backdrop-filter:none;padding:16px 13px 26px;justify-content:flex-start}
/* Querformat und breite Fenster bekommen die Kulisse der anderen
   Ueberlagerungen. Die hochkante Fassung muesste dort um das
   Anderthalbfache vergroessert werden, damit sie deckt, und dann steht
   Juna als Riesenkopf hinter den Karten. home.webp liegt ohnehin im
   Vorrat, kostet also nichts, und auf einem grossen Schirm sieht das
   Ergebnis damit aus wie Hundewahl, Ausruestung und Karte. */
@media(orientation:landscape),(min-width:620px){
  #overView{background-image:linear-gradient(#2a190b47,#2a190b1f 20%,#2a190b1f 58%,#23150a9e),
    url('./home.webp');
    background-size:auto,cover;background-position:center,center 34%}
}
#overView>.stack{max-width:470px!important;margin:0 auto;align-items:stretch}
/* Der Pfeil sitzt am Rand und nicht im Fluss der Karten. Vierundvierzig
   Punkte, wie jede Tippflaeche in diesem Spiel. */
.ergebnis-zurueck{position:absolute;left:max(14px,env(safe-area-inset-left));
  top:max(14px,env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;
  border:1px solid #fff2d24d;background:#2a1a0c8c;backdrop-filter:blur(8px);
  color:#fff4de;font:400 26px 'Fredoka';line-height:1;padding:0 3px 3px 0;z-index:3}
#overView .ergebnis-titel{margin:0 0 2px;line-height:.86;overflow:visible}
/* Derselbe Koerper wie auf dem Startschirm, nur kleiner. Die Regel dort
   haengt an #startView, deshalb steht sie hier ein zweites Mal statt als
   gemeinsame Regel: der Startschirm darf sich spaeter aendern, ohne dass
   das Ergebnis mitwandert. */
#overView .titelwort{display:block;font-size:clamp(30px,8.6vw,46px);line-height:.84;
  letter-spacing:-2px;text-align:center;text-shadow:none;
  background:linear-gradient(176deg,#fffdf2 14%,#ffeec0 42%,#ffcf73 70%,#f0a63c 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #7d5019) drop-shadow(0 2px 0 #6b4415)
         drop-shadow(0 3px 0 #59380f) drop-shadow(0 7px 11px rgba(24,12,3,.5))}

/* ── Die Laufkarte ─────────────────────────────────────────────────── */
.laufkarte{width:100%;border-radius:26px;padding:15px 16px 13px;text-align:center;
  background:linear-gradient(#fffaf0f2,#f3e6d0ee);
  border:1px solid #fffdf7;box-shadow:0 10px 26px #2a180a3d}
.laufkarte-kopf{font:500 13px 'Fredoka';color:#7a5c3a;letter-spacing:.02em}
.laufkarte-zahl{font:700 clamp(38px,11.5vw,58px)/1 'Fredoka';color:#2f2013;
  letter-spacing:-1px;margin:1px 0 4px}
/* ── Der Rekord ist ein Schild (v277) ──────────────────────
   Auf der Vorlage steht er als gelbes Schild unter der Zahl. Vorher war
   er eine gelbe Zeile, und eine Zeile unter einer sehr grossen Zahl
   liest sich als Unterschrift zu ihr, nicht als eigene Nachricht. Ein
   Rekord ist aber das Besondere an genau diesem Lauf und soll auffallen
   wie ein Aufkleber. */
#overView .newbest{margin:0 auto 6px;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(#ffdf8e,#f7c343);color:#5b3c05!important;
  border:1px solid #fff3d0;border-radius:999px;padding:5px 14px;
  font:700 clamp(11px,3.1vw,13px)/1 'Fredoka';letter-spacing:.06em;
  text-transform:uppercase;text-shadow:none!important;
  box-shadow:0 3px 10px #b5811f3d,inset 0 1px 0 #fffdf4}
#overView .newbest.hidden{display:none}
/* Das Band: eine Spur, ein gefuellter Teil, fuenf Marken, Juna und die
   Fahne. Juna sitzt auf dem Fuellstand, deshalb steht ihre Position in
   Prozent und nicht in Punkten. */
.laufbahn{position:relative;height:30px;margin:6px 4px 2px}
.laufbahn-spur,.laufbahn-fuell{position:absolute;left:0;top:14px;height:4px;border-radius:999px}
.laufbahn-spur{right:0;background:#d8c3a5}
.laufbahn-fuell{width:0;background:linear-gradient(90deg,#ffc95e,#f0a63c)}
.laufbahn i{position:absolute;top:12px;width:8px;height:8px;border-radius:50%;
  background:#fff8ec;border:2px solid #c9b190;margin-left:-6px}
.laufbahn i:nth-of-type(1){left:8%}.laufbahn i:nth-of-type(2){left:28%}
.laufbahn i:nth-of-type(3){left:48%}.laufbahn i:nth-of-type(4){left:68%}
.laufbahn i:nth-of-type(5){left:86%}
.laufbahn-juna{position:absolute;top:0;left:0;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;font-size:17px;line-height:29px;
  background:#fffaf0;border:2px solid #f0a63c;box-shadow:0 2px 6px #2a180a33;z-index:2}
.laufbahn-ziel{position:absolute;right:-4px;top:2px;font-size:18px}
.laufkarte-ziel{font:600 12px 'Fredoka';color:#b07d21;margin:4px 0 0;min-height:0}
.laufkarte-ziel:empty{display:none}
/* Drei Werte, drei Spalten, mit duennen Trennern dazwischen. */
.laufwerte{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:10px;
  border-top:1px solid #00000014;padding-top:10px}
.laufwerte>div+div{border-left:1px solid #00000014}
.laufwerte b{display:block;font:700 clamp(13px,3.7vw,17px)/1.1 'Fredoka';color:#2f2013;
  white-space:nowrap}
.laufwerte .lw-icon{margin-right:4px;font-size:.95em}
.laufwerte span:last-child{display:block;font:400 11px 'Fredoka';color:#8a6c49;margin-top:2px}
.laufkarte-tipp{font:400 12px/1.45 'Fredoka';color:#6f5738;margin:9px 0 0}
.laufkarte-tipp:empty{display:none}
#overView .finesse-result{margin:6px 0 0;color:#6f5738}

/* ── Die drei Knoepfe ──────────────────────────────────────────────── */
.ergebnis-knoepfe{display:flex;gap:9px;width:100%;align-items:stretch}
.ergebnis-knoepfe .btn{margin-top:0!important;min-height:52px;border-radius:999px}
.ergebnis-knoepfe .play{flex:1 1 52%;font-size:clamp(15px,4.2vw,19px)}
.ergebnis-knoepfe .ghost{flex:1 1 24%;font-size:clamp(12px,3.2vw,15px);
  background:#fffaf01f;border:1px solid #fff3d55c;backdrop-filter:blur(9px);color:#fff4de}

/* ── Die Bestenliste ───────────────────────────────────────────────── */
.bestenkarte{width:100%;border-radius:26px;padding:14px 13px 12px;
  background:linear-gradient(#fffaf0ef,#efe0c9ea);
  border:1px solid #fffdf7;box-shadow:0 10px 26px #2a180a3d}
.bestenkopf{display:flex;align-items:center;gap:8px;margin:0 2px 10px}
.bestenpokal{font-size:24px}
.bestentitel{flex:0 1 auto;min-width:0}
.bestenkopf h2{font:700 clamp(17px,5vw,23px)/1 'Fredoka';color:#2f2013;margin:0}
/* Die Unterzeile sagt, WER in dieser Liste steht, und macht aus einer
   Rangliste eine Einladung. Sie ist bewusst klein: sie soll die
   Ueberschrift begleiten und nicht mit ihr streiten. */
.bestenunter{margin:3px 0 0;font:500 clamp(10px,2.8vw,12px)/1.25 'Fredoka';color:#8a6c49}
.bestenquelle{margin-left:auto;font:500 10px/1.3 'Fredoka';color:#8a6c49;text-align:right;
  text-transform:uppercase;letter-spacing:.08em}
.board-kopf{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:0 10px 5px;
  font:500 10px 'Fredoka';letter-spacing:.09em;text-transform:uppercase;color:#9b7d58}
.board-zeile{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;
  padding:6px 10px;border-radius:12px;font:500 clamp(12px,3.2vw,15px) 'Fredoka';color:#3a2a19;
  background:#ffffff5c;margin-bottom:4px}
.board-zeile.oben{background:#ffffff8f}
/* Der eigene Eintrag ist der einzige, der gefunden werden muss. */
.board-zeile.eigen{background:linear-gradient(#ffe9a8,#ffd268);font-weight:700;
  box-shadow:0 2px 8px #c7912f47}
.board-rang{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font:700 12px 'Fredoka';color:#6b5333;
  background:#0000000d}
/* Gold ist dieselbe Scheibe wie Silber und Bronze, nur golden. Vorher
   stand dort eine Krone ohne Untergrund, und der erste Platz sah
   dadurch aus wie ein Sonderfall neben der Liste statt wie ihr Anfang. */
.board-rang.gold{background:linear-gradient(#ffd977,#eeab2e);color:#5b3c05;
  box-shadow:0 2px 6px #c78e2b4d,inset 0 1px 0 #fff5d8}
.board-rang.silber{background:linear-gradient(#f2f2f2,#cfcfcf);color:#4a4a4a}
.board-rang.bronze{background:linear-gradient(#e3b184,#c5834c);color:#4a2f18}
.board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-wert{white-space:nowrap;font-weight:700}
.board-wert small{font-weight:500;opacity:.6;font-size:.82em}
.board-fuss{display:flex;justify-content:space-between;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px solid #00000014;font:700 12px 'Fredoka';color:#7a5c3a}
.board-hinweis{text-align:center;font:500 11px 'Fredoka';color:#8a6c49;margin-top:3px}
.board-leer{text-align:center;font:500 13px 'Fredoka';color:#8a6c49;padding:10px 0}
.board-offline{margin-top:8px;padding:8px 10px;border-radius:12px;background:#00000008;
  border:1px solid #0000001a;font:500 11px/1.45 'Fredoka';color:#6f5738;text-align:center}
.bestenrang{font:600 12px 'Fredoka';color:#7a5c3a;margin:8px 0 0;text-align:center}
.eintragzeile{display:flex;gap:8px;margin-top:9px}
.eintragzeile .name{flex:1 1 auto;min-width:0;min-height:48px;border-radius:999px;
  background:#fffdf8;border:1px solid #00000014;color:#2f2013;padding:0 16px;font:500 14px 'Fredoka'}
.eintragzeile .name::placeholder{color:#a88f6e}
.eintragzeile .btn{margin-top:0!important;flex:0 0 auto;min-height:48px;border-radius:999px;
  padding:0 20px;font-size:14px}
#overView .privacy{font:400 10px/1.4 'Fredoka';color:#8a6c49;margin:8px 2px 0;text-align:center}
#overView .privacy .legallink{color:#7a5c3a;font-size:10px}

/* ── Spende und Fusszeile ──────────────────────────────────────────── */
#overView #spendeBox{width:100%;text-align:center;margin:2px 0 0}
#overView .spendeknopf{display:block;width:100%;box-sizing:border-box;min-height:54px;
  line-height:30px;border-radius:999px;font-size:clamp(14px,3.9vw,17px);padding:12px 20px;
  background:linear-gradient(#6b4a2b,#4a3019);border:1px solid #c9a06a66;color:#ffeccb;
  box-shadow:0 6px 16px #1a0f0640}
/* ── Die Spendenzeile war nicht zu lesen (v277) ─────────────
   Sie stand mit 72 Prozent Deckkraft in Creme auf der Kulisse, und die
   Kulisse ist an dieser Stelle eine helle Blumenwiese: hell auf hell.
   Im Bild war der Satz praktisch weg.

   Deckkraft allein hilft hier nicht, denn der Untergrund ist nicht
   dunkel, sondern wechselnd. Was traegt, ist ein Schatten unter der
   Schrift: er bringt den dunklen Rand mit, den die Kulisse nicht
   liefert, und wirkt auf jedem Untergrund.

   Die Auswahl nennt zwei Kennungen und nicht eine: weiter unten in
   dieser Datei steht "#overView .privacy" mit einem dunklen Braun, und
   die Spendenzeile traegt auch die Klasse privacy. Bei gleichem Gewicht
   gewinnt die spaetere Zeile, und im ersten Anlauf blieb der Satz
   deshalb dunkel, obwohl hier hell stand. */
#overView #spendeBox .spendezeile{opacity:.94;color:#fff1d8;
  text-shadow:0 1px 3px rgba(30,17,6,.92),0 0 10px rgba(30,17,6,.68)}
#overView #mehrBox{width:100%;margin:2px 0 0}
.ergebnis-fuss{margin-top:4px;text-align:center}
.ergebnis-fuss .legallink{color:#f0dfc2;opacity:.75;font-size:11px}
@media(max-width:350px){
  .laufwerte b{font-size:12px}.laufwerte .lw-icon{display:none}
  .ergebnis-knoepfe{flex-wrap:wrap}
  .ergebnis-knoepfe .play{flex:1 1 100%}
  .ergebnis-knoepfe .ghost{flex:1 1 40%}
}

/* ── Feinschliff nach der Vorlage (v277) ─────────────────────────────── */
/* Die drei Knoepfe tragen in der Vorlage ein Zeichen vor dem Wort. Es
   steht hier und nicht im Text, weil der Text durch die Uebersetzung
   geht: ein Zeichen im Schluessel waere ein zweiter Schluessel. */
#retryBtn:before{content:'▶';margin-right:9px;font-size:.8em;vertical-align:1px}
#shareBtn:before{content:'↗';margin-right:6px;font-size:.95em}
#menuBtn:before{content:'☰';margin-right:6px;font-size:.9em}
#overView .newbest{color:#c07a12;text-shadow:none}
/* Die Platzzeile sitzt auf der hellen Karte, ihre Farbe kommt aber aus
   der Zeit, in der sie auf dunklem Grund stand. */
#overView .liga{color:#7a5c3a;font-size:12px;font-weight:600;background:none;
  border:0;padding:0;margin:0}
/* Das Namensfeld traegt in der Vorlage ein Personenzeichen. */
.eintragzeile{position:relative}
.eintragzeile:before{content:'👤';position:absolute;left:14px;top:50%;
  transform:translateY(-50%);font-size:14px;opacity:.45;pointer-events:none}
.eintragzeile .name{padding-left:38px}
/* ── KEIN Pfeil am Spendenknopf, und das ist wichtig ─────────────────
   Die Vorlage zeigt rechts im Spendenknopf ein Winkelzeichen. Ich habe
   es als ::after gesetzt, und im Bild sass danach ein kleiner grauer
   Keil mitten im Wort „Tierheim", genau ueber dem i. Nachgewiesen
   wurde er, indem die Regel abgeschaltet wurde und der Keil verschwand.

   Der Grund ist schlimmer als der Keil: `.spendeknopf::after` ist in
   index.html schon vergeben, und zwar an die UNSICHTBARE
   Trefferflaeche. Der Knopf ist sichtbar 36 Punkte hoch, antippbar 44,
   und genau diese 44 stehen in diesem ::after. Ein `content` darin
   macht aus der Flaeche einen Buchstabenkasten.

   Das Zeichen bleibt deshalb weg. Ein Stueck Zierde ist es nicht wert,
   eine zugesicherte Tippflaeche dafuer zu opfern, und ein eigenes
   <span> im Text ginge auch nicht: der Text wird beim Sprachwechsel
   ueber textContent ersetzt und nimmt jedes Kindelement mit. */
#overView .mehrKopf{color:#f0dfc2;opacity:.8}
/* Die Liste bekommt ihre volle Hoehe zurueck. In index.html steht seit
   v88 eine Deckelung auf 23vh, damit der Schirm auf EINE Bildschirmhoehe
   passt; auf 844 Punkten sind das 194 Punkte, also viereinhalb Zeilen von
   zehn. Der Entwurf von v277 ist eine Seite, die scrollen darf, und
   zehn Plaetze sind dann auch zehn Plaetze. */
#overView #board{max-height:none;overflow:visible}
/* Die Knoepfe duerfen nicht ueber den Rand hinauslaufen. Ein Flexkind
   ist von Haus aus mindestens so breit wie sein Inhalt; ohne min-width:0
   schiebt der laengste Text die Reihe auseinander, und „Menue" stand
   halb ausserhalb des Schirms. */
.ergebnis-knoepfe .btn{min-width:0;padding-left:10px;padding-right:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ergebnis-knoepfe .play{flex:1 1 44%}
.ergebnis-knoepfe .ghost{flex:1 1 28%}
/* Zeichen und Zahl gehoeren in EINE Zeile. nowrap allein hat das nicht
   geschafft, weil das Zeichen ein eigenes Element ist und die Spalte eng
   ist; eine Flexzeile laesst beides nebeneinander stehen und schneidet
   nichts ab. */
.laufwerte b{display:flex;align-items:center;justify-content:center;gap:5px}
.laufwerte .lw-icon{margin:0;font-size:.9em}
.bestenquelle{max-width:42%;font-size:9px}

/* ── Die Aufteilung der Vorlage (v277) ───────────────────────────────
   In der Vorlage ist die obere Karte NICHT so breit wie die Seite: sie
   endet nach gut der Haelfte, und rechts daneben laeuft Juna durchs Bild.
   Genau das macht den Schirm aus; eine Karte ueber die volle Breite legt
   sich wie ein Deckel ueber die Kulisse.

   Auf einem schmalen Telefon laesst sich das Verhaeltnis der Vorlage
   (Karte 50 Prozent von 1024) nicht eins zu eins uebernehmen, sonst
   stehen drei Zahlenspalten in 195 Punkten. Die Karte nimmt deshalb
   hoechstens 300 Punkte und mindestens 68 Prozent, und sie steht links,
   damit rechts die Kulisse bleibt. */
.laufkarte{width:min(78%,300px);align-self:flex-start;padding:12px 13px 10px;border-radius:22px}
.laufkarte-kopf{font-size:12px}
.laufkarte-zahl{font-size:clamp(30px,9vw,44px)}
.laufwerte{margin-top:8px;padding-top:8px}
.laufwerte b{font-size:clamp(11px,3.1vw,14px)}
.laufwerte span:last-child{font-size:10px}
.laufkarte-tipp{font-size:11px;margin-top:7px}
.laufbahn{height:26px;margin:5px 2px 0}
.laufbahn-spur,.laufbahn-fuell{top:12px}
.laufbahn i{top:10px}
.laufbahn-juna{width:26px;height:26px;font-size:15px;line-height:25px}
/* Der Spendenknopf ist in der Vorlage schmaler als die Karten darueber. */
#overView #spendeBox{align-self:center;width:min(100%,380px)}
@media(min-width:430px){.laufkarte{width:min(62%,300px)}}
/* Die zwei Glasknoepfe standen auf einer hellen Stelle der Kulisse und
   waren dort kaum zu lesen: cremefarbene Schrift auf cremefarbenem
   Sonnenlicht. Sie bekommen einen dunkleren Kern, damit sie auf JEDER
   Stelle des Bildes tragen, und behalten die Unschaerfe dahinter. */
.ergebnis-knoepfe .ghost{background:linear-gradient(#3d2b1ad1,#241708d9)!important;
  border:1px solid #ffeeca5c!important;color:#fff4de!important;
  text-shadow:0 1px 3px #1a0f0680;box-shadow:0 5px 14px #1a0f0636}
.ergebnis-knoepfe .play{box-shadow:0 5px 16px #2a180a4d}

/* ── Naeher an die Vorlage, zweiter Durchgang (v277) ─────────────────
   Nachgemessen an der Vorlage, umgerechnet auf ihre Breite von 1024:
   die Laufkarte nimmt 50 Prozent, „Nochmal" 45, die zwei Glasknoepfe je
   18, die Bestenliste 88 und der Spendenknopf 60. Diese Verhaeltnisse
   stehen jetzt hier. Die Laufkarte bleibt etwas breiter als 50 Prozent,
   weil auf 390 Punkten sonst drei Zahlenspalten in 195 Punkten stuenden
   und die Lesbarkeit vor der Treue zum Raster kommt. */
.laufkarte{width:min(66%,300px)}
@media(min-width:430px){.laufkarte{width:min(56%,300px)}}
.ergebnis-knoepfe .play{flex:1 1 46%}
.ergebnis-knoepfe .ghost{flex:1 1 20%}
/* Die Glasknoepfe sind in der Vorlage HELL, nicht dunkel: milchiges
   Creme mit brauner Schrift. Im ersten Anlauf standen sie dunkel hier,
   weil die Schrift auf der hellen Kulisse verschwand; mit genug Deckung
   traegt auch die helle Fassung, und sie gehoert zur Vorlage. */
.ergebnis-knoepfe .ghost{background:linear-gradient(#fffaf0d9,#f0e2cbcc)!important;
  border:1px solid #fffdf7b3!important;color:#4a3419!important;
  text-shadow:none;box-shadow:0 5px 14px #2a180a2e}
/* Der Spendenknopf ist schmaler als die Karten darueber. */
#overView #spendeBox{width:min(88%,360px)}
/* Die Marke neben „Bestenliste". */
.bestenchip{margin-left:auto;display:inline-block;white-space:nowrap;
  font:600 11px 'Fredoka';color:#4a3419;padding:6px 13px;border-radius:999px;
  background:linear-gradient(#ffe9a8,#ffd268);border:1px solid #fff3cf;
  box-shadow:0 2px 6px #c7912f30}
.bestenchip.aus{background:#0000000f;border-color:#00000014;color:#7a5c3a;box-shadow:none}
/* Ein paar Baeume hinter dem Laufband, wie in der Vorlage. Sie sind
   Zierde und stehen deshalb hinter allem und ohne Vorlesetext. */
.laufbahn-deko{position:absolute;left:2%;right:14%;top:-3px;display:flex;
  justify-content:space-between;font-size:12px;opacity:.28;filter:grayscale(.3);
  pointer-events:none}
.laufbahn{height:32px;margin:8px 2px 0}
.laufbahn-spur,.laufbahn-fuell{top:20px}
.laufbahn i{top:18px}
.laufbahn-juna{top:6px}
.laufbahn-ziel{top:8px}
/* Die Fusszeile traegt zwei Verweise mit einem Strich dazwischen, wie in
   der Vorlage. Beide fuehren an dieselbe Stelle, denn das Spiel hat EINE
   Rechtsseite, auf der Impressum und Datenschutz zusammenstehen. */
.ergebnis-fuss{display:flex;align-items:center;justify-content:center;gap:10px}
.ergebnis-fuss span{color:#f0dfc2;opacity:.45;font-size:11px}
.ergebnis-fuss .legallink{text-decoration:underline;text-underline-offset:3px}

/* ── Dritter Durchgang: kleiner, damit die Kulisse traegt (v277) ──────
   Auf Ansage: die Laufkarte viel kleiner, die drei Knoepfe kleiner,
   Teilen und Menue deutlicher, und von der Liste nur die ersten drei mit
   Rollen fuer den Rest. */
.laufkarte{width:min(58%,252px);padding:10px 11px 9px;border-radius:20px}
.laufkarte-kopf{font-size:11px}
.laufkarte-zahl{font-size:clamp(26px,7.4vw,36px);margin:0 0 2px}
#overView .newbest{font-size:11px;margin:0}
.laufbahn{height:26px;margin:6px 1px 0}
.laufbahn-spur,.laufbahn-fuell{top:17px;height:3px}
.laufbahn i{top:15px;width:6px;height:6px;border-width:1.5px;margin-left:-4px}
.laufbahn-juna{top:4px;width:22px;height:22px;font-size:12px;line-height:21px}
.laufbahn-ziel{top:5px;font-size:14px}
.laufbahn-deko{font-size:10px;top:-2px}
.laufkarte-ziel{font-size:10px;margin-top:3px}
.laufwerte{margin-top:7px;padding-top:7px}
.laufwerte b{font-size:11px;gap:3px}
.laufwerte .lw-icon{font-size:.85em}
.laufwerte span:last-child{font-size:9px;margin-top:1px}
.laufkarte-tipp{font-size:10px;margin-top:6px;line-height:1.4}
/* Die Knoepfe: flacher, und die zwei rechten bekommen denselben Koerper
   wie der grosse. Sie waren milchig und standen auf einer hellen Stelle
   der Kulisse; „deutlicher hervorgehoben" heisst hier voller Grund statt
   Schleier. */
.ergebnis-knoepfe .btn{min-height:46px}
.ergebnis-knoepfe .play{flex:1 1 46%;font-size:clamp(13px,3.6vw,16px)}
.ergebnis-knoepfe .ghost{flex:1 1 20%;font-size:clamp(11px,2.9vw,13px);
  background:linear-gradient(#fffdf7,#f2e4cd)!important;
  border:1px solid #fff9ec!important;color:#43301a!important;font-weight:600;
  box-shadow:0 4px 12px #2a180a3d}
/* Nur die ersten drei stehen im Bild, der Rest kommt beim Rollen. Die
   Hoehe ist an der Zeile gerechnet und nicht geraten: eine Zeile ist
   etwa 38 Punkte hoch, drei also 114, dazu ein Rest als Andeutung, dass
   es weitergeht. */
#overView #board{max-height:128px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.board-zeile{padding:5px 9px;margin-bottom:3px}
/* Die zwei Reiter ueber der Liste. */
.bestenwahl{margin-left:auto;display:flex;gap:4px;background:#00000010;
  border-radius:999px;padding:3px}
.bestenwahl button{font:600 10px 'Fredoka';color:#7a5c3a;border:0;background:none;
  padding:7px 10px;border-radius:999px;min-height:34px;white-space:nowrap}
.bestenwahl [aria-selected="true"]{background:linear-gradient(#ffe9a8,#ffd268);
  color:#43301a;box-shadow:0 2px 6px #c7912f3d}
.bestenkopf h2{font-size:clamp(15px,4.4vw,20px)}
.bestenpokal{font-size:20px}
/* Die zwei Reiter sind Tippflaechen und muessen 44 Punkte hoch sein, wie
   alles in diesem Spiel, was ein Finger trifft. */
.bestenwahl button{min-height:44px;padding:0 12px}
/* Auf einem 320er Schirm reicht die Zeile nicht fuer Pokal, Wort und
   zwei Reiter: „Lokal" stand halb ausserhalb der Karte. Dann ruecken
   die Reiter in eine eigene Zeile. */
@media(max-width:379px){
  .bestenkopf{flex-wrap:wrap;row-gap:8px}
  .bestenwahl{margin-left:auto;width:100%;justify-content:center}
}
.bestenrang{font-size:11px;line-height:1.4}
#overView .liga{font-size:11px}

/* ── Glas statt Deckfarbe, vierter Durchgang (v277) ──────────────────
   Auf Ansage: die Durchsichtigkeit soll zurueck, die farbige
   Hinterlegung bleiben. Beides zusammen geht nur ueber die
   Weichzeichnung DAHINTER: sie nimmt der Kulisse die Struktur, und auf
   einer ruhigen Flaeche traegt auch ein halbdurchsichtiger Grund.

   Der Schriftzug bekommt dazu einen hellen Schatten nach oben. Das ist
   kein Effekt, sondern der Grund, aus dem die Schrift auf einer hellen
   UND auf einer dunklen Stelle der Kulisse lesbar bleibt. */
.ergebnis-knoepfe .ghost{
  background:linear-gradient(rgba(255,251,242,.86),rgba(243,231,209,.78))!important;
  border:1px solid rgba(255,253,247,.92)!important;color:#38270f!important;
  font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.3) brightness(1.08);
  backdrop-filter:blur(18px) saturate(1.3) brightness(1.08);
  box-shadow:0 4px 14px rgba(42,24,10,.28),inset 0 1px 0 rgba(255,255,255,.4)}
/* Dieselbe Sprache fuer die zwei Karten: sie waren fast deckend und
   haben die Kulisse hinter sich ausgeloescht. Jetzt scheint sie durch,
   und die Weichzeichnung haelt die Schrift trotzdem ruhig. */
.laufkarte{background:linear-gradient(rgba(255,250,240,.80),rgba(243,230,208,.70));
  -webkit-backdrop-filter:blur(18px) saturate(1.2) brightness(1.05);
  backdrop-filter:blur(18px) saturate(1.2) brightness(1.05);
  border:1px solid rgba(255,253,247,.75)}
/* Auf Ansage durchsichtiger als die Laufkarte: sie ist die groesste
   Flaeche des Schirms, und genau ueber ihr liegt die Blumenwiese, die
   man sehen soll. 62 Prozent statt 80. Damit sie ihre Kante behaelt,
   wird der Rand heller und der Schlagschatten tiefer; die Zeilen darin
   tragen den Text, nicht die Karte. */
.bestenkarte{background:linear-gradient(rgba(255,250,240,.62),rgba(239,224,201,.54));
  -webkit-backdrop-filter:blur(18px) saturate(1.2) brightness(1.05);
  backdrop-filter:blur(18px) saturate(1.2) brightness(1.05);
  border:1px solid rgba(255,253,247,.75)}
.board-zeile{background:rgba(255,255,255,.42)}
.board-zeile.oben{background:rgba(255,255,255,.62)}
.eintragzeile .name{background:rgba(255,253,248,.82)}
#overView .spendeknopf{background:linear-gradient(rgba(107,74,43,.82),rgba(74,48,25,.86));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Auf schmalen Schirmen passen drei Knoepfe nicht in eine Zeile: bei 320
   Punkten standen „Teilen" und „Menue" uebereinander im selben Feld. Der
   grosse Knopf nimmt dort die ganze Zeile, die zwei kleinen die naechste.
   Diese Regeln stehen GANZ HINTEN, weil eine frueher notierte Fassung
   von einer spaeteren Zeile ausserhalb des Medienblocks wieder
   ueberschrieben wurde. */
@media(max-width:359px){
  .ergebnis-knoepfe{flex-wrap:wrap;gap:7px}
  .ergebnis-knoepfe .play{flex:1 1 100%}
  .ergebnis-knoepfe .ghost{flex:1 1 40%}
  .laufkarte{width:min(70%,252px)}
}
/* „Teilen" und „Menue" waren bei 60 Prozent Deckung noch zu
   durchsichtig: die Kulisse hat genau dort ihre hellste Stelle, und ein
   milchiger Knopf auf Sonnenlicht ist kein Knopf mehr. Sie stehen jetzt
   bei 86 Prozent. Durchsichtig bleiben sie, man sieht die Farben der
   Kulisse weiter durchscheinen, aber der Koerper traegt. */
.bestenkarte{border:1px solid rgba(255,253,247,.85);box-shadow:0 12px 30px rgba(42,24,10,.34)}
/* Die Zeilen werden dafuer eine Spur deckender: der Text steht auf
   IHNEN und nicht auf der Karte, und er ist das, was gelesen wird. */
.board-zeile{background:rgba(255,255,255,.56)}
.board-zeile.oben{background:rgba(255,255,255,.74)}
.board-kopf{color:#7a5c3a}
/* Die drei leisesten Zeilen bekommen mehr Farbe, weil die Karte unter
   ihnen durchsichtiger geworden ist. Wer den Grund aufmacht, muss die
   Schrift nachziehen, sonst wird aus „durchsichtig" „unleserlich". */
.board-kopf{color:#6b4f2f}
.bestenrang{color:#5f4527}
#overView .privacy{color:#6b5233}
#overView .privacy .legallink{color:#5a4023}
.board-zeile{color:#32230f}

/* ══ Die Hundewahl passt in die Buehne (v277) ═════════════════════════
   Gemeldet mit einem Bild vom Telefon: „Spiel starten" und die Reihe
   darunter standen unter der Kante, der Schirm war nur durch Rollen
   ganz zu sehen. Nachgemessen ueber acht Fenstergroessen: auf JEDEM
   Telefon ragte die Karte heraus, zwischen 68 und 256 Punkten, und nur
   auf einem Tablet passte sie.

   Eine feste Hoehe fuer die Karte waere wieder die Sorte Zahl, die beim
   naechsten Hund mit laengerem Spruch nicht mehr stimmt. Stattdessen
   bekommt die Karte, was uebrig ist: der Stapel fuellt die Buehne, die
   Knopfreihe steht unten und nimmt sich ihren Platz zuerst, und die
   Karte schrumpft auf den Rest. Innerhalb der Karte gibt das BILD nach,
   denn Namen, Spruch und Faehigkeit sind Text und lassen sich nicht
   kuerzen.

   min-height:0 ist dabei die Angabe, ohne die nichts davon wirkt: ein
   Flexkind ist von Haus aus mindestens so hoch wie sein Inhalt und
   schrumpft ohne sie gar nicht. */
#garageView>.stack{height:100%;justify-content:flex-start}
.dogpick{flex:1 1 auto;min-height:0;align-items:stretch}
#dogCard{flex:1 1 auto;min-height:0;overflow:hidden}
/* Nachgemessen statt geraten: die Leinwand ist gar kein direktes Kind
   der Karte, sie steckt in .dog-buehne. Eine Regel auf der Leinwand
   allein bewirkt deshalb nichts; nachgeben muss die BUEHNE.

   Gemessen bei 390 mal 780: die Karte ist 479 hoch, ihr Inhalt 653, die
   Buehne davon 296. Sie ist der einzige Teil, der nachgeben kann, denn
   Name, Spruch und Faehigkeit sind Text.

   flex:1 1 0 heisst „nimm genau, was uebrig bleibt", object-fit:contain
   haelt die Zeichnung dabei im Verhaeltnis. Im Anlauf davor stand die
   Regel auf der Leinwand, und unten wurde die Faehigkeitskarte
   abgeschnitten. */
#dogCard .dog-buehne{flex:1 1 0;min-height:0;display:flex;
  align-items:center;justify-content:center}
#dogCard .reference-dog{height:100%!important;width:auto!important;
  max-width:100%;min-height:0;object-fit:contain;aspect-ratio:auto}
/* Die zwei Blaetterknoepfe stehen in der Mitte der Karte und duerfen
   nicht mitwachsen. */
.dogpick .dognav{flex:0 0 auto;align-self:center}
/* Auf sehr kurzen Schirmen reicht es trotzdem nicht: bei 320 mal 568
   war die Buehne auf null geschrumpft und der Hund ganz verschwunden,
   und unten fehlte weiter ein Stueck der Faehigkeitskarte. Zwei
   Angaben loesen das zusammen: die Buehne gibt nicht unter 64 Punkte
   nach, und was dann noch nicht passt, ist in der Karte ZU ERROLLEN
   statt abgeschnitten. Ein Hund, den man nicht sieht, ist schlimmer als
   eine Karte, die man schiebt. */
#dogCard .dog-buehne{min-height:64px}
#dogCard{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}

/* ── Juna gross, Schrift klein (v277) ────────────────────────────────
   Auf Ansage. Die Karte hat eine feste Hoehe, und was der Text nicht
   braucht, bekommt die Buehne: jeder Punkt, den eine Zeile kleiner
   wird, ist ein Punkt mehr Hund. Gemessen bei 390 mal 780 war Juna 112
   Punkte hoch, bevor diese Zeilen hier standen.

   Gekuerzt wird nur, was Zierde ist: Schriftgroessen, Innenabstaende
   und die Luecken zwischen den Bloecken. Kein Text faellt weg. */
#dogCard{gap:5px!important;padding:12px 14px 11px!important}
#dogCard .dog-name{font-size:26px!important;text-shadow:0 3px #3d2818!important}
#dogCard .dog-description{font-size:13px!important}
#dogCard .dog-story{font-size:11.5px!important;line-height:1.35!important;max-width:34ch}
#dogCard .dog-rotate-hint,#dogCard .dog-rotate-hinweis{font-size:9px!important}
#dogCard .dog-equipment{padding:6px!important;font-size:16px!important;border-radius:13px}
.traegt-fach{width:28px;height:28px;border-radius:9px;font-size:15px}
#dogCard .dog-ability{padding:8px!important;border-radius:14px!important}
#dogCard .dog-ability>div:first-child{font-size:16px!important}
#dogCard .dog-ability>div:nth-child(2){font-size:11px!important;margin-top:3px!important}
#dogCard .dog-actions button{font-size:15px!important;min-height:44px}
/* Und die Buehne bekommt eine Untergrenze, die mit der Karte waechst:
   ein Drittel der Karte gehoert dem Hund, auch wenn der Text laenger
   ist als bei Juna. */
#dogCard .dog-buehne{min-height:max(64px,20cqh)}
/* ── Der warme Schein laeuft unter die Schrift (v277) ────────────────
   Auf Ansage. Bisher sass er ganz in .dog-buehne, und seit die Buehne
   nur noch so hoch ist wie noetig, endete er als Kreis ueber dem Namen.
   Ein Licht, das an einer Kante aufhoert, sieht aus wie ein Fenster.

   Der Schein liegt deshalb jetzt auf der KARTE, laeuft von oben nach
   unten aus und geht dabei unter Name, Spruch und Faehigkeit hindurch.
   z-index:-1 setzt ihn hinter den Inhalt und vor den Kartengrund;
   dasselbe Mittel haelt auf dem Startschirm den Schleier an seinem
   Platz. */
#dogCard:before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-4%;width:min(440px,124%);height:74%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 30%,
    rgba(255,226,150,.46) 0%,rgba(255,210,118,.26) 34%,
    rgba(255,198,96,.12) 56%,transparent 78%)}
/* Der helle Kern in der Buehne wird dafuer leiser, sonst stehen zwei
   Scheine uebereinander und der Rand des kleineren wird sichtbar. */
.dog-buehne:before{background:radial-gradient(circle,
  rgba(255,232,168,.34) 0%,rgba(255,206,110,.14) 40%,transparent 70%)}

/* ── Der Hintergrund der Hundewahl wird unscharf (v277) ──────────────
   Auf Ansage. Die Zeile weiter oben setzt zwar backdrop-filter:blur(8px)
   auf #garageView, und die hat nie gewirkt: backdrop-filter zeichnet
   weich, was HINTER dem Element liegt, also die Leinwand. Das Bild
   home.webp liegt aber AUF dem Element selbst, als eigener Hintergrund,
   und bleibt davon unberuehrt. Seit die Karte durchsichtig ist, sieht
   man das: scharfe Fensterreihen hinter Junas Kopf.

   Das Bild wandert deshalb auf eine eigene Lage, die weichgezeichnet
   wird. inset:-24px ist dabei keine Zierde: eine Weichzeichnung zieht
   den Rand nach innen, und ohne den Ueberstand staende aussen ein
   heller Saum. Die Lage liegt bei z-index:-1 hinter dem Inhalt und vor
   dem Grundton, genau wie der Schleier auf dem Startschirm. */
#garageView{background-image:linear-gradient(#71543565,#27180ddb)}
#garageView:before{content:'';position:absolute;inset:-24px;z-index:-1;
  background:#2b1d10 url('./home.webp') center center/cover no-repeat;
  filter:blur(9px) saturate(1.04) brightness(.86);pointer-events:none}
/* ── Der Schnitt zwischen Hund und Name (v277) ───────────────────────
   Gemeldet: „Zwischen Schrift Juna und dem Hund ist ein cut des
   Verlaufs." Eine waagerechte Kante quer durch die Karte.

   Nicht die Karte war es und nicht die Buehne: die LEINWAND selbst
   trug seit v267 einen eigenen Verlauf, radial-gradient(ellipse at
   50% 80%, ... transparent 49%). Ein Verlauf, der bei 49 Prozent
   durchsichtig wird, ist an der Unterkante seines Kastens noch
   farbig, und die Unterkante ist seit v277 genau dort, wo der Name
   anfaengt. Nachgewiesen, indem die drei moeglichen Lagen einzeln
   abgeschaltet wurden; erst ohne diese war die Kante weg.

   Der Verlauf faellt ersatzlos weg. Das Licht hinter dem Hund kommt
   zweifach von woanders: aus .dog-buehne:before als heller Kern und
   aus #dogCard:before als Schein, der unter der Schrift weiterlaeuft.
   Ein dritter an derselben Stelle war ohnehin einer zu viel. */
#dogCard .reference-dog{background:none!important}


/* V308 Recovery: kompakter Startscreen ohne Eingriff in die stabile Hundegrafik. */
#startView>.stack.start-stack{width:min(92%,430px)!important;gap:8px!important;transform:translateY(22px)}
#startView .start-title{margin-bottom:8px}
#startView .titelwort{font-size:clamp(42px,11.8vw,76px);line-height:.86;letter-spacing:-1.8px}
#startView .title small{margin-top:8px;letter-spacing:1.2px}
#startView #startEasy{padding:16px 20px;margin:0;max-width:360px}
#startView .btn.ghost,#startView .btn.cyber,#startView .spendeknopf{min-width:52%;max-width:320px}
#startView .spendeknopf{padding:10px 18px;font-size:13.5px;margin:0}
#startView #garageBtn.btn.ghost{padding:10px 18px}
@media(max-height:620px){
  #startView>.stack.start-stack{transform:translateY(10px);gap:7px!important}
  #startView .start-title{margin-bottom:4px}
  #startView .titelwort{font-size:clamp(38px,11.2vw,68px);letter-spacing:-1.5px}
}


/* ── Hundewahl-Mockup-Polish (v310) ───────────────────────────────
   Ziel: die Hundewahl naeher an das neue Mockup bringen, ohne die
   bestehende Logik umzubauen. Nur Layout, Groessenverhaeltnisse,
   Typografie und Button-Praesentation werden angepasst. */
#garageView{padding:18px 16px 24px;overflow-y:auto}
#garageView>.stack.garage-stack{max-width:430px!important;gap:10px!important;justify-content:flex-start;min-height:100%}
#garageView .title{font-size:clamp(33px,8.8vw,48px)!important;letter-spacing:-.8px;line-height:1.02;margin-top:2px}
#garageBank{font-size:clamp(18px,5.2vw,22px)!important;line-height:1;color:#ffe38f!important;text-shadow:0 2px 8px rgba(54,28,7,.38)}
.dogpick{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:0 30px!important;margin-top:2px}
#dogCard{width:100%;min-height:0;padding:22px 18px 18px!important;gap:10px!important;border-radius:34px!important;
  border:2px solid rgba(255,225,136,.9)!important;
  background:radial-gradient(circle at 50% 18%,rgba(255,222,132,.55) 0,rgba(255,214,118,.18) 24%,rgba(255,214,118,0) 44%),
             linear-gradient(180deg,rgba(215,185,126,.45),rgba(80,56,28,.28) 42%,rgba(43,29,18,.72) 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,248,209,.14),0 12px 34px rgba(24,11,4,.34)!important;overflow:hidden}
#dogCard:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 22%,transparent 76%,rgba(255,229,167,.05));z-index:0}
#dogCard>*{position:relative;z-index:1}
#dogCard .dog-active{top:14px!important;right:14px!important;padding:7px 14px!important;font-size:12px!important;background:linear-gradient(135deg,#57d879,#29b85a)!important;box-shadow:0 4px 10px rgba(28,111,51,.28)!important}
#dogCard .reference-dog{width:100%!important;height:auto!important;aspect-ratio:1.08!important;max-height:250px!important;object-fit:contain;border-radius:0!important;background:none!important;margin-top:4px}
#dogCard .dog-buehne{width:100%;min-height:220px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
#dogCard .dog-buehne:before{width:min(235px,62vw);height:min(235px,62vw);top:46%;background:radial-gradient(circle,rgba(255,233,162,.92) 0%,rgba(255,214,119,.52) 26%,rgba(255,189,73,.18) 46%,transparent 70%)}
#dogCard .dog-buehne:after{width:min(138px,36vw);height:min(22px,6vw);bottom:10%;background:radial-gradient(ellipse,rgba(125,79,29,.32) 0%,rgba(125,79,29,.06) 56%,transparent 72%)}
#dogCard .dog-funke{opacity:.82;text-shadow:0 0 10px rgba(255,228,148,.85),0 0 22px rgba(255,228,148,.28)}
#dogCard .dog-name{font-size:clamp(29px,8.4vw,54px)!important;line-height:1!important;color:#fff6e8!important;text-shadow:0 2px 0 #7b4d1d,0 5px 16px rgba(0,0,0,.28)!important;margin-top:-2px}
#dogCard .dog-description{font-size:clamp(15px,4.8vw,22px)!important;color:#ffe8be!important;opacity:.98!important;text-align:center;line-height:1.18;font-weight:600}
#dogCard .dog-story{font-size:clamp(13px,4vw,17px)!important;line-height:1.42!important;opacity:.92!important;max-width:30ch;text-align:center;color:#fff9ef!important;font-style:italic;padding:0 6px}
#dogCard .dog-equipment{margin-top:2px;padding:10px 12px!important;border:1px solid rgba(255,238,184,.18)!important;border-radius:18px!important;background:rgba(45,31,18,.16)!important;gap:8px!important}
#dogCard .traegt-wort{font-size:15px;color:#f3e4ca;opacity:.88;margin-right:6px}
#dogCard .traegt-fach{width:36px;height:36px;border-radius:12px;font-size:20px;background:linear-gradient(#4a3b2a,#2b2018);border:1px solid rgba(255,233,175,.18)}
#dogCard .traegt-fach.leer{background:rgba(255,255,255,.06);border-color:rgba(255,238,184,.16)}
#dogCard .dog-ability{width:100%;padding:14px 14px 12px!important;background:linear-gradient(180deg,rgba(154,118,41,.20),rgba(100,73,24,.18))!important;border:1px solid rgba(255,217,122,.42)!important;border-radius:22px!important;text-align:center}
#dogCard .dog-ability>div:first-child{font-size:clamp(19px,5.7vw,28px)!important;color:#ffe59a!important;letter-spacing:-.2px}
#dogCard .dog-ability>div:nth-child(2){font-size:14px!important;margin-top:4px!important;color:#fff2da!important;opacity:.94}
#dogCard .dog-actions{width:100%;display:flex;gap:10px;margin-top:2px}
#dogCard .dog-actions button{font-size:16px!important;min-height:48px!important;border-radius:18px!important;border:1px solid rgba(182,255,191,.35)!important;background:linear-gradient(180deg,#42b564,#2d8d50)!important;color:#ecffef!important;box-shadow:0 4px 0 #20683b,0 10px 18px rgba(20,67,39,.18)!important}
#dogCard .dog-actions span{border-radius:18px!important}
.dognav{position:absolute!important;top:50%!important;transform:translateY(-50%);z-index:3;width:42px!important;height:76px!important;border-radius:20px!important;background:rgba(255,248,224,.18)!important;border:1px solid rgba(255,240,190,.35)!important;color:#fff3d6!important;font-size:40px!important;line-height:1!important;box-shadow:0 8px 18px rgba(31,16,6,.15)}
.dognav:hover{background:rgba(255,248,224,.24)!important}
#dogPrev{left:0!important}#dogNext{right:0!important}
.dogdots{gap:4px!important;margin-top:0}
.dogdots button{width:18px;height:24px}
.dogdots button::before{width:11px!important;height:11px!important;background:rgba(255,255,255,.28)!important}
.dogdots button.on::before{background:#ffd966!important;box-shadow:0 0 16px rgba(255,217,102,.55);transform:scale(1.15)!important}
#garageStartBtn{width:min(100%,395px)!important;font-size:clamp(26px,7.4vw,38px)!important;padding:18px 22px!important;margin-top:0;border-radius:999px!important;box-shadow:inset 0 2px 5px rgba(255,255,255,.45),0 5px 0 #ba7b2e,0 16px 24px rgba(41,22,8,.16)!important}
#garageView .garage-footer{display:flex;gap:12px;justify-content:center;width:100%;margin-top:2px}
#garageView .garage-footer .btn.ghost{flex:1;max-width:180px;font-size:17px!important;padding:14px 18px!important;border-radius:999px!important;background:rgba(240,225,203,.16)!important;border:1px solid rgba(255,244,218,.35)!important;color:#fff6e7!important;box-shadow:0 8px 16px rgba(34,17,7,.12)}
@media(max-width:380px){
  #garageView .title{font-size:clamp(30px,8vw,42px)!important}
  #garageBank{font-size:18px!important}
  .dogpick{padding:0 24px!important}
  #dogCard{padding:18px 14px 16px!important;border-radius:28px!important}
  #dogCard .dog-buehne{min-height:190px}
  #dogCard .dog-name{font-size:clamp(26px,8vw,40px)!important}
  #garageStartBtn{font-size:clamp(22px,7vw,32px)!important;padding:16px 18px!important}
  #garageView .garage-footer .btn.ghost{font-size:15px!important;padding:12px 16px!important}
}
@media(max-height:740px){
  #garageView{padding-top:12px}
  #garageView>.stack.garage-stack{gap:8px!important}
  #dogCard .dog-buehne{min-height:170px}
  #dogCard .reference-dog{max-height:195px!important}
  #dogCard .dog-story{font-size:13px!important}
}


/* ── Hundewahl Mobile-Fix (v311) ───────────────────────────────────
   Ziel: saubere iPhone-Skalierung. Weniger relevante Infos werden auf
   kleinen Displays reduziert, damit die komplette Hundewahl ohne Chaos
   und ohne Ueberlappungen sichtbar bleibt. */
#garageView{padding:12px 12px 18px;overflow-y:auto}
#garageView>.stack.garage-stack{max-width:420px!important;gap:8px!important;padding-bottom:10px}
#garageView .title{font-size:clamp(28px,7.8vw,40px)!important;line-height:1.02;margin-top:0}
#garageBank{font-size:clamp(14px,4.8vw,20px)!important;line-height:1.05}
.dogpick{padding:0 18px!important}
.dognav{width:36px!important;height:68px!important;font-size:34px!important;border-radius:18px!important}
#dogPrev{left:-2px!important}#dogNext{right:-2px!important}
#dogCard{padding:14px 12px 13px!important;gap:7px!important;border-radius:24px!important;min-height:0!important}
#dogCard .dog-active{top:10px!important;right:10px!important;padding:6px 12px!important;font-size:11px!important}
#dogCard .dog-buehne{min-height:142px!important}
#dogCard .dog-buehne:before{width:min(180px,48vw)!important;height:min(180px,48vw)!important;top:44%!important}
#dogCard .dog-buehne:after{width:min(108px,28vw)!important;height:min(18px,4vw)!important;bottom:11%!important}
#dogCard .reference-dog{max-height:150px!important;aspect-ratio:1.18!important;margin-top:0!important}
#dogCard .dog-name{font-size:clamp(24px,7.6vw,34px)!important;margin-top:0!important}
#dogCard .dog-description{font-size:clamp(13px,4.2vw,18px)!important;line-height:1.14!important}
#dogCard .dog-story{font-size:13px!important;line-height:1.32!important;max-width:32ch!important}
#dogCard .dog-equipment{padding:7px 8px!important;border-radius:15px!important;gap:6px!important}
#dogCard .traegt-wort{font-size:13px!important;margin-right:4px}
#dogCard .traegt-fach{width:32px!important;height:32px!important;border-radius:10px!important;font-size:18px!important}
#dogCard .dog-ability{padding:10px 10px 9px!important;border-radius:18px!important}
#dogCard .dog-ability>div:first-child{font-size:clamp(17px,5.3vw,24px)!important}
#dogCard .dog-ability>div:nth-child(2){font-size:12px!important;line-height:1.2!important;margin-top:2px!important}
#dogCard .dog-actions{gap:8px!important}
#dogCard .dog-actions button{min-height:42px!important;font-size:14px!important;border-radius:15px!important}
.dogdots{margin-top:-2px!important;gap:3px!important}
.dogdots button{width:15px!important;height:18px!important}
.dogdots button::before{width:9px!important;height:9px!important}
#garageStartBtn{width:min(100%,390px)!important;font-size:clamp(20px,6.6vw,30px)!important;padding:14px 18px!important;margin-top:0!important}
#garageView .garage-footer{gap:8px!important}
#garageView .garage-footer .btn.ghost{max-width:none!important;font-size:15px!important;padding:12px 14px!important}

@media (max-width:430px) and (orientation:portrait){
  #dogCard .dog-story{display:none!important}
  #garageView{padding:10px 10px 16px}
  #garageView>.stack.garage-stack{gap:7px!important}
  #garageView .title{font-size:clamp(26px,7.2vw,36px)!important}
  #garageBank{font-size:clamp(13px,4.4vw,18px)!important}
  #dogCard{padding:12px 10px 12px!important}
  #dogCard .dog-buehne{min-height:128px!important}
  #dogCard .reference-dog{max-height:132px!important}
  #dogCard .dog-description{font-size:13px!important}
  #garageStartBtn{font-size:clamp(18px,6.2vw,26px)!important;padding:13px 16px!important}
}

@media (max-height:860px){
  #garageView .title{font-size:clamp(26px,7vw,34px)!important}
  #garageBank{font-size:15px!important}
  #dogCard .dog-buehne{min-height:122px!important}
  #dogCard .reference-dog{max-height:122px!important}
}

@media (max-height:760px){
  #dogCard .dog-story{display:none!important}
  #garageView{padding-top:8px}
  #garageView>.stack.garage-stack{gap:6px!important}
  .dogpick{padding:0 16px!important}
  #dogCard{padding:10px 9px 10px!important;border-radius:20px!important;gap:6px!important}
  #dogCard .dog-buehne{min-height:108px!important}
  #dogCard .reference-dog{max-height:104px!important}
  #dogCard .dog-name{font-size:22px!important}
  #dogCard .dog-description{font-size:12px!important}
  #dogCard .dog-equipment{padding:6px 7px!important}
  #dogCard .traegt-fach{width:29px!important;height:29px!important;font-size:16px!important}
  #dogCard .dog-ability{padding:8px 8px 7px!important}
  #dogCard .dog-ability>div:first-child{font-size:16px!important}
  #dogCard .dog-ability>div:nth-child(2){font-size:11px!important}
  #garageStartBtn{font-size:19px!important;padding:12px 14px!important}
  #garageView .garage-footer .btn.ghost{font-size:14px!important;padding:11px 13px!important}
}


/* ── V312: ruhigeres HUD + groessere Hundevorschau ─────────────────
   SERIE ist bewusst aus der sichtbaren UI entfernt. Die interne Logik
   bleibt erhalten, damit Erfolge und Punkte nicht umgebaut werden. */
#finesseStrip,#finesseStrip.hidden{display:none!important}

/* V311 war fuer kleine iPhones zu defensiv und machte den Hund winzig.
   Die Story bleibt mobil draussen; den gewonnenen Platz bekommt der Hund. */
#dogCard .dog-buehne{min-height:168px!important}
#dogCard .reference-dog{max-height:176px!important;aspect-ratio:1.12!important}
@media (max-width:430px) and (orientation:portrait){
  #dogCard .dog-buehne{min-height:156px!important}
  #dogCard .reference-dog{max-height:164px!important}
}
@media (max-height:860px){
  #dogCard .dog-buehne{min-height:148px!important}
  #dogCard .reference-dog{max-height:156px!important}
}
@media (max-height:760px){
  #dogCard .dog-buehne{min-height:132px!important}
  #dogCard .reference-dog{max-height:140px!important}
}


/* v324: Hundevorschau ca. 15 Prozent größer, weiterhin mobil stabil */
#dogCard .reference-dog{max-height:216px!important;aspect-ratio:1.10!important}
@media (max-width:430px) and (orientation:portrait){#dogCard .reference-dog{max-height:198px!important}}
@media (max-height:760px){#dogCard .reference-dog{max-height:168px!important}}


/* ── V327: Clean Hundewahl rollback + subtle polish ────────────────
   Basis ist bewusst V325. Keine Podeste, keine Zusatzpfoten, keine
   schweren Goldrahmen. Nur bessere Hierarchie und etwas mehr Luft. */
#garageView>.stack.garage-stack{gap:8px!important}
#garageView .title{margin-bottom:1px!important}
#garageBank{opacity:.96!important}
#dogCard{padding-top:13px!important;padding-bottom:13px!important}
#dogCard .dog-buehne{margin-bottom:0!important}
#dogCard .dog-name{margin-top:-1px!important}
#dogCard .dog-description{max-width:94%!important}
#dogCard .dog-equipment{margin-top:1px!important}
#dogCard .dog-ability{margin-top:1px!important}
#garageStartBtn{margin-top:2px!important}
@media (max-width:430px) and (orientation:portrait){
  #garageView>.stack.garage-stack{gap:7px!important}
  #dogCard{padding-left:10px!important;padding-right:10px!important}
}


/* ── V334: final responsive scaling pass for garage / dog picker ─────
   Ziel: stabiles iPhone-Scaling ohne Layoutspruenge. Diese Regeln
   kommen bewusst zuletzt und ueberschreiben aeltere mobile Patches. */
#garageView>.stack.garage-stack{width:min(100%,420px)!important}
#garageView .garage-footer{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:nowrap}
#garageView .garage-footer .btn.ghost{min-width:0!important}
#dogCard{border-radius:30px!important}
#dogCard .dog-buehne{min-height:168px!important}
#dogCard .reference-dog{max-height:min(210px,31svh)!important;aspect-ratio:1.10!important}

@media (max-width:430px) and (orientation:portrait){
  #garageView{padding-top:max(8px,env(safe-area-inset-top))!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
  #garageView>.stack.garage-stack{gap:7px!important;width:min(100%,392px)!important}
  .dogpick{padding:0 10px!important;gap:8px!important}
  .dognav{width:34px!important;height:64px!important;font-size:32px!important;border-radius:18px!important}
  #dogCard{padding:12px 10px!important;border-radius:28px!important;gap:6px!important}
  #dogCard .dog-name{font-size:clamp(23px,6.4vw,29px)!important}
  #dogCard .dog-description{font-size:12.5px!important;line-height:1.28!important}
  #dogCard .dog-story{display:none!important}
  #dogCard .dog-buehne{min-height:150px!important}
  #dogCard .reference-dog{max-height:min(188px,30svh)!important}
  #dogCard .dog-equipment{padding:7px 8px!important;border-radius:18px!important}
  #dogCard .traegt-fach{width:34px!important;height:34px!important;font-size:18px!important;border-radius:14px!important}
  #dogCard .dog-ability{padding:8px 9px!important;border-radius:18px!important}
  .dogdots{margin-top:-1px!important}
  #garageView .garage-footer{gap:8px!important;flex-wrap:wrap}
  #garageView .garage-footer .btn.ghost{flex:1 1 calc(50% - 4px)!important;max-width:none!important;font-size:14px!important;padding:10px 12px!important}
  #garageStartBtn{font-size:clamp(18px,5.8vw,24px)!important;padding:12px 14px!important}
}

@media (max-height:760px){
  #garageView>.stack.garage-stack{gap:6px!important}
  .dognav{height:58px!important}
  #dogCard{padding:10px 9px!important}
  #dogCard .dog-buehne{min-height:126px!important}
  #dogCard .reference-dog{max-height:min(156px,28svh)!important}
  #dogCard .dog-story{display:none!important}
  #garageStartBtn{font-size:18px!important;padding:11px 13px!important}
  #garageView .garage-footer .btn.ghost{font-size:13px!important;padding:10px 12px!important}
}


/* V335: aktive Hundepunkte wirklich rund anzeigen */
.dogdots button{background:transparent!important;border-radius:999px!important;box-shadow:none!important}
.dogdots button.on{background:transparent!important;border-radius:999px!important;box-shadow:none!important}
.dogdots button::before{border-radius:50%!important}
.dogdots button.on::before{
  border-radius:50%!important;
  background:#ffd966!important;
  transform:scale(1.18)!important;
  box-shadow:0 0 0 2px rgba(255,217,102,.14),0 0 12px rgba(255,217,102,.85),0 0 20px rgba(255,217,102,.45)!important;
}

/* V370: Combo x2/x3/x4 als dezente transparente Einblendung statt dunkelblau. */
.banner.combo-transparent{
  background:rgba(255,248,240,.30)!important;
  color:#5E7388!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:0 5px 18px rgba(20,45,58,.10)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.60)!important;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}