/* =============================================================================
   uni-PRO Hilfe – Stylesheet im Design „Block Visu neu“ (Style Dunkel)
   -----------------------------------------------------------------------------
   WICHTIG – Tabellen:
   Das Tabellen-Layout bleibt unangetastet. Dieses Stylesheet ändert an
   Tabellen NUR Farben, Linien, Schrift und Ecken – niemals display, width,
   padding (cellpadding), border-spacing (cellspacing), border-collapse,
   white-space oder die Spaltenbreiten. Die Spaltenregeln .col1/.col2/.col3
   sind unverändert aus dem alten Stylesheet übernommen.
   Bilder bekommen KEIN globales max-width (würde Tabellen mit Bildern
   umbrechen); nur Bilder in zentrierten Bild-Blöcken werden abgerundet.
   ============================================================================= */

:root {
  /* Farben wie www.uni-pro.at (und presentation/presentation.css) */
  --seite: #262626;        /* Website --bg */
  --karte: #3D3D3D;        /* Website --panel */
  --karte-tief: #333333;   /* Website --surface */
  --karte-hover: #454545;  /* Website --panel-2 */
  --linie: #444444;        /* Website: Zeilentrenner der Tabellen */
  --linie-stark: #555555;  /* Website --line */
  --schrift: #C8C8C8;      /* Website --muted: Fliesstext */
  --schrift-hell: #FFFFFF; /* Website --text: Ueberschriften und Fettes */
  --leise: #9A9A9A;        /* Website --dim */
  --akzent: #5AA9E6;       /* Website --blue: Links */
  --gruen: #7BC96F;        /* Website --green: Tasten, Marken, Fokus, Hover */
  --gruen-hell: #94D98A;   /* Website --green-hi */
  --gruen-weich: rgba(123, 201, 111, .14);
  --warn: #E8C46A;         /* Website --yellow */
  --fehler: #E07A6A;       /* Website --red */
  --schriftart: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --radius: 14px;
}

/* ---------- Seite ---------- */
html { background-color: var(--seite); }
body {
  font-family: var(--schriftart);
  text-align: left;
  font-size: 100%;
  line-height: 1.6;
  color: var(--schrift);
  font-weight: 400;
  background-color: var(--seite);
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 16px 80px;
  -webkit-font-smoothing: antialiased;
}
/* alte Inline-Schrift „Arial“ an die Hilfeschrift angleichen (Grösse bleibt) */
[style*="font-family: Arial"], [style*="font-family:Arial"] { font-family: inherit !important; }

/* ---------- Überschriften ---------- */
h1, h2, h3 {
  font-family: var(--schriftart);
  color: var(--schrift-hell);
  text-align: left;
  line-height: 1.25;
}
h1 { font-size: 2em; font-weight: 800; margin: 0.4em 0 0.6em; letter-spacing: -.01em; }
h2 { font-size: 1.4em; font-weight: 700; margin: 1.6em 0 0.6em; }
h3 { font-size: 1.15em; font-weight: 700; margin: 1.4em 0 0.5em; }
h2::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gruen); margin-right: 12px; vertical-align: middle; position: relative; top: -2px;
}
/* alte Unterstreichungen der Überschriften entfernen */
h1[style*="underline"], h2[style*="underline"], h3[style*="underline"], tr[style*="underline"],
h1 [style*="underline"], h2 [style*="underline"], h3 [style*="underline"] { text-decoration: none !important; }
h1 a, h2 a, h3 a { text-decoration: none; }

/* Pfeil „Übersicht“ links neben dem Titel: runde Taste */
img[src*="pfeil_links"] {
  width: 20px !important; height: 20px !important; padding: 11px;
  background: var(--karte); border: 1px solid var(--linie-stark) !important; border-radius: 50%;
  vertical-align: middle; margin: -6px 10px 0 0; transition: background .15s, border-color .15s;
}
a:hover img[src*="pfeil_links"] { background: var(--karte-hover); border-color: var(--gruen) !important; }

