/* ==========================================================================
   Maulwurfstadt-Umbau 2026: Übungsblock, Terminal-Schublade, HORST-Zeile, Auswahl-Modul
   Gehört zu js/maulz-uebungen.js. Eingebunden in php/head.php (?v= hochzählen bei Änderungen).
   ========================================================================== */

/* ---------------------------------------------------------------- Terminal-Schublade
   Auf Seiten mit <div class="terminal-kasten" data-terminal></div>:
   - der Marker wird zu einer schmalen Leiste im Text ("CyberHQ-Terminal öffnen")
   - unten rechts schwebt ein Knopf, der die Schublade am unteren Fensterrand hochfährt
   - die Schublade (#terminal-schublade) enthält das Terminal als iframe (index.html?embed=1), Höhe ziehbar */

.terminal-kasten {
  margin: 1.5em 0;
  border: 2px solid #212529;
  border-radius: 12px;
  background: #212529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.4em 1em;
  color: #fe9b27;
  font-family: "Bangers", sans-serif;
  font-size: 1.6em;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}
.terminal-kasten:hover { background: #2c3136; }
.terminal-kasten__pfeil { display: inline-block; width: 0.9em; }
.terminal-kasten__titel { flex: 1; white-space: nowrap; }
.terminal-kasten__hinweis {
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: 0.5em;
  letter-spacing: 0;
  color: #bbb;
}

/* schwebender Knopf unten rechts */
#terminal-knopf {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 10000;
  border: 2px solid #fe9b27;
  border-radius: 999px;
  background: #212529;
  color: #fe9b27;
  font-family: "Bangers", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1px;
  padding: 0.35em 1.1em;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
#terminal-knopf:hover { background: #2c3136; }
body.terminal-offen #terminal-knopf { display: none; }

/* die Schublade */
#terminal-schublade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  height: 45vh;              /* Startwert, JS setzt die gemerkte Höhe */
  min-height: 160px;
  max-height: 92vh;
  display: none;
  flex-direction: column;
  background: #212529;
  border-top: 3px solid #fe9b27;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}
body.terminal-offen #terminal-schublade { display: flex; }

#terminal-schublade .schublade__kopf {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.15em 1em;
  color: #fe9b27;
  font-family: "Bangers", sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1px;
  cursor: ns-resize;         /* an der Kopfzeile ziehen = Höhe ändern */
  user-select: none;
  border-bottom: 1px solid #444;
}
#terminal-schublade .schublade__griff {
  width: 48px;
  height: 5px;
  border-radius: 3px;
  background: #666;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}
#terminal-schublade .schublade__titel { flex: 1; }
#terminal-schublade .schublade__kopf button,
#terminal-schublade .schublade__kopf a {
  font-family: "Roboto Mono", "Courier New", monospace;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: #fe9b27;
  background: transparent;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 0.15em 0.6em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
#terminal-schublade .schublade__kopf button:hover,
#terminal-schublade .schublade__kopf a:hover { border-color: #fe9b27; background: #2c3136; }
.main #terminal-schublade a::before { content: none; }   /* kein Weltkugel-Symbol */
#terminal-schublade .schublade__kopf a::before { content: none; }

#terminal-schublade iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #212529;
}
body.terminal-ziehen #terminal-schublade iframe { pointer-events: none; }   /* beim Ziehen schluckt der iframe sonst die Maus */
body.terminal-ziehen { cursor: ns-resize; user-select: none; }

/* Handy: Schublade füllt das ganze Fenster, man sieht entweder Seite oder Terminal */
@media (max-width: 767px) {
  #terminal-schublade { height: 100vh !important; max-height: 100vh; border-top: 0; }
  #terminal-schublade .schublade__kopf { cursor: default; }
  #terminal-schublade .schublade__griff, #terminal-schublade .schublade__groesse { display: none; }
  .terminal-kasten__hinweis { display: none; }
  .terminal-kasten { font-size: 1.3em; }
}
@media (max-width: 1100px) { .terminal-kasten__hinweis { display: none; } }