/* Wesen-Hafen: Startbildschirm mit den Wesen und das Menü eines Wesens.
   Bewusst ruhig: wenige Elemente, große Tippflächen, Fachfarbe als einziger
   Akzent (Leitprinzip adhs-klarheit-prinzip). Alles Bewegte hängt an
   body.ruhemodus -- ist Bewegung aus, bleibt hier alles still. */

#buehne:has(.schirm-wesenhafen:not([hidden])) { max-width: 64rem; }
#buehne:has(.schirm-wesen-menue:not([hidden])) { max-width: 40rem; }

.schirm-wesenhafen,
.schirm-wesen-menue { justify-content: flex-start; gap: 1.1rem; }

/* --- Startbildschirm ---------------------------------------------------- */

.wh-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; position: relative; }
.wh-kopf h1 {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kreide);
}
.wh-frage { margin: 0; font-size: 1.15rem; color: var(--stahl-600); text-align: center; }

.wh-wesen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1rem;
}
.wh-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .8rem .7rem .9rem;
  border: 3px solid color-mix(in srgb, var(--fachfarbe) 45%, white);
  border-radius: 1.2rem;
  background:
    radial-gradient(80% 70% at 50% 100%, color-mix(in srgb, var(--fachfarbe) 22%, transparent), transparent 75%),
    var(--stahl-100);
  color: var(--kreide);
  font: inherit;
  cursor: pointer;
  min-height: 11rem;
  transition: transform .15s ease, border-color .15s ease;
}
.wh-karte:hover, .wh-karte:focus-visible { border-color: var(--fachfarbe); transform: translateY(-2px); outline: none; }
.wh-karte:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--fachfarbe); }
.wh-karte-bild { display: block; width: 100%; padding: 0; }
.wh-karte-bild .katze-bild { max-height: 8rem; margin: 0 auto; }
.wh-karte b { font-family: var(--schrift-anzeige); font-size: 1.15rem; letter-spacing: .04em; }
.wh-karte small { color: var(--stahl-500); font-size: .85rem; }
.wh-karte-punkt {
  position: absolute; top: .6rem; right: .7rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--fachfarbe);
  box-shadow: 0 0 0 3px #fff;
}
body:not(.ruhemodus) .wh-karte.wh-regt .wh-karte-bild { animation: wh-regt 1.2s ease-in-out; }
@keyframes wh-regt {
  20% { transform: translateY(-6px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(2deg); }
  75% { transform: translateY(-3px); }
}

/* Das Zahnrad traegt das Wort dabei, damit die Einstellungen (u. a. Klassenstufe) nicht versteckt sind. */
.wh-kopf #knopf-einstellungen { width: auto; flex: none; padding-inline: .8rem; }

.wh-unten { display: grid; gap: .7rem; justify-items: center; margin-top: .5rem; }

/* --- Menü eines Wesens --------------------------------------------------- */

.wm-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.wm-kopf #wm-fach {
  font-family: var(--schrift-anzeige);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fachfarbe);
  font-weight: 700;
}

.wm-buehne {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 15rem;
  padding: 1rem 1rem .4rem;
  border: 3px solid color-mix(in srgb, var(--fachfarbe) 45%, white);
  border-radius: 1.4rem;
  background:
    radial-gradient(90% 80% at 50% 100%, color-mix(in srgb, var(--fachfarbe) 28%, transparent), transparent 75%),
    var(--stahl-100);
  cursor: pointer;
  overflow: hidden;
}
.wm-buehne:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--fachfarbe); }
.wm-wesen { width: min(100%, 17rem); position: relative; z-index: 1; padding: 0; }
.wm-wesen .katze-bild { max-height: 15rem; margin: 0 auto; }
.wm-revier { position: absolute; left: 0; right: 0; bottom: 0; height: 3.4rem; opacity: .9; }
.wm-revier .revier { width: 100%; height: 100%; }

.wm-blase {
  margin: 0;
  min-height: 3.2em;
  padding: .7rem 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--fachfarbe) 12%, white);
  color: var(--kreide);
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
}

.wm-steckbrief { display: grid; gap: .3rem; justify-items: center; text-align: center; }
.wm-steckbrief h2 { margin: 0; font-family: var(--schrift-anzeige); font-size: 1.7rem; letter-spacing: .05em; text-transform: uppercase; }
.wm-stufe { color: var(--fachfarbe); font-weight: 700; }
.wm-balkenrahmen { width: min(100%, 18rem); height: .6rem; border-radius: 1rem; background: var(--stahl-300); overflow: hidden; }
.wm-balkenrahmen span { display: block; height: 100%; border-radius: 1rem; background: var(--fachfarbe); transition: width .4s ease; }
.wm-steckbrief small { color: var(--stahl-500); }

.wm-pflege { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.wm-pflegeknopf {
  position: relative;
  display: grid; justify-items: center; gap: .1rem;
  padding: .7rem .3rem;
  min-height: 4.4rem;
  border: 3px solid color-mix(in srgb, var(--fachfarbe) 40%, white);
  border-radius: 1rem;
  background: var(--stahl-100);
  color: var(--kreide);
  font: inherit; font-weight: 700;
  cursor: pointer;
}
.wm-pflegeknopf i { font-style: normal; font-size: 1.4rem; line-height: 1; }
.wm-pflegeknopf.aktiv { background: color-mix(in srgb, var(--fachfarbe) 16%, white); border-color: var(--fachfarbe); }
.wm-pflegeknopf:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--fachfarbe); }
.wm-zahl {
  position: absolute; top: -.45rem; right: -.2rem;
  min-width: 1.5rem; padding: .1rem .35rem;
  border-radius: 1rem;
  background: var(--fachfarbe); color: #fff;
  font-size: .8rem; text-align: center;
}

