/* ============================================================
   VFM Theme – optimiert
   ============================================================ */

/* --- 1. Variablen ------------------------------------------ */
:root {
  --vfm-blue:        #002c59;   /* war rgb(0,44,89)  */
  --vfm-blue-dark:   #002244;   /* war rgb(0,34,68)  */
  --vfm-blue-sep:    #002b5c;   /* Separatoren       */
  --vfm-orange:      #f49600;
  --vfm-grey-head:   #e6e6e6;
  --vfm-heading:     rgb(31, 73, 125);

  --link-icon:       url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3E%3Cpath d='M4.5 3.5h-4v6h6v-4' fill='transparent' stroke='%23e84d0e'/%3E%3Cpath d='M4.5.5h5v5L9 6 7.5 4.5l-3 3-2-2 3-3L4 1z' fill='transparent' stroke='%23e84d0e' stroke-width='1.001'/%3E%3C/svg%3E");
  --link-icon-hover: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3E%3Cpath d='M4.5 3.5h-4v6h6v-4' fill='transparent' stroke='blue'/%3E%3Cpath d='M4.5.5h5v5L9 6 7.5 4.5l-3 3-2-2 3-3L4 1z' fill='transparent' stroke='blue' stroke-width='1.001'/%3E%3C/svg%3E");
}

/* --- 2. Basis ---------------------------------------------- */
p, li { color: #000; }

pre,
.source li { font-family: monospace; }
.source li { font-style: normal; }

/* --- 3. Logo (Forum 2) ------------------------------------- */
#main[data-forum-id="2"] .logo img {
  display: inline;
  box-sizing: border-box;
  background: url(/custom/themes/vfm/assets/desktop/img/vfm-Sichel.png) no-repeat;
  width: 64px;
  height: 64px;
  padding-left: 64px;
}

/* --- 4. Ausblenden ----------------------------------------- */
#main[data-forum-id="2"] #widget_search_40,
#main[data-forum-id="2"] #widget_email-digest_57,
#main[data-forum-id="2"] #quick-search-new-topic,
.profile-card .usercard-info { display: none; }

.loginPage[data-forum-id="2"] #form-login { display: none !important; }

/* SICHTBARE AENDERUNG: war opacity:0 – der Link blieb dabei
   klickbar und fuer Screenreader vorhanden. Falls Hersteller-JS
   auf diesen Link klickt, wieder auf opacity:0 zurueckstellen. */
.forums-block .eventLink { visibility: hidden; }
.forums-block .private   { border-left: 0; }

/* Entfernt: Regel fuer #property_84 im Anlage-Formular Forum 1.
   Selektor war ungueltig (".sidebar-block!"), hat also nie gegriffen;
   das Feld ist im Quelltext nicht mehr auffindbar. */

/* --- 5. Tabs & Buttons (Forum 2) --------------------------- */
/* SICHTBARE AENDERUNG ggue. Original: diese Regel stand urspruenglich
   NACH der :hover-Regel weiter unten. Beide haben identische
   Spezifitaet (1,3,2), dadurch gewann der Verlauf hier und der
   Hover-Effekt auf Tab-Buttons war wirkungslos.
   Falls Tab-Buttons bewusst nicht hovern sollen: diesen Block
   einfach wieder ans Ende von Abschnitt 5 verschieben. */
#main[data-forum-id="2"] .menu-tabs li.tab-button a {
  background: linear-gradient(to bottom, var(--vfm-blue) 0%, var(--vfm-blue-dark) 100%);
  border: 1px solid var(--vfm-blue-dark);
  box-shadow: inset 0 1px 0 0 var(--vfm-blue-dark);
}

#main[data-forum-id="2"] .menu-tabs li.tab-button a:hover {
  box-shadow: inset 0 1px 2px 0 var(--vfm-blue-dark);
}

/* ==========  SCOPING BEWUSST WIE IM ORIGINAL  ==========
   Im Original stand "#main[data-forum-id="2"]" auf einer eigenen
   Zeile ueber der Selektorliste. Dadurch ist NUR der erste Selektor
   auf Forum 2 beschraenkt – die uebrigen wirken portalweit.

   Ob das Absicht oder ein Zeilenumbruch-Versehen war, ist nicht
   geklaert (Basis-Code stammt vom Hersteller, nur ergaenzt).
   Deshalb hier 1:1 beibehalten, nur explizit ausgeschrieben.

   PRUEFEN: ein Forum mit anderer data-forum-id oeffnen. Sind die
   Tabs/Buttons dort ebenfalls blau, wird der globale Effekt genutzt
   und muss so bleiben. Sonst kann der Prefix auf alle Selektoren
   gezogen werden.
   ====================================================== */
