/* ===== Pink Bistro – das Aussehen vom Spiel ===== */
/* Hier bestimmen wir Farben, Größen und Animationen. */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comic Sans MS', 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #ffdeeb 0%, #fff0f6 60%, #ffe3ec 100%);
  min-height: 100vh;
  color: #862e9c;
  user-select: none;
}

/* ===== Kopfzeile ===== */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* auf schmalen Bildschirmen rutschen die Knöpfe in die nächste Zeile */
  gap: 8px;
  padding: 12px 20px;
  background: #f783ac;
  box-shadow: 0 4px 10px rgba(214, 51, 108, 0.3);
}

h1 {
  color: white;
  font-size: 1.8rem;
  text-shadow: 2px 2px 0 #d6336c;
}

.kopf-rechts {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

#geld-anzeige {
  background: white;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #d6336c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Die Rang-Anzeige (anklicken zeigt den Fortschritt!) */
#rang-anzeige {
  background: linear-gradient(#fff9db, #ffe999);
  border: 2px solid #e0a832;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 1rem;
  font-weight: bold;
  color: #8a5a32;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#rang-anzeige:hover {
  transform: scale(1.05);
}

/* ===== Die Bubble Bucks: eine goldene Münze in einer Seifenblase! ===== */

.bb {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
  border-radius: 50%;
  position: relative;
  background:
    /* der Glanzpunkt oben links auf der Blase: */
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 26%),
    /* die goldene Münze mit dunklerem Rand: */
    radial-gradient(circle at center, #ffd43b 0 32%, #e0a832 32% 45%, rgba(0, 0, 0, 0) 45%),
    /* die zarte blaue Seifenblase drumherum: */
    radial-gradient(circle at center, rgba(190, 230, 255, 0.2) 0 62%, rgba(110, 190, 255, 0.55) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(110, 190, 255, 0.85),
    0 1px 2px rgba(134, 46, 156, 0.25);
}

/* Das kleine "B" auf der Münze */
.bb::after {
  content: 'B';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48em;
  font-weight: bold;
  color: #8a5a32;
}

/* ===== Knöpfe (alle Buttons im Spiel) ===== */

button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background: #e64980;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 #c2255c;
  transition: transform 0.1s;
}

button:hover {
  transform: scale(1.05);
}

button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c2255c;
}

button:disabled {
  background: #ced4da;
  box-shadow: 0 4px 0 #adb5bd;
  cursor: not-allowed;
  transform: none;
}

/* ===== Die Kunden-Serie (euer Highscore!) ===== */

#serie-zeile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.6);
  flex-wrap: wrap;
  font-weight: bold;
}

#serie-anzeige {
  color: #e8590c;
}

#rekord-anzeige {
  color: #8a5a32;
}

.serie-erklaerung {
  font-weight: normal;
  font-size: 0.8rem;
  color: #b197c4;
}

/* Der Schwierigkeits-Umschalter (😊 Einfach / 😈 Schwer) */
#schwierigkeit-knopf {
  margin-left: auto; /* rutscht ganz nach rechts */
  font-size: 0.85rem;
  padding: 7px 14px;
  background: #845ef7;
  box-shadow: 0 4px 0 #5f3dc4;
}

.balken-rahmen {
  width: 200px;
  height: 18px;
  background: white;
  border: 2px solid #d6336c;
  border-radius: 999px;
  overflow: hidden;
}

.balken-fuellung {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f06595, #cc5de8);
  border-radius: 999px;
  transition: width 0.4s;
}

/* ===== Der Café-Raum ===== */

#raum {
  position: relative;
  overflow: hidden; /* damit die Bonus-Blase am Rand sauber verschwindet */
  /* Die gestreifte Tapete: */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 8px, rgba(0, 0, 0, 0) 8px 46px),
    repeating-linear-gradient(90deg, #ffdeeb 0 46px, #ffd0e2 46px 92px);
  /* Dunklere Ecken links und rechts – so wirkt der Raum tiefer: */
  box-shadow:
    inset 50px 0 70px -45px rgba(134, 46, 156, 0.3),
    inset -50px 0 70px -45px rgba(134, 46, 156, 0.3);
}

/* Die Lichterkette ganz oben */
#lichterkette {
  position: absolute;
  top: 6px;
  left: 14%;
  right: 14%;
  display: flex;
  justify-content: space-between;
  border-top: 2px solid rgba(134, 46, 156, 0.25);
  padding-top: 3px;
}

#lichterkette span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: funkel-licht 1.6s infinite alternate;
}

#lichterkette span:nth-child(4n+1) { background: #ff6b8a; box-shadow: 0 0 8px 2px rgba(255, 107, 138, 0.7); }
#lichterkette span:nth-child(4n+2) { background: #ffd43b; box-shadow: 0 0 8px 2px rgba(255, 212, 59, 0.7); }
#lichterkette span:nth-child(4n+3) { background: #b197fc; box-shadow: 0 0 8px 2px rgba(177, 151, 252, 0.7); }
#lichterkette span:nth-child(4n+4) { background: #3bc9db; box-shadow: 0 0 8px 2px rgba(59, 201, 219, 0.7); }
#lichterkette span:nth-child(2n) { animation-delay: 0.8s; }