.wm-pflegefeld {
  display: grid; gap: .6rem;
  padding: .8rem;
  border: 2px dashed color-mix(in srgb, var(--fachfarbe) 55%, white);
  border-radius: 1rem;
  background: var(--stahl-100);
}
.wm-hinweis { margin: 0; color: var(--stahl-600); }
.wm-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.wm-gabe {
  display: flex; align-items: center; gap: .5rem; justify-content: center; flex-wrap: wrap;
  padding: .6rem .7rem; min-height: 3rem;
  border: 2px solid var(--fachfarbe); border-radius: .9rem;
  background: #fff; color: var(--kreide);
  font: inherit; font-weight: 650; cursor: pointer;
}
.wm-gabe svg { width: 1.6rem; height: 1.6rem; }
.wm-gabe em { font-style: normal; color: var(--stahl-500); font-size: .85rem; }
.wm-gabe:disabled { opacity: .55; cursor: default; border-style: dashed; }
.wm-gabe:not(:disabled):hover, .wm-gabe:focus-visible { background: color-mix(in srgb, var(--fachfarbe) 14%, white); outline: none; }
.wm-kann { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.wm-chip { padding: .2rem .6rem; border-radius: 1rem; background: color-mix(in srgb, var(--fachfarbe) 14%, white); font-size: .88rem; }

.wm-themenbereich { display: grid; gap: .6rem; }
.wm-themenbereich h2 { margin: 0; font-size: 1.15rem; color: var(--stahl-600); }
.wm-themen { display: grid; gap: .5rem; }
.wm-thema-zeile { display: flex; gap: .5rem; align-items: stretch; }
.wm-thema {
  flex: 1;
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; min-height: 3.4rem;
  border: 3px solid color-mix(in srgb, var(--fachfarbe) 40%, white);
  border-radius: 1rem;
  background: var(--stahl-100);
  color: var(--kreide);
  font: inherit; font-size: 1.05rem; font-weight: 650; text-align: left;
  cursor: pointer;
}
.wm-thema i { font-style: normal; width: 1.4rem; text-align: center; color: var(--fachfarbe); }
.wm-thema em { margin-left: auto; font-style: normal; color: var(--gold); }
.wm-thema small { margin-left: auto; color: var(--stahl-500); font-weight: 400; }
.wm-thema:hover, .wm-thema:focus-visible { border-color: var(--fachfarbe); outline: none; }
.wm-thema:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--fachfarbe); }
.wm-thema-alle { background: color-mix(in srgb, var(--fachfarbe) 12%, white); border-style: dashed; }
.wm-thema.stand-sitzt { background: color-mix(in srgb, var(--signal) 10%, white); }
.wm-anleitung {
  width: 3.4rem; border: 3px solid var(--stahl-300); border-radius: 1rem;
  background: var(--stahl-100); color: var(--stahl-600);
  font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer;
}

body:not(.ruhemodus) .wm-wesen.wesen-begruesst .katze-bild,
body:not(.ruhemodus) .wm-buehne .wesen-begruesst .katze-bild { animation: wesen-begruesst .65s ease-out; }

@media (max-width: 30rem) {
  .wh-wesen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .wh-karte { min-height: 9.5rem; padding: .6rem .4rem .7rem; }
  .wh-karte-bild .katze-bild { max-height: 6.2rem; }
}

/* --- Bewegung: das Wesen wandert, kommt zum Kind, faengt Futter ------------ */

.wm-wesen {
  transform: translateX(var(--wx, 0px)) rotate(var(--wneigung, 0deg));
  transition: transform var(--wdauer, 700ms) ease-in-out;
}
.wm-wesen { scale: var(--wblick, 1) 1; }
@media (prefers-reduced-motion: reduce) { .wm-wesen { transition: none; } }
@media (prefers-reduced-motion: no-preference) { .wm-wesen.wesen-geht .katze-bild { animation: wesen-huepft .38s ease-in-out infinite; }
.wm-wesen.wesen-frisst .katze-bild { animation: wesen-frisst .22s ease-in-out 2; } }
@keyframes wesen-huepft { 50% { translate: 0 -9px; } }
@keyframes wesen-frisst { 50% { translate: 0 4px; scale: 1.05 .94; } }

.wm-dinge { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.wm-ding {
  position: absolute; bottom: .35rem; translate: -50% 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--fachfarbe) 55%, white);
  background: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; pointer-events: auto;
}
.wm-ding:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--fachfarbe); }
body:not(.ruhemodus) .wm-ding-benutzt { animation: wh-regt 1.2s ease-in-out; }
.wm-futterstueck {
  position: absolute; top: 0; width: 1.8rem; height: 1.8rem; translate: -50% 0;
  animation: wm-fall .85s cubic-bezier(.4, 0, .7, 1) forwards;
}
@keyframes wm-fall { from { top: -2rem; } to { top: calc(100% - 4.5rem); } }
@media (prefers-reduced-motion: reduce) { .wm-futterstueck { animation: none; top: calc(100% - 4.5rem); } }