/* ---------- Text ---------- */
p { margin: 0 0 1em; }
b, strong { font-weight: 700; color: var(--schrift-hell); }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; height: 1px; background: var(--linie); margin: 2.4em 0 0.4em; }
ol li::marker, ul li::marker { color: var(--gruen); font-weight: 700; }
li { margin-bottom: 0.35em; }
::selection { background: rgba(90, 169, 230, .35); }

/* Hinweisbox (alte Inline-Box grau mit grünem Streifen) */
p[style*="#3d3d3d"], div[style*="#3d3d3d"] {
  background-color: var(--karte) !important; border: 1px solid rgba(123, 201, 111, .35) !important;
  border-radius: var(--radius); padding: 16px 20px !important;
}
/* alte dunkle Codezeilen */
[style*="background:#222"], [style*="background: #222"], [style*="background-color: #222"] {
  background: var(--karte-tief) !important; border: 1px solid var(--linie); border-radius: 8px; overflow-x: auto;
}
code, tt, kbd { font-family: var(--mono); font-size: 92%; }

/* Bilder in zentrierten Bild-Blöcken (Screenshots, Grafiken) */
div[style*="text-align: center"] > img, p[style*="text-align: center"] > img { border-radius: 10px; }

/* ---------- Tabellen (nur Optik, siehe Kopf) ---------- */
table {
  background-color: var(--karte);
  border-radius: var(--radius);
  margin-bottom: 1.6em;
  color: var(--schrift);
}
td table, th table { background-color: transparent; }
td, th { font-size: 0.95em; line-height: 1.55; }
td td, td th { font-size: 1em; }
/* Trennlinien zwischen den Zeilen der Parameter-/Ein-/Ausgangstabellen */
td.col1, td.col2, td.col3 { border-top: 1px solid var(--linie); }
/* Tabellen mit Rahmen (border="1"): helle, feine Linien statt grauer 3D-Rahmen */
table[border="1"], table.table-bordered { border-color: var(--linie-stark); border-style: solid; }
table[border="1"] > tbody > tr > td, table[border="1"] > tbody > tr > th,
table[border="1"] > tr > td, table[border="1"] > tr > th,
table[border="1"] > thead > tr > th { border-color: var(--linie-stark); border-style: solid; }
th { color: var(--schrift-hell); background-color: var(--karte-tief); font-weight: 700; }

.table {
  background-color: var(--karte);
  text-align: left;
  min-width: 100%;
}
.table_header {
  font-weight: bold;
  text-align: center;
  vertical-align: top;
}
.table_header h1, .table_header h2, .table_header h3 { margin: 0.3em 0 0.1em; }

/* Tabellenspalten für Funktionsbaustein-Dokumentation (Layout unverändert) */
.col1 {
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
  width: 1%;
  font-weight: bold;
}
.col2 {
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
  width: 1%;
  font-weight: bold;
}
.col3 {
  vertical-align: top;
  text-align: left;
}
/* nur Farbe: Kürzel der Ein-/Ausgänge in Akzentfarbe */
td.col1 { color: var(--schrift-hell); }
td.col1:has(+ td.col2) { color: var(--gruen); }

/* ---------- Codeblock mit Schaltfläche zum Kopieren ---------- */
.code {
  background-color: var(--karte-tief);
  color: var(--schrift);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px 14px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 90%;
  line-height: 1.45;
  white-space: pre;
}
.copybtn {
  background-color: var(--gruen);
  color: var(--seite);
  border: 0;
  border-radius: 10px;
  padding: 8px 18px;
  min-height: 36px;
  font-family: var(--schriftart);
  font-size: 95%;
  font-weight: 700;
  cursor: pointer;
}
.copybtn:hover { background-color: var(--gruen-hell); }
.copyhint { font-size: 90%; color: var(--leise); }

