/* EulandaXremote - dieselbe Gestaltungssprache wie www.eulanda.eu.
   Die Werte sind von dort übernommen, nicht nachgemischt: Flächen, Schrift,
   Marke, Radien und die Bewegungskurven stehen dort in :root. Wer sie hier
   ändert, lässt die beiden Auftritte auseinanderlaufen. */

:root {
  --bg:          #0a0c10;
  --bg-2:        #0f1218;
  --surface:     #141922;
  --surface-2:   #1a212c;
  --surface-3:   #212a37;
  --line:        #242e3c;
  --line-soft:   #1a222d;

  --ink:         #e9eef6;
  --ink-2:       #a8b6c9;
  --ink-3:       #6d7c91;
  --ink-4:       #4a5768;

  --brand:       #4d94ec;
  --brand-lift:  #85b8f7;
  --brand-ghost: rgba(77, 148, 236, .12);
  --accent:      #45d3bf;
  --gold:        #e8b055;
  --danger:      #e8695a;

  --wrap:        980px;
  --r-s:         8px;
  --r-m:         14px;

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --shadow-s:    0 2px 8px rgba(0,0,0,.35);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --font-tight: "Segoe UI Variable Display", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Das feine Raster der Website - sehr zurückhaltend, es soll nur
   verhindern, dass die Fläche tot wirkt. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 56px 56px;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.4rem; }

/* ---------- Kopf ---------- */
.head {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10,12,16,.82);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.head-inner { display: flex; align-items: center; gap: .8rem; height: 66px; }
/* So nah wie möglich am Homepage-Kopf: dieselbe Wortmarke mit Stern,
   derselbe Untertitel, dieselbe Trennlinie. Der ganze Block führt zur
   Startseite. */
.brand {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; flex-shrink: 0;
  transition: opacity .2s var(--ease);
}
.brand:hover { opacity: .85; }
.brand-word { height: 34px; width: auto; display: block; }
.brand-sub {
  font-size: .74rem; font-weight: 600; letter-spacing: .085em;
  color: var(--ink-3);
  padding-left: .9rem; border-left: 1px solid var(--line);
  line-height: 1.28; max-width: 10rem;
}
.head-right { margin-left: auto; display: flex; align-items: center; gap: .4rem;
              color: var(--ink-3); font-size: .84rem; }

/* Hausstandard: Pfeil links, dann "Zurück". Der Pfeil rueckt beim
   Zeigen ein wenig nach links - dieselbe Geste wie im Browser. */
.btn-back span:first-child { font-size: 1.1em; line-height: 1;
                             transition: transform .18s var(--ease); }
.btn-back:hover span:first-child { transform: translateX(-2px); }

main { padding-block: clamp(2rem, 5vw, 3.6rem) 4rem; }

/* ---------- Schrift ---------- */
h1 {
  font-family: var(--font-tight);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.02em;
  margin: .2em 0 .5em;
}
h2.section-head {
  font-family: var(--font-tight);
  font-size: 1.15rem; letter-spacing: -.01em;
  margin: 2.4rem 0 .9rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft);
}
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 600; color: var(--ink-3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand));
}
.lede { color: var(--ink-2); max-width: 62ch; }
.small { font-size: .88rem; color: var(--ink-3); margin-top: 1.6rem; }
.hint { font-size: .88rem; color: var(--ink-3); margin: .8rem 0 0; min-height: 1.2em; }
.hint.bad { color: var(--danger); }
.hint.good { color: var(--accent); }

/* ---------- Karten ---------- */
.card {
  padding: 1.7rem;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: border-color .35s, background .35s;
}
.card-narrow { max-width: 460px; margin-top: 1.6rem; }

/* ---------- Felder ---------- */
.field-label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: .5rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.field {
  width: 100%; padding: .78em 1em;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-s);
  font-family: var(--font); font-size: 1rem;
  transition: border-color .22s, box-shadow .22s;
}
.field:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ghost);
}
/* Das Vorwort steht NEBEN dem Feld, nicht darin. Sonst tippt es jemand
   mit - und R, E und M gehören selbst zum Zeichenvorrat, also entstünde
   REM-REM... Draußen kann es niemand versehentlich eingeben, und man sieht
   trotzdem die vollständige Form. */
.code-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--bg-2);
  overflow: hidden;
}
.code-row:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ghost);
}
.code-prefix {
  display: flex; align-items: center;
  padding: 0 .2em 0 1em;
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: .12em;
  color: var(--ink-3);
  user-select: none;
}
.code-row .field {
  border: 0; background: none; border-radius: 0;
  padding-left: 0;
}
.code-row .field:focus { box-shadow: none; }

