/*
 * CyberHQ-Online-Terminal – eigenes CSS
 * ======================================
 * Zusammengeführt aus dem alten clean-blog.css (Start Bootstrap "Clean Blog", MIT-Lizenz –
 * nur die tatsächlich benutzten Regeln: Navigation, Kopf, Footer) und dem alten styles.css.
 * Neu: Schrift Jura lokal (fonts/, OFL-Lizenz), Vorschlagsliste, Sandbox-Hinweis.
 * Bootstrap 4 liefert nur noch das Raster und die Tabellen-Klassen (css/bootstrap.min.css).
 */

/* ---------------------------------------------------------- Schrift (lokal) */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jura-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jura-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------- Grundlagen (aus clean-blog.css) */
body {
  font-size: 20px;
  color: #fe9b27;
  background-color: #212529;
}
p { line-height: 1.5; margin: 30px 0; }
p a { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
a { color: #212529; transition: all 0.2s; }
a:focus, a:hover { color: #0085A1; }
::selection { color: #fff; background: #0085A1; text-shadow: none; }

/* ---------------------------------------------------------- Navigation */
#mainNav {
  position: absolute;
  width: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: transparent;
  z-index: 10;
}
#mainNav .navbar-nav > li.nav-item > a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  color: #9c8468;
}
#mainNav .navbar-nav > li.nav-item > a:focus,
#mainNav .navbar-nav > li.nav-item > a:hover { color: rgba(255, 255, 255, 0.8); }

/* ---------------------------------------------------------- Kopf mit Skyline */
header.masthead {
  position: relative;
  margin-bottom: 0;
  background-image: url("../img/skyline.png");
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: moveskyline 415s linear infinite;
}
@keyframes moveskyline {
  from { background-position: 0 0; }
  to   { background-position: -2300px 0; }
}
header.masthead .overlay {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  background-color: #212529; opacity: 0.5;
}
header.masthead .page-heading { padding: 45px 0; text-align: center; color: white; position: relative; }
header.masthead .page-heading h1 { margin-top: 0; }
@media (min-width: 768px) { header.masthead .page-heading h1 { font-size: 80px; } }
h1 {
  font-family: 'Jura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: #9c8468;
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;   /* "embossy" */
}

/* ---------------------------------------------------------- Hauptbereich */
.hauptcontentcontainer { border-top: 1px dotted #9c8468; }
.lieferte { margin: 0; }
pre, textarea { font-family: monospace; }

#eingabebereich { position: relative; }   /* Bezugspunkt für die Vorschlagsliste */
textarea#tasql {
  outline: none;
  width: 100%;
  max-width: 100%;
  padding: 8px 2px 2px 22px;
  margin: 5px 1px 3px 0;
  border: 1px solid #dddddd;
  background-color: white;
  color: black;
  transition: all 0.3s ease-in-out;
}
textarea#tasql:focus {          /* glühendes Eingabefeld */
  box-shadow: 0 0 30px rgba(138, 255, 174, 1);
  border: 1px solid rgba(138, 255, 174, 0.4);
  background-color: black;
  color: #66ff66;
}
.werkzeugleiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin-top: 4px; }
.werkzeug { font-size: 0.7em; color: #d8c3a5; background: #2c3136; border: 1px solid #9c8468; margin-right: 6px; }
.werkzeug:hover, .werkzeug[aria-expanded="true"] { color: #fff; background: #408c99; border-color: #599bb3; }
#hilfeKnopf { width: 2.2em; font-weight: bold; }
#hilfe { font-size: 0.75em; color: #d8c3a5; background: #2c3136; border: 1px solid #9c8468; border-radius: 6px; padding: 4px 14px; margin: 8px 0 0; }
#hilfe p { margin: 8px 0; line-height: 1.7; }
#hilfe code { color: #66ff66; }
kbd {
  display: inline-block; padding: 0 6px; margin: 0 1px;
  font: 0.9em/1.6 monospace; color: #111;
  background: #e8e1d5; border: 1px solid #9c8468; border-bottom-width: 3px; border-radius: 4px;
}
.blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; }
.blaettern label { margin: 0; }
.blaettern input { width: 5.5em; margin-left: 6px; padding: 2px 6px; font-size: 1em; border: 1px solid #9c8468; border-radius: 4px; background: #2c3136; color: #fff; }
.blaetterknoepfe .btn { font-size: 0.85em; margin-left: 6px; color: #fff; background: #408c99; border: 1px solid #599bb3; }
.blaetterknoepfe .btn:disabled { opacity: 0.4; }
#sandboxCountdown { display: block; opacity: 0.8; }
#executebutton { text-align: right; margin: 0; flex: 1; }
.myButton {
  box-shadow: 0 10px 14px -7px #276873;
  background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
  border: 0;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  padding: 13px 32px;
  text-shadow: 0 1px 0 #3d768a;
}
.myButton:hover { background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%); }
.myButton:active { position: relative; top: 1px; }

/* Ergebnis */
#befehlswiedergabe {
  white-space: pre-wrap;         /* Zeilenumbrüche des Befehls beibehalten */
  color: #66ff66;
  width: 100%;
  padding: 2px;
  border: 1px solid #888;
  background-color: #252525;
  margin: 1px 0 2px;
}
.fehler { color: #ff6b6b; font-family: monospace; white-space: pre-wrap; }
#table-wrapper { max-width: 100%; overflow: auto; }
#table-wrapper td.null { color: #999; font-style: italic; }

/* Sandbox-Hinweis (nur sichtbar, wenn dieser Browser auf seiner eigenen Kopie arbeitet) */
#sandboxHinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0 0 6px;
  padding: 8px 12px;
  font-size: 0.7em;
  color: #ffd9a8;
  background: #3a2f22;
  border: 1px solid #9c8468;
  border-radius: 6px;
}
#sandboxHinweis .btn {
  font-size: inherit;
  color: #fff;
  background: #8a4b1f;
  border: 1px solid #c77a3a;
}
#sandboxHinweis .btn:hover { background: #a85c27; }

