MediaWiki:Common.css

/* Hide full-width toggle button in Vector 2022 */
/*
.vector-settings {
  display: none !important;
}
*/

/* Logo */
.mw-logo-icon {
	margin-left: 15px;
}

/* Indicators-Container linksbündig */
.mw-indicators {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    float: left !important;   /* falls du diese Regel zum Linksverschieben drin hast */
}

/*alle Bilder transparent*/
img {
  background-color: transparent !important;
}

.white-bg img {
  background-color: #FFFFFF !important;;
}

.grey-bg img {
  background-color: #B0B0B0 !important;;
}

/*Abstand Menüpunkte verkleinert*/
.vector-pinnable-element .mw-list-item a, .vector-dropdown-content .mw-list-item a {
	padding: 3px 0;
}

/* Umschalten zum bisherigen Aussehen ausblenden */
div.vector-main-menu-action {
display: none;
}

/* Hilfe auf Kategorie-Seiten ausblenden */
div#mw-indicator-mw-helplink.mw-indicator {
display: none;
}

/* Inhaltsverzeichnis rechts */
div.float-right, table.float-right, ul.float-right, .float-right {
    clear: right;
    float: right;
    margin: 1em 0 1em 1em;
    display: block;
}

/* Colapse */
.mw-collapsible-toggle {
    float: none !important;
    display: inline-block !important;
}

/* Tabelle *//*
.wikitable {
    border-collapse: collapse;
    width: auto;
}*/

.wikitable td, .wikitable.customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

.wikitable tr:nth-child(even){background-color: rgba(232, 232, 232, 0.4);}

.wikitable tr:hover {background-color: rgba(133, 133, 133, 0.4);}

.wikitable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: rgba(163, 193, 221, 0.4) !important;
    color: black;
}

.wikitable.standard td {
    text-align: left;
    vertical-align: top;
}

.wikitable.green th {
    background-color: #B3CBAB !important;
}

.wikitable.yellow th {
    background-color: #FFFFD6 !important;
}

.wikitable.red th {
    background-color: #FFE5E5 !important;
}


/* === Schriftart: Inter (selbst gehostet, einheitlich auf allen Geräten) ===
   Überschriften 300 (Light) · Fließtext 400 (Regular) · Dateien: /w/resources/assets/fonts/ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/w/resources/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/w/resources/assets/fonts/inter-latin-wght-italic.woff2') format('woff2');
}

html, body {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2,
.vector-sticky-header-context-bar-primary {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
}

/* === Untergeordnete Überschriften besser vom Fließtext abheben === */
.mw-parser-output h3 {
  font-weight: 700;
}
.mw-parser-output h4 {
  font-weight: 600;
  font-size: 1.1em;   /* relativ – skaliert mit Klein/Standard/Groß */
  margin-top: 1.2em;
}
.mw-parser-output h5,
.mw-parser-output h6 {
  font-weight: 600;
  margin-top: 1.1em;
}

/* Klassen für Container und FlexBox */

/* ===== Container Basis ===== */
.container {
    /* Großzügigere Abstände */
    margin: 10px 4px;
    padding: 16px 18px;
    
    /* Modernere Ecken */
    border-radius: 10px;
    
    /* Subtiler Rahmen statt halbtransparentes Weiß */
    border: 1px solid rgba(0, 0, 0, 0.06);
    
    /* Sanfter Doppel-Schatten für leichte "Tiefe" */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.03);
    
    /* Smoothe Übergänge bei Theme-Wechsel und Hover */
    transition: background-color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
}

/* Sanftes Anheben bei Hover (optional, aber sehr modern) */
.container:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
                0 2px 4px -2px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

/* Dark Mode: dezenter Rahmen + dunklerer Schatten */
@media screen {
    html.skin-theme-clientpref-night .container {
        border-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                    0 1px 2px rgba(0, 0, 0, 0.15);
    }
}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container {
        border-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                    0 1px 2px rgba(0, 0, 0, 0.15);
    }
}

