@charset "UTF-8";
@import url('user-handbuch.css');
@import url('user-releases.css');

/* ==========================================================================
   1. VARIABLEN
   ========================================================================== */
:root {
  /* Template-Farben */
  --cassiopeia-color-primary: #98a7b5;   /* Hauptfarbe (Buttons, Pagination) */
  --cassiopeia-color-hover: #0a58ca;     /* Hover für Buttons & Co. */

  /* Header, Menü & Footer - eine Farbe für alles */
  --viscom-bar-bg: #424242;

  /* Akzentfarbe (Logo-Orange) */
  --viscom-accent: #e8731b;

  /* Links */
  --link-color: var(--viscom-accent);
  --link-color-rgb: 232, 115, 27;
  --link-hover-color: #b85710;
  --link-hover-color-rgb: 184, 87, 16;

  /* ---- Schrift: Familie ---- */
  --cassiopeia-font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --cassiopeia-font-family-headings: var(--cassiopeia-font-family-body);

  /* ---- Schrift: Stärke ---- */
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 400;
  --viscom-fw-bold: 600;

  /* ---- Schrift: Größen (die EINZIGE Stelle für Größen) ---- */
  --viscom-fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);  /* Fließtext 16-17px */
  --viscom-fs-sm:   0.9rem;                                      /* Kacheln, Teaser */
  --viscom-fs-xs:   0.8rem;                                      /* Datum, Brotkrumen, Hinweise */
  --viscom-fs-h1:   clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --viscom-fs-h2:   clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --viscom-fs-h3:   1.25rem;
  --viscom-fs-h4:   1.1rem;

  /* ---- Zeilenhöhen ---- */
  --viscom-lh-base:    1.6;
  --viscom-lh-compact: 1.5;
  --viscom-lh-heading: 1.25;

  /* ---- Textfarben ---- */
  --viscom-text:       #334155;   /* Fließtext */
  --viscom-text-muted: #64748b;   /* Nebentext, Listen in Kacheln */
  --viscom-heading:    #212529;   /* Überschriften */

  /* Sonstiges */
  --breadcrumb-font-size: var(--viscom-fs-xs);
}

/* ==========================================================================
   2. TYPOGRAFIE (global)
   ========================================================================== */
body {
  font-family: var(--cassiopeia-font-family-body);
  font-size: var(--viscom-fs-base);
  font-weight: var(--cassiopeia-font-weight-normal);
  line-height: var(--viscom-lh-base);
  color: var(--viscom-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: var(--cassiopeia-font-weight-headings);
  line-height: var(--viscom-lh-heading);
  color: var(--viscom-heading);
}

h1, .h1 { font-size: var(--viscom-fs-h1); }
h2, .h2 { font-size: var(--viscom-fs-h2); }
h3, .h3 { font-size: var(--viscom-fs-h3); }
h4, .h4 { font-size: var(--viscom-fs-h4); }
h5, .h5,
h6, .h6 { font-size: var(--viscom-fs-base); }

/* Überschriften, die Links sind, behalten die Linkfarbe */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: var(--link-color);
}

strong, b {
  font-weight: var(--viscom-fw-bold);
}

small, .small {
  font-size: var(--viscom-fs-xs);
}

/* Brotkrumen: ruhig, ohne Unterstrich - beim Darüberfahren wieder unterstrichen */
.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   3. GRUNDLAYOUT
   ========================================================================== */
.site-grid {
  max-width: 1024px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);    /* Bildschirmhöhe minus Header + Footer */
  align-content: start;               /* Inhalt bleibt oben, wird nicht verteilt */
}