.field-code {
  font-family: var(--mono); font-size: 1.15rem;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Knöpfe (Form und Verlauf wie auf der Website) ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .78em 1.45em;
  border-radius: 7px; border: 1px solid transparent;
  font-family: var(--font); font-size: .95rem; font-weight: 600;
  letter-spacing: -.005em; cursor: pointer;
  transition: transform .22s var(--ease), background .22s, border-color .22s,
              box-shadow .22s, color .22s;
  white-space: nowrap;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform: translateX(-115%);
  transition: transform .75s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(115%); }

.btn-primary {
  background: linear-gradient(180deg, #5a9dee, var(--brand) 62%, #3f83d8);
  color: #fff; border-color: rgba(160, 200, 250, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.3),
              0 6px 16px -10px rgba(77,148,236,.75);
}
.btn-primary:hover { background: linear-gradient(180deg, #6aa8f2, #5099ef 62%, #4189e0); }

.btn-ghost {
  background: rgba(255,255,255,.04);
  border-color: var(--line); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.btn-ghost:hover { background: rgba(255,255,255,.075); border-color: #384657; }

.btn-quiet {
  background: transparent; color: var(--ink-2);
  padding-inline: .5em; border-radius: 6px;
}
.btn-quiet::after { display: none; }
.btn-quiet:hover { color: var(--ink); background: rgba(255,255,255,.045); }

.btn-danger { color: var(--danger); }
.btn-danger:hover { color: #ff8878; background: rgba(232,105,90,.1); }

.btn-sm { padding: .5em 1em; font-size: .85rem; border-radius: 6px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-top: 1.2rem; }

/* ---------- Ablegefläche ---------- */
.dropzone {
  margin-top: 1.8rem; border-style: dashed; border-color: var(--line);
  text-align: center; padding: 2.6rem 1.6rem;
  transition: border-color .25s, background .25s;
}
.dropzone.ready { border-color: var(--brand); background: var(--brand-ghost); }
.dropzone-big { font-family: var(--font-tight); font-size: 1.2rem; }
.dropzone-small { color: var(--ink-3); font-size: .86rem; margin: .5rem 0; }
.dropzone-inner .btn-row { justify-content: center; }

/* ---------- Zeilen (Dateien und Ablagen) ---------- */
.row {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-s); margin-bottom: .6rem;
}
.row:hover { border-color: var(--line); background: var(--surface-2); }
.row-main { flex: 1; min-width: 0; }
.row-name {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub { font-size: .82rem; color: var(--ink-3); margin-top: .15rem; }
.row-tools { display: flex; gap: .35rem; flex: none; }
.empty { color: var(--ink-3); font-size: .92rem; padding: .8rem 0; }

.tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .16em .5em; border-radius: 4px; margin-left: .5rem;
  background: var(--brand-ghost); color: var(--brand-lift);
}
.tag-warn { background: rgba(232,176,85,.14); color: var(--gold); }

/* ---------- Fortschritt ---------- */
.job { padding: .95rem 1.15rem; background: var(--surface); border: 1px solid var(--line-soft);
        border-radius: var(--r-s); margin-bottom: .6rem; }
.job-head { display: flex; gap: 1rem; align-items: baseline; }
.job-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-label { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); flex: none; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-3); margin-top: .7rem; overflow: hidden; }
.bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-lift));
  transition: width .25s var(--ease);
}
.job.bad .bar-fill { background: var(--danger); }

/* ---------- Code-Ausgabe ---------- */
.codebox {
  margin-top: 1.1rem; padding: 1rem 1.15rem;
  background: var(--bg-2); border: 1px solid var(--brand);
  border-radius: var(--r-s);
}
.codebox-value {
  font-family: var(--mono); font-size: 1.3rem; letter-spacing: .08em;
  color: var(--brand-lift); user-select: all;
}
.codebox-note { font-size: .82rem; color: var(--ink-3); margin-top: .45rem; }

.foot {
  border-top: 1px solid var(--line-soft);
  padding-block: 1.6rem; color: var(--ink-4); font-size: .82rem;
}

@media (max-width: 560px) {
  .brand-sub { display: none; }
  .row { flex-wrap: wrap; }
  .row-tools { width: 100%; justify-content: flex-end; }
}

/* ---------- Banner der laufenden Sitzung ---------- */
.banner {
  position: sticky; top: 66px; z-index: 9;
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1.4rem;
  background: linear-gradient(90deg, rgba(77,148,236,.16), rgba(69,211,191,.10));
  border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--ink);
}
.banner .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(69,211,191,.6);
  animation: puls 2s infinite;
}
@keyframes puls {
  70%  { box-shadow: 0 0 0 9px rgba(69,211,191,0); }
  100% { box-shadow: 0 0 0 0 rgba(69,211,191,0); }
}
.banner .btn { margin-left: auto; }