.container.c {
    background-color: #c9e8d4;
    /*#c9e9d4;*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.c {
        background-color: rgba(41, 98, 60, 0.6);
        /*#29623c*/
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.c {
        background-color: rgba(41, 98, 60, 0.6);
    }
}

.container.card {
    background-color: rgba(255, 255, 255, 0.5);
    /*#ffffff*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.card {
        background-color: rgba(255, 255, 255, 0.1);
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.card {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.container.ibkastl {
    background-color: rgba(237, 239, 242, 0.6);
    /*#f8f9fa;*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.ibkastl {
        background-color: #14171c;
        /*#242b33*/
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.ibkastl {
        background-color: #14171c;
    }
}

.container.pnw {
    background-color: #ffe9d4;
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.pnw {
        background-color: #ad5500;
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.pnw {
        background-color: #ad5500;
    }
}

.container.white {
    background-color: rgb(255, 255, 255);
}

.container.eplan {
    background-color: rgb(255, 212, 220);
    /*rgb(255, 212, 220)*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.eplan {
        background-color: rgba(255, 212, 220, 0.3);
        /*rgba(255, 212, 220, 0.3)*/
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.eplan {
        background-color: rgba(255, 212, 220, 0.3);
    }
}

.container.knowledge {
    background-color: #eee8f3;
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.knowledge {
        background-color: #5d3e77;
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.knowledge {
        background-color: #5d3e77;
    }
}

.container.md3 {
    background-color: rgb(182, 234, 237);
    /*#b6eaed*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.md3 {
        background-color: rgba(182, 234, 237, 0.4);
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.md3 {
        background-color: rgba(182, 234, 237, 0.4);
    }
}

.container.mediawiki {
    background-color: #d9d9d9;
    /*#dbe1e7;*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.mediawiki {
        background-color: rgba(217, 217, 217, 0.2);
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.mediawiki {
        background-color: rgba(217, 217, 217, 0.2);
    }
}

.container.standard {
    background-color: rgb(210, 229, 247);
    /*#d2e5f7*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.standard {
        background-color: rgba(210, 229, 247, 0.4);
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.standard {
        background-color: rgba(210, 229, 247, 0.4);
    }
}

.container.bosch {
    background-color: #cdede2;
    /*#ccece2*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.bosch {
        background-color: rgba(78, 97, 90, 0.6);
        /*#4e615a*/
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.bosch {
        background-color: rgba(78, 97, 90, 0.6);
    }
}

.container.boschfile {
    background-color: #fff6cd;
    /*#fff6cd*/
}
/* Forced night mode (user setting) */
@media screen {
    html.skin-theme-clientpref-night .container.boschfile {
        background-color: rgba(126, 103, 0, 0.6);
        /*#7e6700*/
    }
}
/* Auto night mode (OS preference) */
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .container.boschfile {
        background-color: rgba(126, 103, 0, 0.6);
    }
}

.flex{
display:-webkit-flex;
display:-ms-flexbox; /* IE 10 */
display:flex;

-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap; /* IE 10 */
flex-wrap:wrap;

-webkit-justify-content:space-around;
-ms-flex-pack:justify; /* IE 10 */
justify-content:space-around;

}

.flex.end{
-webkit-align-items:flex-end;
-ms-flex-align: end; /* IE 10 */
align-items:flex-end;

-webkit-align-content:flex-end;
-ms-flex-line-pack:end; /* IE 10 */
align-content:flex-end;

}

.flex.start{
-webkit-align-items:flex-start;
-ms-flex-align:start; /* IE 10 */
align-items:flex-start;

-webkit-align-content:flex-start;
-ms-flex-line-pack:start; /* IE 10 */
align-content:flex-start;
}

/* Screenshot-Vorlage: Bilder an Bildschirmbreite anpassen */
.flex.start img {
    max-width: 100%;
    height: auto;
}