/* ============================================================
   Farbtest, nur fuer die Vorschau (Vandro)

   Ein Schalter, mit dem sich Farbwelt und Hell/Dunkel auf
   dieser Demo durchspielen lassen. Die Wahl liegt allein im
   Browser dessen, der klickt (localStorage), sie veraendert
   nichts fuer andere Besucher und nichts auf dem Server.

   Bewusst eigene Token mit Praefix --ft-, damit die getesteten
   Paletten das Bedienfeld selbst nicht umfaerben.
   Vor Go-live entfernen: dieses Stylesheet, farbtest.js,
   farbtest-konfig.js und die <!-- VORSCHAU --> Zeilen im HTML.
   ============================================================ */

.ft {
  --ft-flaeche: #16181A;
  --ft-flaeche-2: #202427;
  --ft-schrift: #E7E4DE;
  --ft-schrift-leise: #A9A49B;
  --ft-linie: #33383C;
  --ft-marke: #C8734A;

  position: fixed;
  /* Links unten. Rechts unten sitzt in jeder Demo die Taste
     "zurueck nach oben", die beiden lagen sonst uebereinander. */
  /* --ft-links und --ft-boden setzt die jeweilige Demo, wenn dort ein
     fester Streifen am Rand klebt (Handwerk: Statusband). */
  left: calc(clamp(0.75rem, 2vw, 1.5rem) + var(--ft-links, 0px));
  bottom: calc(clamp(0.75rem, 2vw, 1.5rem) + var(--ft-boden, 0px));
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  /* Sans der jeweiligen Demo, sonst die geerbte Schrift */
  font-family: var(--sans, var(--font-head, var(--ui, inherit)));
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ft-schrift);
  print-color-adjust: exact;
}

.ft-knopf {
  font: inherit;
  letter-spacing: 0.04em;
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--ft-linie);
  border-radius: 3px;
  background: var(--ft-flaeche);
  color: var(--ft-schrift);
  cursor: pointer;
}
.ft-knopf:hover { background: var(--ft-flaeche-2); }
.ft-knopf:focus-visible { outline: 2px solid var(--ft-marke); outline-offset: 2px; }

.ft-tafel {
  width: min(21rem, calc(100vw - 1.5rem));
  max-height: min(30rem, calc(100vh - 6rem));
  overflow-y: auto;
  padding: 1.1rem;
  border: 1px solid var(--ft-linie);
  border-radius: 3px;
  background: var(--ft-flaeche);
  box-shadow: 0 12px 34px rgb(0 0 0 / 34%);
}
.ft[hidden] { display: none; }
.ft-tafel[hidden] { display: none; }

.ft-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ft-kopf h2 { font: inherit; font-size: 0.95rem; letter-spacing: 0.03em; }
.ft-zu {
  font: inherit;
  border: 0;
  background: none;
  color: var(--ft-schrift-leise);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}
.ft-zu:hover { color: var(--ft-schrift); }

.ft-hinweis {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--ft-schrift-leise);
}

.ft-titel {
  display: block;
  margin: 1.05rem 0 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ft-schrift-leise);
}

.ft-reihe { display: flex; gap: 0.4rem; }
.ft-reihe button {
  flex: 1;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.42rem 0.3rem;
  border: 1px solid var(--ft-linie);
  border-radius: 3px;
  background: transparent;
  color: var(--ft-schrift-leise);
  cursor: pointer;
}
.ft-reihe button:hover { color: var(--ft-schrift); }
.ft-reihe button[aria-pressed="true"] {
  background: var(--ft-flaeche-2);
  border-color: var(--ft-marke);
  color: var(--ft-schrift);
}

.ft-liste { display: grid; gap: 0.35rem; }
.ft-liste button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ft-schrift-leise);
  cursor: pointer;
}
.ft-liste button:hover { background: var(--ft-flaeche-2); color: var(--ft-schrift); }
.ft-liste button[aria-pressed="true"] {
  border-color: var(--ft-marke);
  background: var(--ft-flaeche-2);
  color: var(--ft-schrift);
}
.ft-punkte { display: flex; flex: none; }
.ft-punkte span {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ft-flaeche);
}
.ft-punkte span + span { margin-left: -0.28rem; }
.ft-name { display: block; }
.ft-ton { display: block; font-size: 0.75rem; color: var(--ft-schrift-leise); }

.ft-eigen { display: grid; gap: 0.4rem; }
.ft-eigen label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--ft-schrift-leise);
}
.ft-eigen input[type="color"] {
  width: 3.2rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid var(--ft-linie);
  border-radius: 3px;
  background: none;
  cursor: pointer;
}

.ft-zurueck {
  margin-top: 1.05rem;
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.5rem;
  border: 1px solid var(--ft-linie);
  border-radius: 3px;
  background: transparent;
  color: var(--ft-schrift-leise);
  cursor: pointer;
}
.ft-zurueck:hover { color: var(--ft-schrift); background: var(--ft-flaeche-2); }

@media print { .ft { display: none; } }