/* ---------- Startseite (help_xx/index.html, <body class="startseite">) ---------- */
body.startseite > h1 { font-size: 1.5em; margin: 2em 0 0.7em; }
body.startseite > h1:first-child { font-size: 3em; text-align: center; margin: 0.5em 0 0.5em; }
body.startseite > h1::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gruen); margin-right: 12px; vertical-align: middle; position: relative; top: -3px;
}
body.startseite > h1:first-child::before { display: none; }
body.startseite > h3 {
  font-size: 0.8em; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 1.6em 0 0.6em;
}
body.startseite > p { color: var(--leise); max-width: 780px; }
body.startseite > p[style*="#3d3d3d"] { color: var(--schrift); max-width: none; margin: 8px 0 0; }
body.startseite > ol:empty { display: none; }
body.startseite > ol {
  list-style: none; margin: 0 0 1em; padding: 0; counter-reset: nr;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
body.startseite > ol > li { counter-increment: nr; margin: 0; }
body.startseite > ol > li > a {
  display: flex; align-items: center; gap: 14px; height: 100%; min-height: 56px; box-sizing: border-box;
  padding: 10px 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--schrift); font-weight: 600; line-height: 1.35;
}
body.startseite > ol > li > a br { display: none; }
body.startseite > ol > li > a::before {
  content: counter(nr); flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gruen); color: var(--seite); font-size: 13px; font-weight: 700;
}
body.startseite > ol > li > a:hover { border-color: var(--gruen); color: var(--schrift-hell); text-decoration: none; }
body.startseite > ul {
  list-style: none; margin: 0 0 0.5em; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
}
body.startseite > ul > li { margin: 0; }
body.startseite > ul > li > a {
  display: block; height: 100%; box-sizing: border-box; padding: 9px 14px;
  background: var(--karte); border-radius: 10px; color: var(--schrift); font-size: 0.93em;
}
body.startseite > ul > li > a:hover { background: var(--karte-hover); color: var(--schrift-hell); text-decoration: none; }

/* ============================================================
   VOLLTEXTSUCHE (search.html) und Suchfeld der Startseite
   ============================================================ */