#main[data-forum-id="2"] .menu-tabs li a:hover,
.content-tabs li span:hover,
.content-tabs li.active span,
.menu-tabs .arrow-tab span:hover {
  background: linear-gradient(to bottom,
              var(--vfm-blue) 0%, var(--vfm-blue) 10%,
              #fff 10%, #fff 100%);
}

/* ebenfalls: nur .button-medium-color ist auf Forum 2 gescopet */
#main[data-forum-id="2"] .button-medium-color,
.button-small-color,
button[class*="redactor_btn_modal"],
button[class*="redactor_modal"] {
  background: linear-gradient(to bottom, var(--vfm-blue) 0%, var(--vfm-blue-dark) 100%);
  border: 1px solid var(--vfm-blue-dark);
  box-shadow: inset 0 1px 0 0 var(--vfm-blue-dark), 0 1px 2px 0 #ccc;
}

/* --- 6. Externe-Link-Icons --------------------------------- */
/* ==========  ACHTUNG: KEINEN SELEKTOR ENTFERNEN!  ==========
   Der Portal-Anbieter rendert denselben Inhalt je nach URL/Modul
   mit unterschiedlichen Wrapper-Klassen:

     .notes-block           -> Keasy-Ankuendigungen
     .content-object-full   -> Artikel-Detailansicht (p bzw. ul > li)
     .comment-content-text  -> Kommentare (Probleme / Ideen)
     .article-content       -> Wissensdatenbank

   Die Selektoren sehen redundant aus, sind es aber NICHT – jeder
   deckt genau einen dieser Kontexte ab. Faellt einer weg, verlieren
   die Links in diesem Modul ihr Icon.

   Die Liste unten ist fuer den Browser funktional identisch zu fuenf
   Einzelregeln; entfallen ist nur die 8-fach duplizierte Data-URI.
   Kontextabweichungen stehen bewusst als Overrides darunter.
   ========================================================== */

/* gemeinsame Basis */
.notes-block a,
.content-object-full p a,
.content-object-full ul > li a,
.comment-content-text p a,
.article-content a {
  color: var(--vfm-orange);
  text-decoration: none;
  background: var(--link-icon) no-repeat 100%;
  padding-right: .85rem;
}

/* Hover: es aendert sich ausschliesslich die Icon-Farbe */
.notes-block a:hover,
.content-object-full p a:hover,
.content-object-full ul > li a:hover,
.comment-content-text p a:hover,
.article-content a:hover {
  background-image: var(--link-icon-hover);
}

/* --- kontextspezifische Abweichungen (Original beibehalten) --- */
.notes-block a,
.content-object-full ul > li a   { padding-right: .75rem; }

.content-object-full p a,
.comment-content-text p a,
.article-content a               { opacity: .8; }

.article-content a               { font-weight: 400; }

/* Anker ohne Icon */
#anchorremove {
  background-image: none;
  padding-right: 0;
}

/* --- 7. Notes-Block (Keasy-Ankuendigungen) ----------------- */
/* Eigener Kontext – NICHT mit .article-content (Abschnitt 8)
   zusammenlegen, der Anbieter vergibt je nach URL andere Klassen. */
.notes-block {
  background: #fff;
  border: 3px ridge #ccc;
  border-radius: 5px;
  padding: 15px;
  margin: 18px 0;
  color: #000;
}

.notes-block p   { padding-top: 4px; }
.notes-block img { padding: 4px 0; }

.notes-block p:first-child,
.notes-block h4 {
  font-size: 14px;
  text-align: left;
  color: var(--vfm-heading);
  margin-bottom: 0;
  background-color: var(--vfm-grey-head);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.notes-block p:first-child { font-weight: 600; padding: 9px; }
.notes-block h4           { font-weight: 400; padding: 6px; }

/* --- 8. Artikel / Wissensdatenbank ------------------------- */
/* Hinweis: .article-content ist der Wissensdatenbank-Kontext,
   .notes-block (Abschnitt 7) der Ankuendigungs-Kontext.
   Getrennt halten – der Anbieter liefert je nach URL nur einen davon. */
.article-content {
  border: 2px dotted #ccc;
  padding: 9px;
  line-height: 1.5em;
  word-wrap: break-word;
  background-color: #eee;
}
.article-content img { cursor: pointer; border: 1px solid #99ccd9; }

.article-content h4 {
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: rgb(197, 71, 101);
  padding: 6px;
  margin: 9px;
  border: 1px solid blue;
}

.article-separator,
.article-separator-repeat { background: var(--vfm-blue-sep); height: 10px; }

#headlineankuendigung {
  background-color: #f49600;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

/* Custom-Element: besser <div class="note"> verwenden */
note {
  display: block;
  width: 100%;
  background: #eee;
  border: 3px dotted #ccc;
  border-radius: 5px;
  padding: 15px;
  margin: 36px 0;
  color: #000;
}

/* --- 9. Diverses ------------------------------------------- */
.comment-content-text img { opacity: 1 !important; }

#shortcuts tr:nth-child(even) { background-color: #f2f2f2; }

.tableSort th {
  cursor: pointer;
  border: 1px solid #f90;
}

#popupview {
  z-index: 5;
  position: relative;
  width: 1280px;
  max-width: 100%;
  height: 1024px;
  border: 1px solid blue;
}

.merged-objects { display: block; }

.filter-select-list { box-shadow: 4px -2px 5px 1px rgba(173, 173, 173, 1); }

/* --- 10. Login --------------------------------------------- */
/* Das ::after-Overlay braucht ein positioniertes Elternelement.
   Auf der Login-Seite liefert das die cleanTheme-Regel weiter unten
   (position: relative). Greift .modalDisable auch ausserhalb der
   Login-Seite, deckt das Overlay dort den Viewport statt des
   Formulars – dann diese Zeile aktivieren (neue Regel, daher
   vorsichtshalb inaktiv):
.modalDisable .auth-form > * { position: relative; } */
.modalDisable .auth-form > *::after {
  content: '';
  position: absolute;
  inset: 0;
}

.cleanTheme .modalFull.loginPage .auth-form {
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  margin: 0;
  background: none;
  text-align: center;
}

.cleanTheme .modalFull.loginPage .auth-form > * {
  max-width: 430px;
  margin: 20px auto;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  border-radius: 6px;
  padding: 30px 48px 40px;
  border: 0;
  text-align: left;
}

.cleanTheme .modalFull.loginPage .auth-form #form-login,
.cleanTheme .modalFull.loginPage .auth-form #form-sso {
  display: inline-block;
  vertical-align: top;
  margin: 20px;
}
.cleanTheme .modalFull.loginPage .auth-form #form-sso { width: 400px; }

.auth-form #form-sso .sso-image {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 25px;
}
.auth-form #form-sso .groupButtons {
  margin-top: 48px;
  margin-bottom: -1px;
}