/* 2Minds - Muehle, Stilbogen.
 * ===========================================================================
 *
 * WARUM DIESE DATEI NEU GESCHRIEBEN WURDE (6.8.2026):
 * Hier standen 607 Zeilen, die .muehle-punkt, .muehle-stein und siebzehn
 * weitere Klassen gestalteten. muehle.js erzeugt aber .mue-linien, .mue-kopf,
 * .mue-fuss - ein anderes Namensschema. Die Datei war damit vollstaendig
 * wirkungslos: eingebunden, fehlerfrei, und ohne ein einziges Element, auf das
 * sie gepasst haette. Was auf dem Schirm zu sehen war, kam aus einem
 * Stilblock IM JavaScript.
 *
 * Entstanden ist das, weil zwei Agenten gleichzeitig gebaut haben - einer die
 * Logik, einer den Stil - und sich auf keine Namen geeinigt haben. Wer so
 * verteilt, muss die Schnittstelle VORHER festlegen; sonst liefern beide
 * fehlerfreie Arbeit ab, die nicht zusammenpasst.
 *
 * Das ist die Fehlerklasse dieses Hauses, eine Ebene tiefer als sonst: nicht
 * "gebaut und unerreichbar", sondern "erreichbar und wirkungslos". Kein
 * bestehender Waechter sieht das - werkzeuge/pruefen.mjs prueft, OB eine Datei
 * eingebunden ist, nicht ob sie etwas trifft.
 *
 * Der Inhalt unten ist der Stil, der tatsaechlich gewirkt hat, wortgleich aus
 * muehle.js herausgeloest. stilSichern() und die Konstante STIL sind dort
 * entfernt - eine Gestaltung, zwei Orte, war der Fehler.
 * ========================================================================== */
.mue { display: flex; flex-direction: column; gap: var(--luft-block); }

.mue-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--luft-liste); flex-wrap: wrap;
}

.mue-stufen {
  display: inline-flex; gap: var(--luft-haar); padding: var(--luft-haar);
  background: var(--flaeche-tief); border-radius: var(--radius);
}
.mue-stufe {
  border: 0; background: transparent; color: var(--text-zweit);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  min-height: 44px; padding: 0 var(--luft-liste);
  border-radius: var(--radius-klein); cursor: pointer;
}
.mue-stufe:hover { color: var(--text); }
.mue-stufe.an { background: var(--flaeche); color: var(--akzent); box-shadow: var(--schatten); }

/* FALLE: die Lagezeile ist mal ein, mal zwei Zeilen lang. Ohne feste
   Mindesthoehe rutscht bei jedem Zug das ganze Brett hoch und runter - und
   der Punkt, auf den man gerade zielt, wandert unter dem Finger weg. */
.mue-lage {
  margin: 0; font-weight: 600; min-height: 3.2em;
  display: flex; align-items: center;
}

.mue-stand {
  display: flex; flex-wrap: wrap; gap: var(--luft-eng) var(--luft-block);
  margin: 0;
}
.mue-stand span { display: inline-flex; align-items: center; gap: var(--luft-haar); }

/* --------------------------------------------------------------- Brett */

.mue-brett {
  position: relative; width: 100%; max-width: 400px;
  margin-inline: auto; aspect-ratio: 1;
}
.mue-linien { position: absolute; inset: 0; width: 100%; height: 100%; }

.mue-punkt {
  position: absolute; transform: translate(-50%, -50%);
  /* 48 Pixel Beruehrungsziel, wie es marke.css fuer diese App festlegt. Der
     engste Abstand zweier Punkte ist ein Sechstel der Brettbreite, also auf
     einem 300er Brett 50 Pixel - die Ziele beruehren sich fast, aber sie
     ueberlappen nie. Groesser geht darum nicht. */
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; padding: 0; background: transparent;
  border-radius: 50%; cursor: pointer;
}

.mue-stein {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--rand-stark); border: 0 solid transparent;
  transition: width var(--dauer) var(--kurve), height var(--dauer) var(--kurve);
}

/* Die beiden Seiten unterscheiden sich in der FORM, nicht nur in der Farbe:
   voll gegen Ring. Marke.css sagt, dass Farbe hier nie allein eine Aussage
   traegt - das gilt auch fuer Spielsteine, und es hilft jedem, der Farben
   schlecht trennt. */
.mue-punkt.ich .mue-stein {
  width: 28px; height: 28px; background: var(--akzent); border: 2px solid var(--akzent);
}
.mue-punkt.er .mue-stein {
  width: 28px; height: 28px; background: var(--flaeche); border: 6px solid var(--text-zweit);
}

.mue-punkt.gewaehlt .mue-stein {
  box-shadow: 0 0 0 4px var(--akzent-sanft), 0 0 0 6px var(--akzent);
}
.mue-punkt.ziel .mue-stein {
  width: 26px; height: 26px; background: transparent;
  border: 3px dashed var(--akzent);
}
.mue-punkt.nehmbar .mue-stein {
  border-color: var(--ernst-tinte);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ernst) 22%, transparent);
}

/* Steine in einer Muehle bekommen einen Ring. Das ist keine Verzierung: es
   ist die Erklaerung dafuer, warum man sie meist nicht nehmen darf. */
.mue-punkt.in-muehle::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 2px solid var(--rand-stark); pointer-events: none;
}

/* Ein eigener Stein, um den herum alles besetzt ist, tritt zurueck. Nicht
   ausgegraut wie etwas Kaputtes - nur leiser, weil er in diesem Zug nichts
   zu bieten hat. */
.mue-punkt.fest .mue-stein { opacity: .5; }

/* Was Mo zuletzt getan hat, bleibt markiert, bis man selbst zieht - nicht
   nur eine Sekunde lang. Wer zwischendurch wegschaut, soll trotzdem sehen,
   was passiert ist. */
.mue-punkt.frisch .mue-stein { box-shadow: 0 0 0 3px var(--hinweis); }
.mue-punkt.frisch-weg .mue-stein {
  width: 22px; height: 22px; background: transparent;
  border: 3px dotted var(--ernst-tinte);
}

.mue-fuss { display: flex; flex-wrap: wrap; gap: var(--luft-eng); }
.mue-sanft { display: none; }
.mue-sanft.da { display: inline-flex; }
.mue-zusage { margin: 0; }

@media screen and (max-width: 560px) {
  .mue-kopf { flex-direction: column; align-items: stretch; }
  .mue-stufen { justify-content: space-between; }
  .mue-stufe { flex: 1; padding: 0 var(--luft-eng); }
  .mue-punkt.ich .mue-stein, .mue-punkt.er .mue-stein { width: 24px; height: 24px; }
  .mue-punkt.er .mue-stein { border-width: 5px; }
  .mue-fuss .knopf { flex: 1; }
}