@keyframes funkel-licht {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Die Lampen, die von der Decke hängen */
.lampe {
  position: absolute;
  top: 0;
  width: 4px;
  height: 34px;
  background: #862e9c;
}

.lampe::after {
  /* Der Lampenschirm */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 26px;
  background: linear-gradient(#e64980, #c2255c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.lampe::before {
  /* Das leuchtende Licht */
  content: '';
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff9db;
  box-shadow: 0 0 14px 6px rgba(255, 224, 102, 0.8);
}

/* Fenster, Uhr, Tafel und Bilder an der Wand */
#deko-zeile {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 30px 10px 14px;
  flex-wrap: wrap;
}

.fenster-halter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fenster {
  position: relative;
  width: 116px;
  height: 88px;
  background: linear-gradient(#a5d8ff, #d0ebff 70%, #b2f2bb);
  border: 6px solid white;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(134, 46, 156, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.fenster::before {
  /* Der senkrechte Fensterbalken */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: white;
  transform: translateX(-50%);
}

.fenster::after {
  /* Der waagerechte Fensterbalken */
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  transform: translateY(-50%);
}

.fenster span {
  position: absolute;
  font-size: 1.1rem;
  z-index: 1;
}

.sonne  { top: 5px; right: 26px; }
.wolke  { bottom: 7px; left: 26px; }
.wolke2 { top: 5px; left: 26px; }
.vogel  { bottom: 7px; right: 26px; }

/* Die Gardinen links und rechts im Fenster */
.gardine {
  position: absolute;
  top: 0;
  bottom: 26%;
  width: 22px;
  background: linear-gradient(180deg, #f783ac, #fcc2d7);
  opacity: 0.95;
  z-index: 2;
}

.gardine.links  { left: 0;  border-radius: 0 0 90% 20%; }
.gardine.rechts { right: 0; border-radius: 0 0 20% 90%; }

/* Die Fensterbank mit Blumen */
.fensterbank {
  width: 132px;
  height: 10px;
  background: linear-gradient(#c98d5c, #8a5a32);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(134, 46, 156, 0.3);
  text-align: center;
}

.fensterbank span {
  font-size: 1rem;
  position: relative;
  top: -17px;
  margin: 0 4px;
}

/* Die Wanduhr */
.wanduhr {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #495057 0 4px, #fffdf5 4px);
  border: 5px solid #8a5a32;
  box-shadow: 0 3px 6px rgba(134, 46, 156, 0.25);
}

.wanduhr::before,
.wanduhr::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom;
  background: #495057;
  border-radius: 2px;
}

.wanduhr::before { width: 3px; height: 12px; transform: translateX(-50%) rotate(40deg); }
.wanduhr::after  { width: 2px; height: 17px; transform: translateX(-50%) rotate(-70deg); }

/* Die Kreidetafel mit den Angeboten */
.tafel {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0 30%, rgba(0, 0, 0, 0) 30%),
    #37474f;
  color: white;
  border: 6px solid #a9744f;
  border-radius: 8px;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.85rem;
  transform: rotate(-2deg);
  box-shadow: 0 3px 8px rgba(134, 46, 156, 0.25);
  min-width: 170px;
}

.tafel b {
  color: #ffd43b;
  font-size: 0.8rem;
}

.tafel i {
  color: #b2f2bb;
  font-size: 0.75rem;
}

.tafel .angebot-zeile {
  margin: 1px 0;
}

/* Die selbst gemalten Bilder müssen auf der Tafel klein sein */
.tafel .wuerfel-bild,
.tafel .broetchen-bild,
.tafel .kuchen-bild {
  width: 18px;
  vertical-align: -4px;
}

/* Das Angebots-Schild in der Sprechblase */
.angebot-schild {
  color: #e8590c;
  font-weight: bold;
}

/* Die Bilder an der Wand */
.bild {
  width: 54px;
  height: 54px;
  background: white;
  border: 6px solid #e0a832;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(134, 46, 156, 0.3), inset 0 0 0 3px #fff3bf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* ===== Der Holzboden mit Tür, Pflanzen und Kunden ===== */

#kunden-bereich {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 30px;
  padding: 18px 110px 60px; /* unten Platz, damit die Kunden nicht hinter dem Mixer verschwinden */
  /* FESTE Höhe – damit nichts hin- und herspringt, wenn Kunden kommen und gehen! */
  height: 330px;
  background: linear-gradient(#b98d5f, #e5bd8e);
  /* Die Fußleiste, wo die Wand auf den Boden trifft: */
  border-top: 7px solid #9c6b3f;
}

/* Der Boden in Perspektive: die Dielen laufen nach hinten zusammen! */
#kunden-bereich .boden {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#kunden-bereich .boden::before {
  content: '';
  position: absolute;
  left: -45%;
  right: -45%;
  top: -90%;
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(111, 70, 38, 0.35) 0 3px, rgba(0, 0, 0, 0) 3px 110px),
    repeating-linear-gradient(0deg, rgba(111, 70, 38, 0.2) 0 3px, rgba(0, 0, 0, 0) 3px 40px),
    linear-gradient(#b98d5f, #e5bd8e);
  /* Der Zaubertrick: die Fläche wird nach hinten gekippt wie ein echter Boden */
  transform: perspective(400px) rotateX(30deg);
  transform-origin: 50% 100%;
}

#kunden-bereich .boden::after {
  /* Der Schatten, den die Wand auf den Boden wirft: */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(rgba(80, 47, 18, 0.4), rgba(0, 0, 0, 0));
}

/* Alles, was auf dem Boden steht, gehört ÜBER den Boden gemalt: */
.tuer, .fussmatte, .pflanze, .kunden-platz {
  position: relative;
  z-index: 1;
}

/* Die Eingangstür steht jetzt AN DER WAND und endet an der Fußleiste */
.tuer {
  position: absolute;
  left: 18px;
  bottom: calc(100% + 1px); /* direkt oberhalb der Fußleiste = auf der Wand */
  width: 74px;
  height: 138px;
  background: linear-gradient(90deg, #a9744f, #8a5a32);
  border: 4px solid #6f4626;
  border-right: 9px solid #5d3a1f; /* die dicke Kante macht die Tür plastisch */
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.12),
    12px 8px 16px -4px rgba(134, 46, 156, 0.35); /* Schatten auf der Wand */
}

/* Die Fußmatte vor der Tür (liegt in Perspektive auf dem Boden) */
.fussmatte {
  position: absolute;
  left: 12px;
  top: 8px;
  width: 96px;
  height: 26px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(90deg, #e64980 0 12px, #f06595 12px 24px);
  opacity: 0.9;
}

.tuer-fenster {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 34px;
  background: linear-gradient(#d0ebff, #a5d8ff);
  border: 3px solid #6f4626;
  border-radius: 6px;
}

.tuer-schild {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: white;
  border: 2px solid #d6336c;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: bold;
  color: #d6336c;
  padding: 1px 5px;
}

.tuer-knauf {
  position: absolute;
  right: 7px;
  top: 78px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd43b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.pflanze {
  font-size: 2.4rem;
  filter: drop-shadow(0 6px 4px rgba(80, 47, 18, 0.45));
}

/* Die Café-Tische mit Gästen im Hintergrund */
.deko-tisch {
  position: absolute;
  z-index: 1;
  pointer-events: none; /* man kann nicht auf sie klicken – sie genießen nur! */
  filter: drop-shadow(0 8px 6px rgba(80, 47, 18, 0.35));
}

/* Je weiter hinten ein Tisch steht, desto kleiner ist er (Perspektive!) */

/* Ecke vorne links: der größte Tisch */
#deko-tisch-1 {
  left: 75px;
  bottom: 32px;
}

#deko-tisch-1 svg {
  width: 250px;
}

/* Ecke vorne rechts: fast genauso groß */
#deko-tisch-2 {
  right: 10px;
  bottom: 36px;
}

#deko-tisch-2 svg {
  width: 245px;
}

/* Hinten Mitte: klein, weit weg */
#deko-tisch-3 {
  left: 50%;
  transform: translateX(-50%);
  bottom: 160px;
}

#deko-tisch-3 svg {
  width: 150px;
}

/* Ecke hinten links (gleich neben der Tür) */
#deko-tisch-4 {
  left: 6px;
  bottom: 152px;
}

#deko-tisch-4 svg {
  width: 150px;
}

/* Ecke hinten rechts */
#deko-tisch-5 {
  right: 6px;
  bottom: 154px;
}

#deko-tisch-5 svg {
  width: 150px;
}

/* Linker Rand, mittlere Entfernung */
#deko-tisch-6 {
  left: 24%;
  bottom: 114px;
}

#deko-tisch-6 svg {
  width: 185px;
}