.searchbox { margin: 8px 0 40px; }
.searchbox form { display: inline-flex; gap: 8px; width: 100%; max-width: 640px; }
.searchinput {
  background-color: var(--karte);
  color: var(--schrift);
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  padding: 10px 16px;
  min-height: 46px;
  box-sizing: border-box;
  font-family: var(--schriftart);
  font-size: 100%;
}
.searchbox .searchinput { flex: 1; min-width: 0; }
.searchinput:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(123, 201, 111, .2); }
.searchinput::placeholder { color: var(--leise); }
.searchinput + .copybtn, #f .copybtn { min-height: 46px; padding: 0 22px; }
.filterbar {
  margin: 14px 0;
  font-size: 90%;
  color: var(--leise);
}
.filterbar label {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 6px 6px 0; padding: 5px 14px 5px 10px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; cursor: pointer;
}
.filterbar label:has(input:checked) { background: var(--gruen-weich); border-color: rgba(123, 201, 111, .5); color: var(--schrift-hell); }
.filterbar input { accent-color: var(--gruen); margin: 0; }
.filterbar .sep { color: var(--linie-stark); margin: 0 10px 0 4px; }
.searchmeta {
  margin: 14px 0 8px 0;
  font-size: 90%;
  color: var(--leise);
}
.searcherr {
  margin: 8px 0;
  color: var(--fehler);
}
.searchfoot {
  margin: 28px 0 8px 0;
  font-size: 80%;
  color: var(--leise);
}
.syntaxhelp {
  margin: 12px 0 20px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 10px 16px;
  background-color: var(--karte);
}
.syntaxhelp table { background-color: transparent; margin-bottom: 0.4em; }
.syntaxhelp summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--schrift-hell);
}
.hit {
  margin: 0 0 10px 0;
  padding: 16px 20px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.hit:hover { border-color: var(--gruen); }
.hit-title {
  font-size: 115%;
  font-weight: bold;
}
.hit-sec {
  font-size: 85%;
  color: var(--leise);
}
.hit-path {
  font-size: 90%;
  color: var(--leise);
  font-family: var(--mono);
  background: var(--karte-tief);
  padding: 1px 7px;
  border-radius: 6px;
  margin-left: 6px;
}
.hit-snip {
  margin-top: 6px;
  line-height: 1.5;
  color: var(--schrift);
}
mark {
  background-color: rgba(232, 196, 106, .3);
  color: var(--schrift-hell);
  border-radius: 3px;
  padding: 0 2px;
}
#morebtn { margin-top: 6px; }

/* ---------- Druck ---------- */
@media print {
  html, body { background: #fff; color: #000; max-width: none; padding: 0; }
  h1, h2, h3, b, strong, td, th { color: #000 !important; }
  table { background: #fff; }
  a { color: #0B5FA5; }
  img[src*="pfeil_links"], .searchbox { display: none; }
}

/* Vorformatierte Blöcke: nie breiter als die Seite bzw. die Tabellenzelle, sondern innen scrollen.
   (width:0 + min-width:100% verhindert, dass ein langer <pre> die Tabellenspalte aufweitet.) */
pre { max-width: 100%; overflow-x: auto; box-sizing: border-box; border-radius: 8px; }
td pre { width: 0; min-width: 100%; }
pre[style*="#f4f4f4"] { background: var(--karte-tief) !important; color: var(--schrift) !important; border: 1px solid var(--linie); }

/* Eingabefelder in Hilfeseiten (z. B. Feiertagsrechner) */
input[type="text"], select, textarea {
  background-color: var(--karte-tief); color: var(--schrift);
  border: 1px solid var(--linie-stark); border-radius: 8px; padding: 6px 10px;
  font-family: var(--schriftart); font-size: 95%;
}
input[type="text"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--gruen); }

/* Fliesstext-Zellen, die versehentlich die Spaltenklasse col1/col2 tragen (einzige Zelle der Zeile):
   dürfen umbrechen, sonst wird die Seite breiter als das Fenster. Spaltenbreiten bleiben unverändert. */
td.col1:only-child, td.col2:only-child { white-space: normal; }
/* lange Beispielwerte ohne Leerzeichen (JSON u. ä.) dürfen umbrechen */
span[style*="font-family: monospace"] { overflow-wrap: anywhere; }
/* Seiten mit sehr langen Beispielaufrufen ohne Leerzeichen (<body class="umbruch">):
   die Beschreibungsspalte darf überall umbrechen */
body.umbruch td.col3 { overflow-wrap: anywhere; }
/* ---------- Videoliste (videos/index.html) ---------- */
ol.videolist { margin-top: 1.2em; padding-left: 2.2em; }
ol.videolist li { margin-bottom: 1.4em; padding-left: 0.3em; line-height: 1.5; }
ol.videolist a.video-title { font-weight: bold; font-size: 110%; color: var(--akzent); text-decoration: none; }
ol.videolist a.video-title:hover { text-decoration: underline; }
ol.videolist .video-duration { color: var(--leise); white-space: nowrap; }
ol.videolist .video-help { display: block; margin-top: 0.35em; font-size: 90%; color: var(--leise); }
ol.videolist .video-help a { color: var(--akzent); }

/* Rechtlicher Vermerk am Seitenende */
footer.legalfoot { margin: 32px 0 8px; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 75%; color: var(--leise); line-height: 1.5; }
footer.legalfoot a { color: var(--leise); text-decoration: underline; }
@media print {
  footer.legalfoot { border-top: 1px solid #999; color: #444; background: none; }
  footer.legalfoot a { color: #444; }
}