/* ---------- Der Spiegel ---------- */
#mirror {
  display: block; width: 100%; height: calc(100vh - 66px - 45px);
  border: 0; background: #fff;
}
.wait {
  position: absolute; top: 50%; left: 0; right: 0;
  text-align: center; color: var(--ink-3); font-size: .95rem;
  pointer-events: none;
}

/* ---------- Zuschauen: der Spiegel bekommt das ganze Fenster ----------
   Auf einem Tablett kostete die Seite selbst rund ein Viertel der Höhe:
   Kopfzeile mit Logo, Statuszeile, Ränder - und im Spiegel steht das Logo
   der Gegenseite dann ein zweites Mal. Beim Zusehen zählt aber nur die
   Gegenseite; unsere eigene Seite hat sich herauszuhalten.

   dvh statt vh ist auf Android wichtig: vh rechnet mit der Adresszeile,
   die beim Rollen verschwindet, und der Spiegel wäre dauerhaft zu hoch. */
body.watching { overflow: hidden; }
body.watching .head { display: none; }
/* Der Spiegel zeigt das GANZE Fenster des Vorführers, verkleinert
   eingepasst - nicht einen Ausschnitt davon. Sonst sieht der Betrachter
   Widgets nicht, die beim Vorführer rechts liegen, und rollen kann er
   nicht. Größe und Maßstab setzt der Spielende, deshalb steht hier nur
   der Ursprung. */
body.watching #watchPanel {
  position: fixed; inset: 0;
  overflow: hidden;
  background: #1b2430;
}
body.watching #mirror { transform-origin: 0 0; }

/* Dritter Riegel: ein durchsichtiges Blatt über dem Spiegel. Eine
   Berührung erreicht das gespiegelte Dokument damit gar nicht erst - kein
   Feld bekommt Fokus, keine Tastatur kommt hoch, nichts wird verschoben.
   Die Bedienung liegt mit z-index 20 darüber und bleibt erreichbar. */
body.watching #mirrorShield {
  position: fixed; inset: 0;
  z-index: 10;
  background: transparent;
}

/* Von der Bedienung bleibt ein einziges Zeichen übrig: ein grosses X zum
   Verlassen, schwebend über dem Bild. Punkt und Wortlaut "Verbunden"
   entfallen - dass die Leitung steht, sieht man daran, dass ein Bild da
   ist. Eine Zeile, die das noch einmal behauptet, kostet nur Höhe. */
body.watching #watchPanel .banner {
  position: fixed; top: .5rem; right: .5rem; left: auto;
  z-index: 20;
  padding: 0; gap: .4rem;
  background: none; border: 0; box-shadow: none;
}
body.watching #watchPanel .banner .dot,
body.watching #watchPanel .banner #watchText { display: none; }

/* Schwarz gefüllt mit weissem Rand und weissem Zeichen. Der Knopf liegt
   über einem fremden Bild, dessen Farbe niemand kennt - hell auf hell war
   auf dem Tablett nicht zu erkennen. Diese Paarung trägt auf jedem
   Untergrund und in jedem Thema. */
body.watching #watchPanel .banner .btn {
  margin: 0;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
body.watching #watchPanel .banner .btn:hover,
body.watching #watchPanel .banner .btn:focus-visible {
  background: #000;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 2px 14px rgba(0, 0, 0, .5);
}
/* Der Wortlaut bleibt im Knopf stehen, damit Vorleseprogramme ihn finden -
   sichtbar ist nur das Zeichen. */
body.watching #watchPanel .banner .btn span { display: none; }
body.watching #watchPanel .banner .btn::before {
  font-size: 28px; line-height: 1; font-weight: 300;
}
body.watching #watchPanel #btnLeave::before { content: '×'; }
body.watching #watchPanel #btnFull::before  { content: '⤢'; font-size: 22px; }
body.watching #watchPanel #btnFull[data-full]::before { content: '⤡'; }

/* Ein Knopf mit hidden bleibt weg. Die Regel oben setzt display:flex und
   schlaegt damit das eingebaute [hidden]{display:none} - ohne diese Zeile
   stand der Vollbild-Knopf auch dort, wo er nichts zu suchen hat. */
body.watching #watchPanel .banner .btn[hidden] { display: none; }

/* Sehr schmale Geräte: dieselbe Grösse, nur näher an die Ecke. */
@media (max-width: 480px) {
  body.watching #watchPanel .banner { top: .35rem; right: .35rem; }
}

/* ---------- Testflaeche des Durchstichs ---------- */
.demo-card { max-width: 560px; margin-top: 1.6rem; }
.probe-list { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.probe-list li { margin: .25rem 0; font-size: .92rem; }