/* Rechter Rand, mittlere Entfernung */
#deko-tisch-7 {
  right: 24%;
  bottom: 110px;
}

#deko-tisch-7 svg {
  width: 190px;
}

/* Der Kaffee-Dampf steigt gemütlich auf */
.dampf {
  animation: dampfen 1.8s infinite;
  transform-box: fill-box;
}

@keyframes dampfen {
  0%   { opacity: 0;   transform: translateY(2px); }
  35%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateY(-6px); }
}

/* ===== Die Kunden ===== */

.kunden-platz {
  width: 170px;
}

.kunde {
  text-align: center;
  cursor: pointer;
  animation: reinkommen 0.4s;
}

/* Der ganze Mensch wird beim Drüberfahren ein bisschen größer */
.kunde:hover .person {
  transform: scale(1.05);
}

.kunde .person {
  display: block;
  margin: 0 auto;
  transition: transform 0.15s;
}

/* VIP-Kunden leuchten golden! */
.kunde.vip .person {
  filter: drop-shadow(0 0 8px rgba(255, 212, 59, 0.9));
}

.vip-schild {
  color: #e0a832;
  font-weight: bold;
}

.kunde.vip .sprechblase {
  border-color: #ffd43b;
  background: #fff9db;
}

@keyframes reinkommen {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Die Sprechblase über dem Kopf */
.kunde .sprechblase {
  position: relative;
  background: white;
  border: 3px solid #f783ac;
  border-radius: 14px;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  box-shadow: 0 3px 8px rgba(134, 46, 156, 0.2);
}

/* Der kleine Zipfel der Sprechblase, der zum Mund zeigt */
.kunde .sprechblase::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 11px solid transparent;
  border-top-color: #f783ac;
}

.kunde .sprechblase::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
}

.kunde:hover .sprechblase {
  border-color: #d6336c;
}

.kunde .wunsch-preis {
  display: block;
  color: #2f9e44;
  font-weight: bold;
}

/* Bei mehreren Wünschen steht jeder in seiner eigenen Zeile */
.kunde .wunsch-zeile {
  margin: 1px 0;
}

/* Schon servierte Wünsche werden durchgestrichen und abgehakt */
.kunde .wunsch-zeile.erledigt {
  text-decoration: line-through;
  opacity: 0.5;
}

.kunde .geduld-rahmen {
  width: 70%;
  margin: 2px auto 0;
  height: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid rgba(134, 46, 156, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

.kunde .geduld-balken {
  height: 100%;
  width: 100%;
  background: #51cf66;
  border-radius: 999px;
}

.kunde .geduld-balken.mittel { background: #ffa94d; }
.kunde .geduld-balken.knapp  { background: #ff6b6b; }

/* ===== Nachrichten-Zeile ===== */

#nachricht {
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  min-height: 1.6em;
  color: #c2255c;
}

/* ===== Die Theke ===== */

/* Die Theke ist ein festes Möbelstück: oben die Platte, unten die Front.
   Was auf ihr steht, ragt nach oben in den Raum hinein – das macht die Tiefe! */
#theke {
  position: relative;
  z-index: 2; /* die Theke steht VOR dem Raum, näher bei uns */
  height: 240px;
  margin: -1px 0 10px; /* schließt lückenlos an den Boden an */
}

/* Die helle Arbeitsplatte (man schaut leicht von oben drauf) */
#theke::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 118px;
  background: linear-gradient(#fff9fc, #f2d4e2);
  border-top: 3px solid #ffffff;
  box-shadow:
    inset 0 -10px 12px rgba(214, 51, 108, 0.2),
    0 -16px 20px -4px rgba(80, 47, 18, 0.4); /* der Schatten der Theke auf dem Boden */
}

/* Die pinke Vorderseite der Theke (mit Schatten unter der Plattenkante) */
#theke::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 118px;
  bottom: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 35%),
    repeating-linear-gradient(90deg, #faa2c1 0 55px, #f783ac 55px 110px);
  border-top: 5px solid #d6336c;
  box-shadow: 0 6px 12px rgba(134, 46, 156, 0.3);
}

/* Auf dieser unsichtbaren Linie stehen alle Sachen – mitten auf der Platte */
.theken-flaeche {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  z-index: 1;
}

/* Die Knöpfe sind vorne an der Thekenfront angebracht */
.theken-knoepfe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  z-index: 1;
}

.kuchenglocke {
  position: relative;
  width: 68px;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 1.8rem;
}

.kuchenglocke span {
  margin-bottom: 9px;
}