/* Vorschlagsliste der Autovervollständigung */
#vorschlaege {
  position: absolute;
  z-index: 100;
  list-style: none;
  margin: 0; padding: 4px 0;
  min-width: 220px; max-width: 360px; max-height: 260px;
  overflow-y: auto;
  font: 14px/1.5 monospace;
  color: #eee;
  background: #1c1f22;
  border: 1px solid #66ff66;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
#vorschlaege li { padding: 2px 10px; cursor: pointer; white-space: nowrap; }
#vorschlaege li.aktiv, #vorschlaege li:hover { background: #2f5d3a; color: #fff; }
#vorschlaege li small { color: #999; font-size: 0.85em; margin-left: 6px; }
#vorschlaege .typ {
  display: inline-block; width: 1.4em; text-align: center;
  font-size: 0.8em; border-radius: 3px; color: #111;
}
#vorschlaege .typ-T { background: #ffb347; }  /* Tabelle */
#vorschlaege .typ-S { background: #8fd3ff; }  /* Spalte */
#vorschlaege .typ-K { background: #c7c7c7; }  /* Schlüsselwort */
#vorschlaege .typ-F { background: #d7a3ff; }  /* Funktion */
#vorschlaege .typ-A { background: #b6f2b0; }  /* Alias */

/* ---------------------------------------------------------- Seitenleiste (Akkordeon) */
#container {
  margin: 3% auto 0;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
}
.accordion label {
  display: block;
  margin: 0;
  background-color: #eeeeee;
  padding: 5px;
  color: #424242;
  cursor: pointer;
  border-bottom: 1px solid #bdbdbd;
  border-top: 1px solid #ffffff;
}
.accordion input[type="checkbox"] { display: none; }
.accordion .hiddentext {
  display: none;
  color: #424242;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.7em;
  border-bottom: 1px solid #bdbdbd;
  text-align: left;
  background-color: #fff;
}
.accordion input:checked ~ .hiddentext { display: block; }
.accordionitem > a { text-decoration: none; }
.einfuegen { cursor: pointer; }
.geloescht { text-decoration: line-through; color: #b04a3a; }
.marke { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 0.7em; font-style: normal; line-height: 1.5; border-radius: 3px; color: #fff; background: #b04a3a; vertical-align: middle; }
.marke.neu { background: #2f8a4a; }
.accordion.geaendert label { background-color: #f6e3d6; }
.einfuegen:hover { color: #0085A1; }

/* ---------------------------------------------------------- Footer */
footer { padding: 50px 0 65px; font-family: 'Jura', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
footer .copyright { font-size: 14px; margin-bottom: 0; text-align: center; }
footer a { color: #fe9b27; text-decoration: none; transition: 0.5s; }
footer a:hover { color: white; }

/* ---------------------------------------------------------- Eingebettet (index.html?embed=1, siehe Kopf von index.html) */
.embed #mainNav, .embed header.masthead, .embed footer { display: none; }
.embed .hauptcontentcontainer { padding-top: 0.5rem !important; margin-top: 0 !important; }
.embed #tasql { height: 8.5em; min-height: 4em; }          /* in der Schublade ist wenig Platz: kleineres Eingabefeld, bleibt ziehbar */