.container-component {
  width: 100%;
  max-width: 780px;     /* vorher 900px */
  margin: 0 auto;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.container-header {
  background-color: var(--viscom-bar-bg);
  background-image: none;
  position: relative;
  box-shadow: inset 0 5px 5px #00000008;
}

/* Logo und Infobereich (Position header-right) in einer Zeile, vertikal mittig */
.container-header .grid-child:has(.navbar-brand) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Schwarzen Logo-Hintergrund ausblenden (Header-Grau scheint durch) */
.brand-logo img {
  mix-blend-mode: lighten;
}

/* Störende Abstände am Logo entfernen */
.container-header .navbar-brand {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.header-right {
  color: #fff;
  text-align: right;
  font-size: var(--viscom-fs-sm);
}

.header-right p {
  margin: 0;
}

/* ==========================================================================
   5. MENÜ - Untermenü in der Farbe der Menüleiste
   ========================================================================== */
.container-header .metismenu > li > ul.mm-collapse {
  background: var(--viscom-bar-bg);
  border: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
}

/* Links im Untermenü: weiß wie im Hauptmenü */
.container-header .metismenu > li > ul a {
  color: #fff;
}

/* Hover und aktiver Punkt: Logo-Orange */
.container-header .metismenu > li > ul a:hover,
.container-header .metismenu > li > ul a:focus,
.container-header .metismenu > li > ul .active > a {
  color: var(--link-color);
  background: rgba(255, 255, 255, .06);
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.footer {
  color: #fff;
  background-color: var(--viscom-bar-bg);
  background-image: none;
  margin-top: 2rem;                   /* Abstand zum Inhalt */
  font-size: var(--viscom-fs-sm);
}

/* Weniger Innenabstand = niedrigere Fußzeile */
.footer .grid-child {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Absätze im Footer ohne Extra-Abstand */
.footer p {
  margin: 0;
}

/* ==========================================================================
   7. KATEGORIE-BESCHREIBUNG (Unterseiten)
   ========================================================================== */
.com-content-category .category-desc,
.com-content-category-blog .category-desc {
  display: flex !important;
  align-items: center !important;     /* Bild und Text vertikal zueinander zentrieren */
  gap: 15px !important;               /* Abstand zwischen Bild und Text */
  margin: 15px 0 25px 0 !important;   /* Abstand zum Titel und zur Tabelle */
  font-size: var(--viscom-fs-base) !important;
  color: var(--viscom-text) !important;
  max-width: 600px !important;
  line-height: var(--viscom-lh-compact) !important;
}

/* Icon innerhalb der Beschreibung */
.com-content-category .category-desc img,
.com-content-category-blog .category-desc img {
  display: block !important;
  width: 50px !important;             /* feste Breite 50px */
  height: auto !important;            /* proportionale Höhe */
  flex-shrink: 0 !important;          /* nicht stauchen bei langem Text */
}

/* ==========================================================================
   8. DOKUMENTATION / HANDBUCH-ZEILEN (.dokurow)
   Größen kommen aus der Typo-Skala, eine Stufe kleiner als die Seitenüberschriften.
   ========================================================================== */
.dokurow {
  clear: both;
  float: left;
  vertical-align: top;
  max-width: 750px;
  margin: auto;
  text-align: left;                   /* vorher Blocksatz */
  font-weight: var(--cassiopeia-font-weight-normal);  /* vorher 100 = sehr dünn */
}

.dokurow ul,
.dokurow il {                         /* "il" ist vermutlich ein Tippfehler für "li" */
  margin-bottom: 0.5em;
}

.dokurow h1 {
  margin-top: 1em;
  padding-top: 0.5em;
  font-size: var(--viscom-fs-h2);
  font-weight: var(--viscom-fw-bold);
  color: var(--viscom-accent);
}

.dokurow h2 {
  margin-top: 1em;
  padding-top: 0.5em;
  font-size: var(--viscom-fs-h3);
  font-weight: var(--viscom-fw-bold);
  border-top: 1px dashed #aaa;
}

.dokurow h3 {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 0;
  font-size: var(--viscom-fs-h4);
}

.dokurow h4 {
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 0;
  font-size: var(--viscom-fs-base);
}

.dokurow p {
  clear: both;
}

.dokurow ul {
  padding-bottom: 0;
}

.dokurow br {
  margin-bottom: 12px;
}

.dokurow table td {
  padding: 8px;
  font-size: var(--viscom-fs-sm);
  line-height: var(--viscom-lh-compact);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #ddd;
  min-width: 20px;
}

.dokurowimagecontainer {
  float: right;
  width: 400px;
  max-width: 100%;
  margin-bottom: 25px;
}

.dokurowimagecontainer img {
  float: right;
}

.dokuimgfull {
  float: none;
  margin: 20px 0 12px 0;
  clear: both;
  max-width: 100%;
}

/* ==========================================================================
   9. ICONS & BUTTONS
   ========================================================================== */
.dokuicon {
  min-width: 16px !important;
  min-height: 16px !important;
}

.dlsicon {
  max-width: 24px !important;
}

.viscom-frontpage-button {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Zurück / Weiter unter Beiträgen: Abstand zum Inhalt */
.pagenavigation {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;      /* feine Trennlinie */
}

/* ==========================================================================
   10. MODUL-BOX (Modulklasse: viscom-box) - für alle Module nutzbar
   ========================================================================== */

/* Box */
.card.viscom-box {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05);
  overflow: hidden;                   /* runde Ecken auch am Titel */
}

/* Titel: dunkler Balken wie die Menüleiste, oranger Akzent */
.card.viscom-box .card-header {
  background: var(--viscom-bar-bg);
  color: #fff;
  font-size: var(--viscom-fs-base);
  font-weight: var(--viscom-fw-bold);
  letter-spacing: .02em;
  padding: .6rem 1rem;
  border-bottom: 3px solid var(--viscom-accent);
}

/* Weiterlesen-Button in Boxen: Abstand zum Text */
.card.viscom-box .readmore {
  margin-top: 1rem;
  margin-bottom: 0;
}

/* ==========================================================================
   11. LISTE "Letzte Artikel" (Modulklasse: latest-articles)
   ========================================================================== */

/* Inhalt kompakter */
.card.latest-articles .card-body {
  padding: .25rem 1rem .75rem;
  font-size: var(--viscom-fs-sm);
}

/* Kategorie-Überschrift als Etikett */
.card.latest-articles .mod-articles-group h4 {
  margin: .75rem 0 .25rem;
  font-size: var(--viscom-fs-xs);
  font-weight: var(--viscom-fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--viscom-text-muted);
}

/* Trennung zwischen mehreren Gruppen */
.card.latest-articles .mod-articles-group + .mod-articles-group {
  margin-top: .5rem;
  border-top: 1px solid #e2e8f0;
}

/* Liste: eingerückt, ohne Punkte, mit feiner Linie links */
.card.latest-articles .mod-articles-group ul {
  list-style: none;
  margin: 0 0 0 .75rem;
  padding: 0 0 0 .75rem;
  border-left: 2px solid #eef1f4;
}

/* Trennlinien zwischen den Einträgen */
.card.latest-articles li {
  border-bottom: 1px solid #eef1f4;
}

.card.latest-articles li:last-child {
  border-bottom: 0;
}

/* Links: dunkel, mit orangem Pfeil, beim Darüberfahren orange */
.card.latest-articles li a {
  display: flex;
  gap: .5rem;
  padding: .55rem 0;
  color: var(--viscom-text);
  text-decoration: none;
  transition: color .15s ease, padding-left .15s ease;
}

.card.latest-articles li a::before {
  content: "\203A";                   /* Pfeil als Code */
  color: var(--viscom-accent);
  font-weight: var(--viscom-fw-bold);
}

.card.latest-articles li a:hover {
  color: var(--viscom-accent);
  padding-left: .25rem;
}

/* Optional: Datum unter dem Eintrag (im Modul "Datum anzeigen" aktivieren) */
.card.latest-articles .mod-articles-date {
  display: block;
  font-size: var(--viscom-fs-xs);
  color: var(--viscom-text-muted);
  margin: -.35rem 0 .5rem 1.1rem;
}

/* ==========================================================================
   12. SUPPORT-ÜBERSICHT (Seitenklasse: support-uebersicht)
   ========================================================================== */

/* Abstand zwischen den Einträgen */
.support-uebersicht .com-content-categories__item {
  padding: 1.25rem 0;
  max-width: 70ch;                     /* ca. 70 Zeichen pro Zeile */
  border-bottom: 1px solid #e2e8f0;
}
.support-uebersicht .com-content-categories__item:first-child {
  padding-top: 0;
}

.support-uebersicht .com-content-categories__item:last-child {
  border-bottom: 0;
}

/* Titel etwas hervorheben, mit Abstand zur Beschreibung */
.support-uebersicht .com-content-categories__item-title {
  font-size: var(--viscom-fs-h4);
  font-weight: var(--viscom-fw-bold);
  margin-bottom: .4rem;
}

.support-uebersicht .com-content-categories__item-title a {
  text-decoration: none;
}

.support-uebersicht .com-content-categories__item-title a:hover {
  text-decoration: underline;
}

/* Beschreibung */
.support-uebersicht .com-content-categories__description {
  margin: 0;
  color: var(--viscom-text);
}

/* ==========================================================================
   13. KATEGORIE-LISTE (z. B. Onlinehandbuch)
   ========================================================================== */

/* Zeilenfarben direkt setzen - Bootstrap-Schatten-Trick abschalten */
.com-content-category__table {
	  max-width: 600px !important;
}

.com-content-category__table tbody tr > * {
  background-color: #fff !important;
  box-shadow: none !important;
  max-width: 70ch !important;
}

/* Streifen: sehr helles Grau */
.com-content-category__table tbody tr:nth-child(odd) > * {
  background-color: #fafbfc !important;
}

/* Hover: Hauch Orange, deutlich erkennbar */
.com-content-category__table tbody tr:hover > * {
  background-color: rgba(var(--link-color-rgb), .08) !important;
}

/* Alle Zellen: keine dicken Rahmen, nur feine Linie unten */
.com-content-category__table > :not(caption) > * > * {
  border-width: 0;
  border-bottom: 1px solid #eef1f4;
  padding: .7rem 1rem;             /* kompakter: .45rem 1rem */
  line-height: var(--viscom-lh-compact);
  vertical-align: middle;
}

.com-content-category__table tbody tr:last-child > * {
  border-bottom: 0;
}

/* Runde Ecken auch für die Zellen in den Ecken */
.com-content-category__table tbody tr:first-child > :first-child { border-top-left-radius: 7px; }
.com-content-category__table tbody tr:first-child > :last-child  { border-top-right-radius: 7px; }
.com-content-category__table tbody tr:last-child  > :first-child { border-bottom-left-radius: 7px; }
.com-content-category__table tbody tr:last-child  > :last-child  { border-bottom-right-radius: 7px; }

/* Titelspalte: oranger Balken links beim Darüberfahren (ohne Lücke) */
.com-content-category__table .list-title {
  position: relative;
}

.com-content-category__table .list-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: transparent;
  transition: background .15s ease;
}

.com-content-category__table tbody tr:hover .list-title::after {
  background: var(--viscom-accent);
}

/* Titel-Links: dunkel, ohne Unterstrich, mit orangem Pfeil */
.com-content-category__table .list-title a {
  display: inline-flex;
  gap: .5rem;
  font-size: var(--viscom-fs-sm);  /* neu: 0,9 rem statt Fließtextgröße */
  color: var(--viscom-text);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}

.com-content-category__table .list-title a::before {
  content: "\203A";                                      /* Pfeil als Code */
  color: var(--viscom-accent);
  font-weight: var(--viscom-fw-bold);
}

.com-content-category__table tbody tr:hover .list-title a {
  color: var(--viscom-accent);
}

/* Datum: klein, grau, rechtsbündig, nicht umbrechen */
.com-content-category__table .list-date {
  font-size: var(--viscom-fs-xs);
  color: var(--viscom-text-muted);
  text-align: right;
  white-space: nowrap;
  width: 1%;                                             /* Spalte nur so breit wie nötig */
}

/* Überschrift der Kategorie-Liste: kompakter, kräftiger, mit Akzentstrich */
.com-content-category h1,
.com-content-category > h2 {
  font-size: var(--viscom-fs-h2);
  font-weight: var(--viscom-fw-bold);
  margin-bottom: 1rem;
}

.com-content-category h1::after,
.com-content-category > h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .5rem;
  background: var(--viscom-accent);
  border-radius: 2px;
}

/* Filter: Eingabefeld und Buttons kompakt und gleich hoch */
.com-content__filter {
  align-items: stretch;               /* alle drei Elemente gleich hoch */
  margin-bottom: 1rem;
}

.com-content__filter #filter-search {
  padding: .35rem .75rem;
  font-size: var(--viscom-fs-sm);
  line-height: var(--viscom-lh-compact);
}

.com-content__filter .btn {
  --bs-btn-padding-y: .35rem;         /* Bootstrap-Variablen ... */
  --bs-btn-padding-x: .75rem;
  --bs-btn-font-size: var(--viscom-fs-sm);
  --bs-btn-line-height: var(--viscom-lh-compact);
  padding: .35rem .75rem;             /* ... und direkt, falls ältere Version */
  font-size: var(--viscom-fs-sm);
  line-height: var(--viscom-lh-compact);
}