.kuchenglocke::before {
  /* Die Glashaube */
  content: '';
  position: absolute;
  inset: 0 6px 9px;
  border-radius: 40px 40px 6px 6px;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.kuchenglocke::after {
  /* Der Teller darunter */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: #fff0f6;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}

.blumenvase {
  position: relative;
  width: 40px;
  height: 64px;
  display: flex;
  justify-content: center;
}

.blumenvase::before {
  /* Der Vasen-Körper */
  content: '';
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 34px;
  background: linear-gradient(#d0bfff, #9775fa);
  border-radius: 8px 8px 14px 14px;
  box-shadow: inset -4px 0 6px rgba(0, 0, 0, 0.15);
}

.blumenvase span {
  font-size: 1.6rem;
  position: relative;
  top: 2px;
}

/* Zwei Mixer oder zwei Öfen stehen NEBENEINANDER auf der Theke */
#mixer-platz, #ofen-platz {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

/* ===== Der Mixer (eine richtige gemalte Grafik!) ===== */

.mixer {
  cursor: pointer;
  position: relative;
  /* Die Farben der aktuellen Mixer-Stufe: */
  --m1: #ae3ec9;      /* Haupt-Farbe */
  --m2: #7048e8;      /* dunkle Teile */
  --makzent: #e599f7; /* kleine Knöpfe */
}

/* Das "> svg" bedeutet: NUR die große Mixer-Grafik selbst –
   nicht die kleinen Frucht-Bildchen, die im Krug liegen! */
.mixer > svg {
  display: block;
  overflow: visible;
  transition: transform 0.15s;
}

/* Der Schatten, den der Mixer auf die Arbeitsplatte wirft */
.mixer::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -4px;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(134, 46, 156, 0.35), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}

.mixer-koerper      { fill: var(--m1); }
.mixer-dunkel-teil  { fill: var(--m2); }
.mixer-akzent-teil  { fill: var(--makzent); }
.mixer-griff        { stroke: var(--m2); stroke-width: 6; stroke-linecap: round; fill: none; }
.mixer-dial         { fill: white; stroke: var(--m2); stroke-width: 3; }
.mixer-zeiger       { stroke: var(--m2); stroke-width: 3; stroke-linecap: round; }

.mixer-glas {
  fill: rgba(255, 255, 255, 0.45);
  stroke: rgba(134, 46, 156, 0.55);
  stroke-width: 2.5;
  transition: fill 0.2s;
}

.mixer-glanz { stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round; }

.mixer-sterne { fill: #fff; }

/* Der Strudel und das Funkeln sind nur manchmal zu sehen */
.mixer-strudel, .mixer-funkeln { display: none; }

.mixer.mixt .mixer-strudel {
  display: block;
  animation: drehen 0.5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.mixer.fertig .mixer-funkeln {
  display: block;
  animation: huepfen 0.7s infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes drehen {
  to { transform: rotate(360deg); }
}

/* Die Bläschen, die beim Mixen aufsteigen */
.blase { fill: rgba(255, 255, 255, 0.75); display: none; }

.mixer.mixt .blase {
  display: block;
  animation: blubbern 1.1s infinite;
  transform-box: fill-box;
}

.blase.b2 { animation-delay: 0.35s; }
.blase.b3 { animation-delay: 0.7s; }

@keyframes blubbern {
  from { transform: translateY(0);     opacity: 0.9; }
  to   { transform: translateY(-34px); opacity: 0; }
}

/* --- Jede Mixer-Stufe hat ihre eigenen Farben! --- */

/* Stufe 2: das schicke pinke Modell */
.mixer.stufe-2 { --m1: #f06595; --m2: #c2255c; --makzent: #ffdeeb; }

/* Stufe 3: das türkise Profi-Modell */
.mixer.stufe-3 { --m1: #3bc9db; --m2: #0b7285; --makzent: #c5f6fa; }

/* Stufe 4: das goldene Luxus-Modell */
.mixer.stufe-4 { --m1: #ffd43b; --m2: #e8590c; --makzent: #fff3bf; }

/* Stufe 5: der REGENBOGEN-SUPER-MIXER! */
.mixer.stufe-5 { --m2: #9c36b5; --makzent: #ffffff; }
.mixer.stufe-5 .mixer-koerper { fill: url(#regenbogen); }
.mixer.stufe-5 > svg { animation: glitzern 2s infinite alternate; }

@keyframes glitzern {
  from { filter: drop-shadow(0 0 5px rgba(204, 93, 232, 0.7)); }
  to   { filter: drop-shadow(0 0 15px rgba(34, 184, 207, 0.9)); }
}

/* Beim Mixen wackelt der ganze Mixer */
.mixer.mixt > svg { animation: wackeln 0.15s infinite; }
.mixer.stufe-5.mixt > svg { animation: wackeln 0.15s infinite, glitzern 2s infinite alternate; }

@keyframes wackeln {
  0%   { transform: translateX(-3px) rotate(-1.5deg); }
  50%  { transform: translateX(3px)  rotate(1.5deg); }
  100% { transform: translateX(-3px) rotate(-1.5deg); }
}

/* Wenn eine Frucht über dem Mixer schwebt, leuchtet er grün */
.mixer.zieh-ziel > svg { transform: scale(1.08); }
.mixer.zieh-ziel .mixer-glas {
  fill: rgba(216, 245, 162, 0.75);
  stroke: #2f9e44;
}

/* Der Mix-Fortschritt liegt als kleiner Balken vor dem Mixer auf der Platte */
.mixer-balken-rahmen {
  width: 100px;
  height: 12px;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
}

.mixer-balken {
  background: linear-gradient(90deg, #51cf66, #94d82d);
}

/* Zwei Schüsseln stehen auch nebeneinander */
#schuessel-platz {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

/* Die Farben der Schüssel (ändern sich mit jeder Stufe!) */
.schuessel { --s1: #e64980; --s2: #c2255c; --s3: #a61e4d; }
.schuessel.stufe-2 { --s1: #cc5de8; --s2: #9c36b5; --s3: #862e9c; }
.schuessel.stufe-3 { --s1: #22b8cf; --s2: #0b7285; --s3: #095c6b; }
.schuessel.stufe-4 { --s1: #f08c00; --s2: #d9480f; --s3: #b03a0c; }
.schuessel.stufe-5 { --s2: #9c36b5; --s3: #862e9c; }

.schuessel-koerper { fill: var(--s1); }
.schuessel-fuss    { fill: var(--s2); }
.schuessel-innen   { fill: var(--s3); }
.schuessel-sterne  { fill: white; }

.schuessel.stufe-5 .schuessel-koerper { fill: url(#regenbogen); }
.schuessel.stufe-5 > svg { animation: glitzern 2s infinite alternate; }

/* ===== Die Teigschüssel ===== */

.schuessel {
  position: relative;
  cursor: pointer;
}

.schuessel > svg {
  display: block;
  overflow: visible;
}

/* Beim Kneten wackelt die Schüssel */
.schuessel.knetet > svg {
  animation: wackeln 0.2s infinite;
}

.schuessel::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -4px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(134, 46, 156, 0.35), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}

.schuessel-balken-rahmen {
  width: 76px;
  height: 12px;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
}

.schuessel-balken {
  background: linear-gradient(90deg, #f2dfb3, #d9be8c);
}

/* ===== Der Backofen ===== */

.ofen {
  position: relative;
  cursor: pointer;
}

.ofen > svg {
  display: block;
  overflow: visible;
}

.ofen-korpus     { fill: #ad4b7c; }
.ofen-leiste     { fill: #862e5c; }

/* --- Jede Ofen-Stufe hat ihre eigenen Farben! --- */
.ofen.stufe-2 .ofen-korpus { fill: #e64980; }
.ofen.stufe-2 .ofen-leiste { fill: #c2255c; }
.ofen.stufe-3 .ofen-korpus { fill: #22b8cf; }
.ofen.stufe-3 .ofen-leiste { fill: #0b7285; }
.ofen.stufe-4 .ofen-korpus { fill: #f08c00; }
.ofen.stufe-4 .ofen-leiste { fill: #d9480f; }
.ofen.stufe-5 .ofen-korpus { fill: url(#regenbogen); }
.ofen.stufe-5 .ofen-leiste { fill: #9c36b5; }
.ofen.stufe-5 > svg { animation: glitzern 2s infinite alternate; }
.ofen-knopf-deko { fill: #ffdeeb; stroke: #5e1e40; stroke-width: 1; }
.ofen-anzeige    { fill: #2b8a3e; opacity: 0.85; }
.ofen-griff      { fill: #ffdeeb; }

.ofen-tuer {
  fill: rgba(45, 20, 35, 0.8);
  stroke: #ffdeeb;
  stroke-width: 2.5;
  transition: fill 0.3s;
}

/* Beim Backen glüht der Ofen orange! */
.ofen.backt .ofen-tuer {
  fill: rgba(255, 130, 40, 0.75);
  animation: gluehen 0.8s infinite alternate;
}

.ofen.fertig .ofen-tuer {
  fill: rgba(255, 200, 80, 0.5);
}

/* ALARM! Kurz vorm Verbrennen blinkt die Tür knallrot: */
.ofen.gleich-verbrannt .ofen-tuer {
  animation: verbrenn-alarm 0.35s infinite alternate;
}

@keyframes verbrenn-alarm {
  from { fill: rgba(255, 200, 80, 0.5);  stroke: #ffdeeb; }
  to   { fill: rgba(230, 30, 30, 0.85);  stroke: #ff6b6b; }
}

/* Verbrannt: alles schwarz und verraucht... */
.ofen.verbrannt .ofen-tuer {
  fill: rgba(20, 20, 20, 0.92);
}

@keyframes gluehen {
  from { fill: rgba(255, 110, 30, 0.65); }
  to   { fill: rgba(255, 170, 60, 0.9); }
}

/* Wenn Gebäck über dem Ofen schwebt, leuchtet er grün */
.ofen.zieh-ziel > svg { transform: scale(1.08); }
.ofen.zieh-ziel .ofen-tuer {
  fill: rgba(216, 245, 162, 0.6);
  stroke: #2f9e44;
}

/* Der Schatten unter dem Ofen */
.ofen::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -4px;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(134, 46, 156, 0.35), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}

.ofen-balken-rahmen {
  width: 90px;
  height: 12px;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
}

.ofen-balken {
  background: linear-gradient(90deg, #ffa94d, #ff6b6b);
}

/* Der Warn-Balken läuft rückwärts und ist knallrot */
.ofen-balken.warnung {
  background: #e03131;
  transition: width 0.15s linear;
}

/* Was durch die Glastür im Ofen zu sehen ist */
.ofen-inhalt {
  position: absolute;
  top: 32px;
  left: 14px;
  right: 14px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  overflow: hidden; /* alles bleibt hinter der Glastür! */
  pointer-events: none; /* Klicks gehen durch zum Ofen */
}

/* Die selbst gemalten Sachen (Brötchen, Kuchen, Muffins, Brot, Crêpes) in verschiedenen Größen */
.ofen-inhalt .broetchen-bild, .ofen-inhalt .kuchen-bild, .ofen-inhalt .brot-bild, .ofen-inhalt .crepe-bild { width: 34px; }
.teller .broetchen-bild, .teller .kuchen-bild, .teller .brot-bild, .teller .crepe-bild { width: 34px; }
.sprechblase .broetchen-bild, .sprechblase .kuchen-bild, .sprechblase .brot-bild, .sprechblase .crepe-bild { width: 26px; vertical-align: -7px; }
.laden-info .broetchen-bild, .laden-info .kuchen-bild, .laden-info .brot-bild, .laden-info .crepe-bild { width: 24px; vertical-align: -6px; }
.wird-zu .broetchen-bild, .wird-zu .kuchen-bild, .wird-zu .brot-bild, .wird-zu .crepe-bild { width: 17px; }
.tafel .brot-bild, .tafel .crepe-bild { width: 18px; vertical-align: -4px; }

/* ===== Die Teller für fertiges Gebäck ===== */

#teller-platz {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 70px;
}

.teller {
  position: relative;
  width: 64px;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.teller::after {
  /* der weiße Teller */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: radial-gradient(ellipse at center, #ffffff 40%, #dee2e6 100%);
  border-radius: 50%;
  box-shadow: 0 3px 4px rgba(134, 46, 156, 0.3);
}

.teller span {
  font-size: 1.9rem;
  position: relative;
  z-index: 1;
  margin-bottom: 5px;
}

/* ===== Die Becher (auch richtige Grafiken!) ===== */

#becher-platz {
  min-width: 160px;
  height: 118px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
}

.becher {
  position: relative;
}

.becher svg {
  display: block;
  overflow: visible;
}

/* Auch jeder Becher wirft einen kleinen Schatten */
.becher::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(134, 46, 156, 0.35), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
}

.becher-glas {
  fill: rgba(255, 255, 255, 0.55);
  stroke: #d6336c;
  stroke-width: 3;
}

.becher-rand  { fill: #d6336c; }
.becher-glanz { stroke: rgba(255, 255, 255, 0.9); stroke-width: 3; stroke-linecap: round; }

/* Der Saft füllt sich langsam von unten */
.saft-schicht {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform 0.6s ease-out;
}

.becher-svg.voll .saft-schicht {
  transform: scaleY(1);
}

.strohhalm-icon {
  display: inline-block;
  width: 6px;
  height: 18px;
  background: repeating-linear-gradient(45deg, #ffdeeb 0 4px, white 4px 8px);
  border-radius: 3px;
  transform: rotate(12deg);
  vertical-align: middle;
}

/* ===== Mülleimer ===== */

#muell-knopf {
  font-size: 1.8rem;
  padding: 12px 16px;
  background: #868e96;
  box-shadow: 0 4px 0 #495057;
}

/* Der Mülleimer im Wegwerf-Modus: knallrot! */
#muell-knopf.aktiv {
  background: #e03131;
  box-shadow: 0 4px 0 #a51111;
}

/* Im Wegwerf-Modus zeigen rote gestrichelte Rahmen, was man anklicken kann */
body.muell-an .mixer,
body.muell-an .ofen,
body.muell-an .schuessel,
body.muell-an .becher,
body.muell-an .teller {
  outline: 3px dashed #e03131;
  outline-offset: 4px;
  border-radius: 10px;
  cursor: pointer;
}

/* ===== Das Frucht-Regal (ein richtiges Holzregal!) ===== */

/* Regal und Vitrinen stehen in einer Reihe nebeneinander */
#regale-zeile {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap; /* auf schmalen Bildschirmen rutschen sie untereinander */
  margin: 14px;
}

#regal-brett, #vitrine-brett, #kuchen-brett, #brot-brett, #crepes-brett {
  flex: 1 1 280px;
  max-width: 460px;
  background: linear-gradient(#c98d5c, #b07845);
  border: 6px solid #8a5a32;
  border-radius: 16px;
  padding: 10px 16px 16px;
  box-shadow: 0 6px 12px rgba(134, 46, 156, 0.2);
}

#regal-titel, #vitrine-titel, #kuchen-titel, #brot-titel, #crepes-titel {
  text-align: center;
  color: #fff3e0;
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: 1px 1px 0 #8a5a32;
  margin-bottom: 8px;
}

#regal, #vitrine, #kuchen-vitrine, #brot-vitrine, #crepes-vitrine {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px;
  flex-wrap: wrap;
  /* Das helle Regalbrett, auf dem die Früchte stehen: */
  background: #e8c19a;
  border-radius: 10px;
  /* Innen-Schatten oben + eine dicke Vorderkante unten = das Brett wirkt tief: */
  box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.25);
  border-bottom: 9px solid #c99e6f;
}

.frucht-knopf {
  position: relative;
}

/* Jede Frucht wirft einen Schatten auf das Regalbrett */
.frucht-knopf::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9px;
  height: 7px;
  background: radial-gradient(ellipse at center, rgba(80, 47, 18, 0.4), rgba(0, 0, 0, 0) 70%);
}

.frucht-knopf {
  font-size: 2rem;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: white;
  border: 3px solid #faa2c1;
  box-shadow: 0 4px 0 #f783ac;
  padding: 0;
  touch-action: none; /* wichtig, damit man auch mit dem Finger ziehen kann */
}

.frucht-knopf:hover {
  border-color: #d6336c;
}

.frucht-knopf .frucht-name {
  display: block;
  font-size: 0.6rem;
  color: #862e9c;
}

.frucht-knopf .teig-bild {
  display: block;
  margin: 2px auto 0;
}

/* Die Wassermelonen-Würfel passen sich überall in der Größe an */
.frucht-knopf .wuerfel-bild {
  display: block;
  margin: 4px auto 0;
}

.sprechblase .wuerfel-bild,
.laden-info .wuerfel-bild {
  width: 24px;
  vertical-align: -6px;
}

/* Die Früchte, die unten im Mixer-Krug liegen (über der Grafik) */
.mixer-fruechte {
  position: absolute;
  top: 56px;
  left: 24px;
  right: 30px;
  height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  font-size: 1.2rem;
  overflow: hidden; /* nichts darf aus dem Krug herausragen! */
  pointer-events: none; /* Klicks gehen durch zum Mixer */
}

.mixer-fruechte .wuerfel-bild {
  width: 26px;
  flex-shrink: 0;
}

/* Das Mini-Bild in der Ecke zeigt, was aus dem Teig wird */
.frucht-knopf .wird-zu {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 0.85rem;
}


.zieh-geist svg {
  width: 46px;
  height: 46px;
}

/* ===== Der Laden und die Preisliste ===== */

.versteckt {
  display: none !important;
}

#laden, #feier, #preise, #pause, #raenge {
  position: fixed;
  inset: 0;
  background: rgba(134, 46, 156, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#laden-fenster, #feier-fenster, #preise-fenster, #pause-fenster, #raenge-fenster {
  background: white;
  border: 5px solid #e64980;
  border-radius: 24px;
  padding: 24px;
  width: min(440px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
}

#laden-fenster h2, #feier-fenster h2, #preise-fenster h2, #pause-fenster h2, #raenge-fenster h2 {
  margin-bottom: 6px;
}

/* Das Schließen-Kreuz oben in der Ecke – es KLEBT beim Scrollen oben,
   damit man nie bis ganz nach unten zum "Zurück"-Knopf muss! */
.fenster-zu {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  background: #fcc2d7;
  color: #a61e4d;
  box-shadow: 0 3px 0 #e64980;
}

.fenster-zu:hover {
  background: #e64980;
  color: white;
}

/* Der Rang, auf dem man gerade steht, leuchtet golden */
.laden-zeile.rang-aktuell {
  background: linear-gradient(90deg, #fff9db, #ffe999);
  border-color: #e0a832;
}

.rang-hinweis {
  font-size: 0.8rem;
  font-weight: bold;
  color: #8a5a32;
  text-align: right;
}

#pause-fenster p {
  margin-bottom: 16px;
}

.pause-hinweis {
  font-size: 0.85rem;
  color: #b197c4;
  margin-bottom: 12px;
}

.laden-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff0f6;
  border: 2px solid #fcc2d7;
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.laden-zeile .laden-info {
  font-size: 0.95rem;
}

.laden-zeile .fertig-haken {
  font-size: 1.3rem;
}

/* Noch gesperrte Sachen in der Preisliste sehen blasser aus: */
.laden-zeile.gesperrt {
  opacity: 0.55;
}

.laden-zeile.bonus-zeile {
  background: #fff9db;
  border-color: #ffd43b;
}

/* ===== Die Feier ===== */

#feier-fenster p {
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.feier-emojis {
  font-size: 1.6rem;
  animation: huepfen 0.8s infinite alternate;
}

@keyframes huepfen {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

.konfetti {
  position: fixed;
  top: -40px;
  font-size: 1.6rem;
  animation: fallen linear forwards;
  z-index: 11;
  pointer-events: none;
}

@keyframes fallen {
  to { transform: translateY(110vh) rotate(360deg); }
}

/* ===== Bei Pause friert WIRKLICH alles ein ===== */
/* (auch Mixer-Wackeln, fliegende Blasen und blinkende Lichter) */

body.pause-an * {
  animation-play-state: paused !important;
}

/* ===== Die fliegende Bonus-Blase ===== */

.bonus-blase {
  position: absolute;
  left: -60px;
  z-index: 3;
  font-size: 1.9rem; /* die Größe vom Münz-Symbol darin */
  cursor: pointer;
  padding: 10px; /* etwas mehr Klick-Fläche zum leichteren Fangen */
  animation: quer-fliegen 17s linear forwards; /* die Dauer wird im Spiel zufällig verändert */
}

/* Die Blase tanzt unregelmäßig hoch und runter – wie eine echte Seifenblase! */
.bonus-blase .schweb {
  display: inline-block;
  animation: blasen-tanz 16s ease-in-out forwards;
}

/* Und zusätzlich wippt sie noch ganz leicht */
.bonus-blase .bb {
  animation: blasen-wippen 1.6s ease-in-out infinite alternate;
}

.bonus-blase:hover .bb {
  box-shadow:
    inset 0 0 0 1.5px rgba(110, 190, 255, 0.85),
    0 0 14px 4px rgba(255, 212, 59, 0.8); /* goldenes Leuchten beim Zielen */
}

@keyframes quer-fliegen {
  to { transform: translateX(calc(100vw + 140px)); }
}

@keyframes blasen-tanz {
  0%   { transform: translateY(0)     rotate(0deg); }
  15%  { transform: translateY(-30px) rotate(6deg); }
  30%  { transform: translateY(-6px)  rotate(-5deg); }
  48%  { transform: translateY(-42px) rotate(4deg); }
  63%  { transform: translateY(-16px) rotate(-6deg); }
  82%  { transform: translateY(-48px) rotate(5deg); }
  100% { transform: translateY(-22px) rotate(0deg); }
}

@keyframes blasen-wippen {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

/* ===== Der Frucht-Geist, der beim Ziehen der Maus folgt ===== */

.zieh-geist {
  position: fixed;
  font-size: 2.4rem;
  pointer-events: none; /* damit man "durch ihn hindurch" loslassen kann */
  z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(134, 46, 156, 0.4));
}

/* ===== Schweben (das "+10 💰", das nach oben fliegt) ===== */

.schwebe-geld {
  position: fixed;
  font-size: 1.4rem;
  font-weight: bold;
  color: #2f9e44;
  animation: hochschweben 1.2s forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes hochschweben {
  to { transform: translateY(-60px); opacity: 0; }
}

/* ===== Wackel-Animation bei Fehlern ===== */

.schuettel {
  animation: schuetteln 0.4s;
}

@keyframes schuetteln {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

/* Der Neu-anfangen-Knopf oben in der Leiste (extra unauffällig,
   damit man ihn nicht aus Versehen drückt!) */
#reset-knopf {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  border: 2px solid rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  padding: 8px 12px;
}

#reset-knopf:hover {
  background: #e03131;
  border-color: #a51111;
}


/* ===== Anpassung an verschiedene Bildschirme (Responsive Design!) ===== */

/* Auf mittleren Bildschirmen (iPad) und kleinen Bildschirmen (Handy) wird
   der ganze Deko-Bereich RADIKAL eingedampft – er ist ja nur Optik!
   Alles Wichtige rutscht nach oben, damit man NICHT scrollen muss.
   Auf großen Computer-Bildschirmen bleibt alles wie gehabt.
   (Die Regel greift auf schmalen Bildschirmen UND auf Touch-Geräten –
   "pointer: coarse" bedeutet: Man bedient mit dem Finger!) */
@media (max-width: 1100px), (pointer: coarse) and (max-width: 1400px) {

  /* Die ganze Wand-Deko verschwindet – nur die Angebots-Tafel bleibt,
     denn die braucht man ja zum Spielen: */
  .deko-tisch, .lampe, #lichterkette, .fenster-halter, .wanduhr, .bild,
  .tuer, .fussmatte, #kunden-bereich .pflanze {
    display: none;
  }

  /* Die Angebotstafel schwebt oben in der MITTE des Raums – spart eine ganze
     Zeile, und die Ecken bleiben frei für die Sprechblasen der Kunden: */
  #deko-zeile {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    padding: 0;
    z-index: 2;
  }

  .tafel {
    transform: none;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-width: 3px;
  }

  /* Die Hinweis-Zeile schwebt über dem Raum statt Platz zu belegen: */
  #nachricht {
    height: 0;
    min-height: 0;
    overflow: visible;
    position: relative;
    z-index: 6;
    font-size: 0.95rem;
  }

  /* Die Kunden werden etwas kleiner und der Boden ganz flach: */
  .kunde .person {
    width: 74px;
  }

  /* Die Sprechblase wandert NEBEN den Kunden – das spart eine ganze Etage!
     (Kunde und Blase stehen in einem unsichtbaren Gitter nebeneinander.) */
  .kunde {
    display: grid;
    grid-template-columns: 84px auto;
    grid-template-areas:
      "person blase"
      "balken blase";
    align-items: center;
    column-gap: 10px;
  }

  .kunde .person {
    grid-area: person;
    margin: 0 auto;
  }

  .kunde .sprechblase {
    grid-area: blase;
    margin-bottom: 0;
    max-width: 175px;
    font-size: 0.8rem;
  }

  .kunde .geduld-rahmen {
    grid-area: balken;
    width: 84px;
    margin: 2px auto 0;
  }

  /* Der Blasen-Zipfel zeigt jetzt nach LINKS auf den Kunden: */
  .kunde .sprechblase::before {
    top: 50%;
    left: -21px;
    transform: translateY(-50%);
    border: 11px solid transparent;
    border-right-color: #f783ac;
    border-top-color: transparent;
  }

  .kunde .sprechblase::after {
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: white;
    border-top-color: transparent;
  }

  .kunden-platz {
    width: 280px;
    /* Die Kunden stehen VOR den Geräten, damit nichts sie verdeckt: */
    z-index: 3;
  }

  #kunden-bereich {
    height: 168px;
    padding: 2px 24px 6px;
    /* Die beiden Kunden rücken an die Ränder – in der Mitte ragen ja die Geräte hoch: */
    justify-content: space-between;
  }

  /* Die Theke wird niedriger: */
  #theke {
    height: 150px;
    margin-bottom: 2px;
  }

  #theke::before {
    height: 72px;
  }

  #theke::after {
    top: 72px;
  }

  .theken-flaeche {
    top: 46px;
    gap: 16px;
  }

  .theken-knoepfe {
    bottom: 8px;
    gap: 10px;
  }

  .theken-knoepfe button {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  /* Kopfzeile und Serien-Zeile werden schlanker: */
  header {
    padding: 4px 10px;
  }

  h1 {
    font-size: 1.15rem;
  }

  header button {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  #geld-anzeige {
    font-size: 1rem;
    padding: 5px 12px;
  }

  #rang-anzeige {
    font-size: 0.85rem;
    padding: 5px 10px;
  }

  #serie-zeile {
    padding: 3px 10px;
    gap: 12px;
    font-size: 0.9rem;
  }

  #schwierigkeit-knopf {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  .serie-erklaerung {
    display: none; /* der Erklär-Satz braucht zu viel Platz */
  }

  /* Regal und Vitrinen werden kompakter: */
  #regale-zeile {
    margin: 8px;
    gap: 8px;
  }

  #regal-brett, #vitrine-brett, #kuchen-brett, #brot-brett, #crepes-brett {
    padding: 6px 10px 10px;
  }

  #regal-titel, #vitrine-titel, #kuchen-titel, #brot-titel, #crepes-titel {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }

  #regal, #vitrine, #kuchen-vitrine, #brot-vitrine, #crepes-vitrine {
    gap: 8px;
    padding: 6px;
  }

  .frucht-knopf {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    border-radius: 12px;
  }

  .frucht-knopf .frucht-name {
    font-size: 0.45rem;
  }
}

/* ===== Der Startbildschirm ===== */

#startbildschirm {
  position: fixed;
  inset: 0;
  z-index: 15; /* über allem – sogar über den Laden-Fenstern */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #ffdeeb 0%, #fcc2d7 60%, #faa2c1 100%);
  text-align: center;
  padding: 20px;
}

/* Die große Blume wippt sanft – wie im Titel, nur riesig! */
.start-blume {
  font-size: 7rem;
  line-height: 1;
  animation: huepfen 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 14px rgba(214, 51, 108, 0.35));
}

.start-titel {
  font-size: 3rem;
  color: white;
  text-shadow: 3px 3px 0 #d6336c, 0 8px 18px rgba(134, 46, 156, 0.35);
  margin-bottom: 8px;
}

/* Der Start-Knopf und der Ehren-Schriftzug stehen NEBENEINANDER: */
.start-zeile {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

#start-knopf {
  font-size: 1.5rem;
  padding: 16px 36px;
  background: linear-gradient(#f06595, #d6336c);
  box-shadow: 0 6px 0 #a61e4d, 0 10px 20px rgba(134, 46, 156, 0.4);
}

#start-knopf:hover {
  transform: scale(1.06);
}

.start-credit {
  font-size: 1.05rem;
  font-weight: bold;
  color: #a61e4d;
  font-style: italic;
  text-align: left;
}

/* Die Blume darf weiterwippen, obwohl das Spiel hinter dem
   Startbildschirm auf Pause steht: */
body.pause-an .start-blume {
  animation-play-state: running !important;
}

/* ===== Das Pause-Menü (Schwierigkeit + Neustart wohnen jetzt hier) ===== */

#pause-menue {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#pause-reset {
  background: white;
  color: #e03131;
  border: 2px solid #e03131;
  box-shadow: none;
}

#pause-reset:hover {
  background: #e03131;
  color: white;
}

/* ===== Die Handy-Ansicht (Konzept E: Boden-Navigation + Zutaten-Tabs) ===== */

/* Am Computer und iPad sind die Handy-Teile unsichtbar: */
#handy-nav, #zutaten-tabs, #spickzettel {
  display: none;
}

/* Auf schmalen (Hochkant-)Bildschirmen wird das Spiel zur Handy-App:
   Unten die Boden-Navigation, oben ENTWEDER das Café ODER die Küche. */
@media (max-width: 700px) {

  /* Unten muss Platz für die Boden-Navigation bleiben: */
  body {
    padding-bottom: 66px;
  }

  /* --- Die zwei Haupt-Ansichten: Café ODER Küche --- */
  body.handy-cafe #spickzettel,
  body.handy-cafe #theke,
  body.handy-cafe #zutaten-tabs,
  body.handy-cafe #regale-zeile {
    display: none;
  }

  body.handy-kueche #raum {
    display: none;
  }

  body.handy-kueche #spickzettel {
    display: flex;
  }

  body.handy-kueche #zutaten-tabs {
    display: flex;
  }

  /* --- Die Boden-Navigation --- */
  #handy-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: #f783ac;
    border-top: 3px solid #d6336c;
    box-shadow: 0 -4px 10px rgba(214, 51, 108, 0.3);
    /* der kleine Zusatz unten ist für Handys mit Wisch-Balken: */
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
  }

  #handy-nav button {
    flex: 1 1 0;
    min-width: 0; /* alle FÜNF Knöpfe müssen nebeneinander passen! */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 12px;
    color: white;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: bold;
    padding: 3px 0 4px;
  }

  #handy-nav button span {
    font-size: 1.35rem;
  }

  #handy-nav button.aktiv {
    background: rgba(255, 255, 255, 0.35);
    text-shadow: 1px 1px 0 #d6336c;
  }

  /* --- Die Kopfzeile wird ganz schlank: Rang, Geld, Pause --- */
  #preise-knopf, #laden-knopf, #reset-knopf, #schwierigkeit-knopf {
    display: none; /* das alles wohnt jetzt in der Navigation bzw. im Pause-Menü */
  }

  h1 {
    display: none; /* der Titel muss weichen, damit der Pause-Knopf Platz hat */
  }

  header {
    padding: 4px 8px;
    gap: 6px;
  }

  .kopf-rechts {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
  }

  /* Alles etwas kompakter, damit Rang, Geld, Blume UND Pause
     nebeneinander in EINE Zeile passen: */
  header button {
    padding: 5px 9px;
  }

  #rang-anzeige {
    font-size: 0.78rem;
    padding: 4px 8px;
  }

  #geld-anzeige {
    font-size: 0.9rem;
    padding: 4px 9px;
  }

  /* Die Hinweis-Zeile bekommt ihre EIGENE Zeile zurück –
     sonst legt sich die Schrift über den Bestell-Spickzettel! */
  #nachricht {
    position: static;
    height: auto;
    min-height: 1.5em;
    overflow: hidden;
    font-size: 0.85rem;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.7);
  }

  /* --- Das Café: die Kunden stehen UNTEREINANDER --- */
  /* Der Raum füllt den ganzen Bildschirm zwischen Kopfzeile und Navigation: */
  #kunden-bereich {
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: calc(100vh - 176px);
    min-height: 340px;
    padding: 52px 8px 10px; /* oben Platz für die Angebots-Tafel */
    gap: 4px;
  }

  .kunden-platz {
    width: auto;
    min-width: 280px;
  }

  /* --- Die Küche: die Theke wird ein wischbarer Geräte-Streifen --- */
  #theke {
    height: auto;
    margin: 0 0 4px;
  }

  #theke::before, #theke::after {
    display: none; /* Platte und Front zeichnen wir hier einfacher */
  }

  .kuchenglocke, .blumenvase {
    display: none; /* die Deko braucht auf dem Handy zu viel Platz */
  }

  .theken-flaeche {
    position: static;
    height: auto;
    overflow-x: auto; /* breite Gerätereihen kann man einfach wischen! */
    justify-content: flex-start;
    align-items: flex-end;
    gap: 20px;
    /* unten extra Platz, denn die Fortschritts-Balken hängen UNTER den Geräten: */
    padding: 10px 14px 34px;
    background: linear-gradient(#fff9fc, #f2d4e2);
    border-top: 3px solid white;
    border-bottom: 5px solid #d6336c;
    zoom: 0.8; /* die Geräte etwas kleiner, damit mehr auf den Bildschirm passt */
  }

  .theken-flaeche > * {
    flex-shrink: 0; /* die Geräte bleiben groß – wischen statt quetschen! */
  }

  .theken-knoepfe {
    position: static;
    padding: 8px 6px;
    gap: 8px;
    background: repeating-linear-gradient(90deg, #faa2c1 0 55px, #f783ac 55px 110px);
  }

  /* --- Der Bestell-Spickzettel über der Theke --- */
  #spickzettel {
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    min-height: 34px;
    padding: 3px 10px;
    background: #fff9db;
    border-bottom: 3px solid #e0a832;
    font-size: 0.85rem;
    font-weight: bold;
  }

  .zettel-kunde {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    background: white;
    border: 2px solid #ffd43b;
    border-radius: 10px;
    padding: 1px 8px;
  }

  #spickzettel svg {
    height: 20px;
    width: auto;
  }

  /* Die Früchte EINES Smoothies kleben direkt aneinander (🍓🍌) –
     nur der Punkt trennt zwei verschiedene Wünsche voneinander: */
  .zettel-wunsch {
    display: inline-flex;
    align-items: center;
  }

  .zettel-punkt {
    color: #b197c4;
    font-weight: bold;
    margin: 0 4px; /* mit etwas Abstand, damit man die Wünsche gut trennt */
  }

  /* --- Die Zutaten-Tabs unter dem Regal --- */
  #zutaten-tabs {
    justify-content: center;
    gap: 6px;
    padding: 0 8px 4px;
  }

  #zutaten-tabs button {
    font-size: 1.15rem;
    padding: 5px 15px;
    border-radius: 6px 6px 14px 14px;
    border: 3px solid #8a5a32;
    border-top: none;
    background: #e8c39a;
    box-shadow: none;
  }

  #zutaten-tabs button.aktiv {
    background: linear-gradient(#c98d5c, #b07845);
  }

  /* Auf dem Handy sieht man nur das ausgewählte Brett: */
  #regale-zeile {
    margin: 6px 6px 0;
  }

  #regale-zeile > div {
    display: none;
  }

  #regale-zeile > div.tab-aktiv {
    display: block;
    flex: 1 1 auto;
    min-width: 0; /* WICHTIG: sonst wächst das Brett über den Bildschirm hinaus! */
    max-width: 100%;
  }

  /* Viele Früchte? Dann wischt man im Brett zur Seite: */
  #regal, #vitrine, #kuchen-vitrine, #brot-vitrine, #crepes-vitrine {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
  }
}