/*****************************************************************************************************************************************************************************************
STANDARDWERTE
*****************************************************************************************************************************************************************************************/
:root {
/* Farben festlegen
--farbe_header: white; /* Navigation::Farbe des Headers *
--farbe_logo_hintergrund: transparent; /* Navigation::Hintergrundfarbe des Logos (transparent = keine Hintergrundfarbe) *
--farbe_navigationsbereich: black; /* Navigation::Hintergrundfarbe des Navigationsbereiches *
--transparenz_navigationsbereich: 0.8; /* Navigation::Transparenz der Hintergrundfarbe des Navigationsbereiches (0.5 = 50%) *
--farbe_link_ebene1: black; /* Navigation::Farbe der Schrift von Ebene 1 *
--farbe_link_ebene2: gray; /* Navigation::Farbe der Schrift von Ebene 2 *
--farbe_link_ebene3: gray; /* Navigation::Farbe der Schrift von Ebene 3 *
--farbe_link_ebene1_mobile: gray; /* Navigation::Farbe der Schrift von Ebene 1 im Mobilfall *
--farbe_link_ebene2_mobile: gray; /* Navigation::Farbe der Schrift von Ebene 2 im Mobilfall *
--farbe_link_ebene3_mobile: gray; /* Navigation::Farbe der Schrift von Ebene 3 im Mobilfall *
--farbe_link_hover_ebene1: gray; /* Navigation::Farbe der Schrift von Ebene 1 beim Drüberhouvern *
--farbe_link_hover_ebene2: white; /* Navigation::Farbe der Schrift von Ebene 2 beim Drüberhouvern *
--farbe_link_hover_ebene3: white; /* Navigation::Farbe der Schrift von Ebene 3 beim Drüberhouvern *
--farbe_link_hover_mobile: white; /* Navigation::Farbe der Schrift im Mobilfall beim Drüberhouvern *
--farbe_btnnavi_mobile: black; /* Navigation::Farbe des Navigationsbutton im Mobilfall *
--farbe_btnnavi2_mobile: white; /* Navigation::Hintergrundfarbe des Navigationsbutton im Mobilfall (transparent = keine Farbe) *
--transparenz_btnnavi2_mobile: 0.2; /* Navigation::Transparenz der Hintergrundfarbe des Navigationsbutton im Mobilfall (0.5 = 50%) *
--farbe_btnnavi3_mobile: red; /* Navigation::Hintergrundfarbe des Navigationsbutton im Mobilfall, wenn Navigation geöffnet *
--farbe_login_hintergrund: black; /* Navigation::Hintergrundfarbe im Hintergrund des Popups *
--trans_login_hintergrund: 0.7; /* Navigation::Transparenz der Hintergrundfarbe im Hintergrund des Popups *
--farbe_login_popup_hintergrund: white; /* Navigation::Hintergrundfarbe des Popups *
--trans_login_popup_hintergrund: 1.0; /* Navigation::Transparenz der Hintergrundfarbe des Popups *
--farbe_login_popup_schrift: black; /* Navigation::Farbe der Schrift im Popup *
--farbe_login_eingabe_hintergrund: initial; /* Navigation::Hintergrundfarbe des Eingabefeldes im Popup *
--farbe_suche_hintergrund: black; /* Navigation::Hintergrundfarbe im Hintergrund des Suche-Popups *
--trans_suche_hintergrund: 0.8; /* Navigation::Transparenz der Hintergrundfarbe im Hintergrund des Suche-Popups *
--farbe_suche_popup_hintergrund: transparent; /* Navigation::Hintergrundfarbe des Suche-Popups *
--trans_suche_popup_hintergrund: 1.0; /* Navigation::Transparenz der Hintergrundfarbe des Suche-Popups *
--farbe_suche_popup_schrift: white; /* Navigation::Farbe der Schrift des Eingabefeldes im Suche-Popup *
--farbe_kachel: silver; /* Elemente::Hintergrundfarbe der Kachel *
--transparenz_kachel: 0.5; /* Elemente::Transparenz der Hintergrundfarbe der Kachel *
--farbe_schrift_kachel: black; /* Elemente::Farbe der Schrift der Kachel *
--farbe_kachel_schalter: gray; /* Elemente::Hintergrundfarbe des Schalters auf der Kachel *
--farbe_schrift_kachel_schalter: white; /* Elemente::Farbe der Schrift des Schalters auf der Kachel *
--farbe_infobereich_navi: white; /* Elemente::Farbe der Navigationspunkte im Infobereich *
--farbe_infobereich_text: white; /* Elemente::Farbe des Textes im Infobereich *
--farbe_helpcenter: gray; /* Elemente::Farbe der Hilfekonsole / Helpcenter *
--farbe_helpcenter_hover: silver; /* Elemente::Farbe der Hilfekonsole / Helpcenter beim Hovern *
--color_hint: #5BA2DA; /* Elemente::Farbe um auf etwas hinzuweisen bzw. hinzudeuten *
--farbe_social_icon_hover: #5BA2DA; /* Bibliothek::Hintergrundfarbe beim Hovern der Social-Icons *
--farbe_sitemap_hover: #5BA2DA; /* Bibliothek::Schriftfarbe beim Hovern der Programmpunkte *
/*Schrift festlegen
--schrift_groeße_navi_ebene1: 18px; /* Navigation::Größe der Schrift von Ebene 1 *
--schrift_groeße_navi_ebene2: 16px; /* Navigation::Größe der Schrift von Ebene 2 *
--schrift_groeße_navi_ebene3: 16px; /* Navigation::Größe der Schrift von Ebene 3 *
--schrift_groeße_navi_mobile: 25px; /* Navigation::Größe der Schrift im Mobilfall *
/*Größen festlegen
--hoehe_header: 80px; /* Navigation::Höhe des Headers *
--hoehe_header_mobile: 60px; /* Navigation::Höhe des Headers im Mobilfall *
--hoehe_logo: 80px; /* Navigation::Höhe des Logos (relevant für die Klassen logo-ex) *
--hoehe_navigationsbereich: 300px; /* Navigation::Höhe des Navigationsbereiches *
--breite_navigationsbereich_mobile: 100%; /* Navigation::Breite des Navigationsbereiches im Mobilfall *
--entfernung_lvlzulvl: 200px; /* Navigation::Entfernung im Navigationsbereich zwischen Ebene 2 & 3 (je nach Länge der Menüpunkte in Ebene 2 angepassn) *
--groesse_btnnavi_mobile: 40px; /* Navigation::Größe des Buttons, zum Einblenden der mobilen Navigation *
--hoehe_login_popup: 400px; /* Navigation::Höhe des Popups (auto = passt sich flexibel an) *
--breite_login_popup: 50%; /* Navigation::Breite des Popups (Prozentual -> %) *
--breite_login_popup_rest: 50%; /* Navigation::Rest Breite des Popups bis 100% (--breite_login_popup: 60% -> --breite_login_popup_rest: 40%) *
--hoehe_suche_popup: 400px; /* Navigation::Höhe des Suche-Popups (auto = passt sich flexibel an) *
--breite_suche_popup: 50%; /* Navigation::Breite des Suche-Popups (Prozentual -> %) *
--breite_suche_popup_rest: 50%; /* Navigation::Rest Breite des Suche-Popups bis 100% (--breite_suche_popup: 60% -> --breite_suche_popup_rest: 40%)
--hoehe_header: 80px; /* Navigation::Höhe des Headers in std_navigation *
--hoehe_header_mobile: 60px; /* Navigation::Höhe des Headers im Mobilfall in std_navigation *
--hoehe_logo: 80px; /* Navigation::Höhe des Logos (relevant für die Klassen logo-ex in std_navigation) *
--hoehe_infobereich: 300px; /* Navigation::Höhe des Infobereiches (0 = wird nicht angezeigt) *
--groesse_btnnavi_mobile: 40px; /* Navigation::Größe des Buttons, zum Einblenden der mobilen Navigation *
--hoehe_footer: 115px; /* Bibliothek::Höhe des Footers
--entfernung_elementzubottom: 50px; /* Bibliothek::Entfernung des Elementes zum unteren Bildschirmrand *
--entfernung_elementzubottom_mobile: 100px; /* Bibliothek::Entfernung des Elementes zum unteren Bildschirmrand im Mobilfall *
--schrift_default: 18px; /* Bibliothek::Standschriftardgröße *
--hoehe_footer: 115px; /* Bibliothek::Höhe des Footers *
--hoehe_header: 80px; /* Bibliothek::Höhe des Headers *
--hoehe_header_mobile: 60px; /* Bibliothek::Höhe des Headers im Mobilfall */
}
/****************************************************************************************************************************************************************************************
DATEI: std_defaults.css
*****************************************************************************************************************************************************************************************/
a:active,
a:focus {
outline: none
}
/****************************************************************************************************************************************************************************************
DATEI: std_search_table.css
*****************************************************************************************************************************************************************************************/
table {
border-collapse: collapse;
}
/** Header / Überschrift **/
.Tbl_Header {
background-color: #5BA2DA;
font-size: 24px !important;
font-weight: bold;
text-align: left;
}
.Tbl_Header td {
padding: 5px;
}
.Tbl_Header td,
.Tbl_Header a {
color: white !important;
}
.Tbl_Header a {
display: block;
width: 100%;
}
.Tbl_Header img {
float: right;
margin: 10px 5px;
}
/** Filterfelder **/
.Tbl_HeaderFields {
background-color: white;
}
.Tbl_HeaderFields input {
width: 100% !important;
}
/** Rahmen um jeden Zelle **/
.Tbl_Col_Header,
.Tbl_Col,
.Tbl_Col_Right,
.Tbl_Col_Center,
.Tbl_ColGreen,
.Tbl_ColGreen_Right,
.Tbl_ColGreen_Center,
.Tbl_ColRed,
.Tbl_ColRed_Right,
.Tbl_ColRed_Center,
.Tbl_ColNeutral,
.Tbl_ColNeutral_Right,
.Tbl_ColNeutral_Center {
border: 1px solid #bababa;
}
/** Filter-Button ausblenden, wird nicht mehr benötigt **/
.filterbtn_background {
display: none;
}
/**
* Datenzeilen
**/
/** Datensatz **/
.Tbl_Line td,
.Tbl_Line_2 td,
.Tbl_Line_Sel td,
.Tbl_Line_Bold td,
.Tbl_Line_2_Bold td,
.Tbl_Line_Sel_Bold td,
.Tbl_Line_Gesperrt td {
color: #333333;
text-align: left;
font-weight: normal;
vertical-align: top;
padding: 3px 5px 3px 5px;
min-height: 33.71px;
hyphens: auto;
}
.Tbl_Line_Gesperrt td {
/* Row gesperrter Datensatz */
background-color: #f2dede;
/* Hintergrundfarbe der Row bei gesperrtem Datensatz */
}
.Tbl_Line_Gesperrt td a {
/* Col Link gesperrter Datensatz */
color: #A94442;
/* Schriftfarbe der Line bei gesperrtem Datensatz */
}
.Tbl_Col_Right,
.Tbl_ColGreen_Right,
.Tbl_ColRed_Right,
.Tbl_ColNeutral_Right {
text-align: right;
}
.Tbl_Col_Center,
.Tbl_ColGreen_Center,
.Tbl_ColRed_Center,
.Tbl_ColNeutral_Center {
text-align: center;
}
.Tbl_Line_Bold td,
.Tbl_Line_Sel_Bold td,
.Tbl_Line_Neutral_Bold td {
font-weight: bold;
}
/** Hintergrunfarbe **/
.Tbl_Line,
.Tbl_Line_Bold {
background-color: #FFFFFF;
}
.Tbl_Line_2,
.Tbl_Line_2_Bold {
background-color: #E8E8E8;
}
.Tbl_Line_Sel,
.Tbl_Line_Sel_Bold {
background-color: white;
}
.Tbl_Line_Sel td,
.Tbl_Line_Sel_Bold td {
background-color: rgba(91, 162, 218, 0.5);
}
/** Hintergrundfarbe für bestimmte Spalten **/
.Tbl_ColGreen,
.Tbl_ColGreen_Right,
.Tbl_ColGreen_Center {
background-color: #00FF00;
}
.Tbl_ColRed,
.Tbl_ColRed_Right,
.Tbl_ColRed_Center {
background-color: #FF0000;
}
.Tbl_ColNeutral,
.Tbl_ColNeutral_Right,
.Tbl_ColNeutral_Center {
background-color: #EEEEFF;
}
/** Links **/
.Tbl_Line td>a,
.Tbl_Line_2 td>a,
.Tbl_Line_Sel td>a,
.Tbl_Line_Bold td>a,
.Tbl_Line_2_Bold td>a,
.Tbl_Line_Sel_Bold td>a {
color: #333333;
display: block;
width: 100%;
text-decoration: none;
}
/** Link im Link **/
.Tbl_Line td>a a,
.Tbl_Line_2 td>a a,
.Tbl_Line_Sel td>a a,
.Tbl_Line_Bold td>a a,
.Tbl_Line_2_Bold td>a a,
.Tbl_Line_Sel_Bold td>a a {
white-space: normal;
hyphens: none;
}
/** Hovereffekt **/
.Tbl_Line:hover,
.Tbl_Line_2:hover,
.Tbl_Line_Sel:hover,
.Tbl_Line_Bold:hover,
.Tbl_Line_2_Bold:hover,
.Tbl_Line_Sel_Bold:hover,
.Tbl_Line_Gesperrt:hover {
box-shadow: 0px 0px 15px 1px rgba(91, 162, 218, 1);
}
.Tbl_Line:hover+tr,
.Tbl_Line_2:hover+tr,
.Tbl_Line_Sel:hover+tr,
.Tbl_Line_Bold:hover+tr,
.Tbl_Line_2_Bold:hover+tr,
.Tbl_Line_Sel_Bold:hover+tr,
.Tbl_Line_Gesperrt:hover+tr {
box-shadow: inset 0px 16px 15px -15px rgba(91, 162, 218, 1);
}
.Uebernahme_Button {
/*Auswählfeld für Popup (Derzeit nicht dargestellt)*/
color: #8E8D92;
background-color: #F3F3F3;
border-color: #BFBFBF;
border-radius: 3px;
display: inline-block;
border-width: 1px;
border-style: solid;
}
@media only screen and (max-width: 1024px) {
/* .Tbl_Header td:not(.fahrertouren, .sendungsverfolgung),
.Tbl_Line td:not(.fahrertouren, .sendungsverfolgung),
.Tbl_Line_2 td:not(.fahrertouren, .sendungsverfolgung),
.Tbl_Line_Sel td:not(.fahrertouren, .sendungsverfolgung),
.Tbl_Line_Bold td:not(.fahrertouren, .sendungsverfolgung),
.Tbl_Line_2_Bold td:not(.fahrertouren, .sendungsverfolgung),
.Tbl_Line_Sel_Bold td:not(.fahrertouren, .sendungsverfolgung) {
display: block;
width: 100% !important;
} */
}
.Tbl_Popup_Header {
text-align: center;
}
.Tbl_Popup_Header_Text {
font-weight: bold;
font-size: 17px;
line-height: 70px;
}
@media only screen and (max-width: 250px) {
/* Spezialfall - Damit Text nicht über Logo liegt */
.Tbl_Popup_Header_Text {
display: none;
}
}
.Tbl_Popup_Header_CBtn {
float: right;
margin-top: 16px;
}
.Tbl_Popup_Header_CBtn_Text {
line-height: 0 !important;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Tbl_Popup_Header_Text {
line-height: 50px;
}
.Tbl_Popup_Header_CBtn {
margin-top: 0px;
}
.Tbl_Popup_Header_CBtn_Text {
display: none;
}
}
/****************************************************************************************************************************************************************************************
DATEI: std_library_01.css
*****************************************************************************************************************************************************************************************/
/** ********************************************************* ELEMENTE ********************************************************* **/
/** Elememt ausblenden **/
.hidden {
opacity: 0 !important;
visibility: hidden !important;
}
/**
* Pop-Up - flexibel einsetzbar / Allrounder
* Eigenschaften:
* - zentriert sich mittig des Display´s
* - Höhe passt sich nach dem Inhalt an
* - Breite ist maximal so breit wie der Handyfall + einen Außenabstand von 10px
* - Text wird als Blocksatz angezeigt
* HTML-Aufbau:
**/
/* Wrapper - Hintergrund hinter dem Pop-Up */
.popup-fit-wrp {
background-color: rgba(255, 255, 255, 0.5);
width: 100%;
min-height: 100%;
height: auto;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
opacity: 1;
visibility: visible;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s, visibility 0.5s;
}
/* Pop-Up */
.popup-fit {
text-align: justify;
position: relative;
margin: 10px;
max-height: calc(100vh - 60px);
max-width: 671px;
padding: 20px;
border: 2px solid #bababa;
border-radius: 5px;
color: black;
background-color: white;
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.75);
}
.popup-fit.report.report-success {
box-shadow: 0px 0px 20px -5px rgba(60, 118, 61, 0.75);
}
.popup-fit.report.report-info {
box-shadow: 0px 0px 20px -5px rgba(49, 112, 143, 0.75);
}
.popup-fit.report.report-warning {
box-shadow: 0px 0px 20px -5px rgba(138, 109, 59, 0.75);
}
.popup-fit.report.report-danger {
box-shadow: 0px 0px 20px -5px rgba(169, 68, 66, 0.75);
}
/* Close-Button */
.popup-fit .popup-fit-btn-close {
position: absolute;
top: -14.5px;
right: -14.5px;
border: 1px solid #C3C3C3;
border-radius: 50%;
width: 33px;
height: 33px;
padding: 5px;
background-color: rgba(249, 249, 249, 0.9);
box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.75);
cursor: pointer;
}
.popup-fit .popup-fit-btn-close::before {
margin: auto;
height: 20px;
width: 20px;
display: block;
content: "";
background-image: url(../gfx/x-btn.png);
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
background-size: contain;
}
/* Eingabefeld auf volle Breite setzen */
.popup-fit input {
width: 100%;
}
/* Schaltflächen rechts ausrichten mit Abstand nach Oben */
.popup-fit .btn-line {
margin-top: 20px;
margin-bottom: 20px;
text-align: right;
}
/* Abstand zur nächsten Schaltflächen */
.popup-fit .btn-line button,
.popup-fit .btn-line input {
margin-left: 10px;
}
@media only screen and (max-width: 671px) {
/* Handy */
.popup-fit {
width: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between
}
.popup-fit .btn-line {
display: flex;
flex-direction: column;
}
.popup-fit .btn-line button,
.popup-fit .btn-line input {
margin-left: 0;
margin-top: 10px;
}
}
.timeline {
box-sizing: content-box !important;
width: 100%;
}
.timeline_event {
box-sizing: inherit !important;
display: flex;
justify-content: center;
align-items: stretch;
width: 100%;
color: #454444;
}
/** Zeitleiste - Jahr **/
.timeline_year {
font-size: 40px;
font-weight: bold;
box-sizing: inherit !important;
position: sticky;
order: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
width: calc(50% - 70px);
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
}
.timeline_event:nth-child(even)>.timeline_year {
/** Reihenfolge ändern **/
order: 3;
flex-direction: row-reverse;
margin-right: 0px;
margin-left: 20px;
}
/** Zeitleiste - Punkt & Verbindugsstriche **/
.timeline_point {
box-sizing: inherit !important;
order: 2;
display: flex;
justify-content: center;
align-items: center;
width: 10px;
min-height: 120px;
margin: 0px 45px;
background-color: rgba(91, 162, 218, 0.7);
}
.timeline_event:first-child>.timeline_point {
/** Erster Verbindungsstrich **/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.timeline_event:last-child>.timeline_point {
/** Letzter Verbindungsstrich **/
background-color: transparent;
background-image: linear-gradient(rgba(91, 162, 218, 0.7) 50%, transparent 0%);
}
.timeline_point:before {
box-sizing: inherit !important;
position: absolute;
content: "";
height: 5px;
width: 50px;
margin-right: 50px;
background-color: rgba(91, 162, 218, 0.7);
}
.timeline_event:nth-child(even)>.timeline_point:before {
margin-right: 0px;
margin-left: 50px;
}
.timeline_point:after {
box-sizing: inherit !important;
position: absolute;
z-index: 1;
content: "";
border: 4px solid #5BA2DA;
border-radius: 50%;
height: 12px;
width: 12px;
background-color: white;
}
/** Zeitleiste - Text **/
.timeline_text {
font-size: 18px;
text-align: left;
box-sizing: inherit !important;
order: 3;
width: calc(50% - 70px);
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.timeline_event:nth-child(even)>.timeline_text {
/** Reihenfolge ändern **/
text-align: right;
order: 1;
margin-left: 0px;
margin-right: 20px;
}
/** Zeitleiste - Grafik **/
.timeline_icon {
box-sizing: inherit !important;
height: 90px;
width: 90px;
border: 5px solid #5BA2DA;
border-radius: 50%;
background-image: url('../gfx/kein_Bild_vorhanden.jpg');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.timeline_year .timeline_icon {
margin-right: -20px;
margin-left: 20px;
}
.timeline_event:nth-child(even) .timeline_icon {
margin-right: 20px;
margin-left: -20px;
}
/* Mobilfall */
@media only screen and (max-width: 1024px) {
.timeline_year {
order: 2 !important;
justify-content: center !important;
width: 120px;
margin-right: 0px !important;
margin-left: 0px !important;
}
.timeline_point {
order: 1 !important;
margin: 0px 25px;
}
.timeline_point:before {
visibility: hidden;
}
.timeline_text {
text-align: left !important;
order: 3 !important;
width: calc(100% - 180px);
margin-left: 20px !important;
margin-right: 0px !important;
}
.timeline_year .timeline_icon {
position: absolute !important;
z-index: -1;
margin-right: 0px !important;
margin-left: 0px !important;
opacity: 0.5;
}
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** ********************************************************** LISTEN ********************************************************** **/
/** Standardlisten mit Untermenü durchnummerieren -> 1. 1.1 1.2 2. 3. - - ...
- Eins
- Eins.Eins
- Eins.Zwei
- Zwei
- Drei
**/
ol.list_inc_submenu {
padding-left: 0;
}
ol.list_inc_submenu,
.list_inc_submenu ol {
counter-reset: item;
}
ol.list_inc_submenu>li,
.list_inc_submenu ol>li {
display: block;
}
ol.list_inc_submenu>li:before,
.list_inc_submenu ol>li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** ********************************************************* TABELLEN ********************************************************* **/
.tbl_auto_dyn {
border: 1px solid black;
}
.tbl_auto_dyn>div {
width: 100%;
display: flex;
}
.tbl_auto_dyn>div>div {
padding: 5px;
}
/** Breite dynamisch festlegen (Bis 10 div-Tags wird die Breite proportional berechnet) **/
.tbl_auto_dyn>div>div:nth-last-child(2):first-child,
.tbl_auto_dyn>div>div:nth-last-child(2):first-child~div {
width: calc(100% / 2);
}
.tbl_auto_dyn>div>div:nth-last-child(3):first-child,
.tbl_auto_dyn>div>div:nth-last-child(3):first-child~div {
width: calc(100% / 3);
}
.tbl_auto_dyn>div>div:nth-last-child(4):first-child,
.tbl_auto_dyn>div>div:nth-last-child(4):first-child~div {
width: calc(100% / 4);
}
.tbl_auto_dyn>div>div:nth-last-child(5):first-child,
.tbl_auto_dyn>div>div:nth-last-child(5):first-child~div {
width: calc(100% / 5);
}
.tbl_auto_dyn>div>div:nth-last-child(6):first-child,
.tbl_auto_dyn>div>div:nth-last-child(6):first-child~div {
width: calc(100% / 6);
}
.tbl_auto_dyn>div>div:nth-last-child(7):first-child,
.tbl_auto_dyn>div>div:nth-last-child(7):first-child~div {
width: calc(100% / 7);
}
.tbl_auto_dyn>div>div:nth-last-child(8):first-child,
.tbl_auto_dyn>div>div:nth-last-child(8):first-child~div {
width: calc(100% / 8);
}
.tbl_auto_dyn>div>div:nth-last-child(9):first-child,
.tbl_auto_dyn>div>div:nth-last-child(9):first-child~div {
width: calc(100% / 9);
}
.tbl_auto_dyn>div>div:nth-last-child(10):first-child,
.tbl_auto_dyn>div>div:nth-last-child(10):first-child~div {
width: calc(100% / 10);
}
/** Hintergrundfarbe für alle ungleichen Zeilen **/
.tbl_auto_dyn>div:nth-child(odd) {
background-color: aliceblue;
}
/** Hintergrundfarbe für alle gleichen Zeilen **/
.tbl_auto_dyn>div:nth-child(even) {
background-color: white;
}
/** Erste Zeile enthält Überschriften **/
.tbl_auto_dyn.lbl_row_1>div:first-child {
font-weight: bold;
}
/** Erste Spalte enthält Überschriften **/
.tbl_auto_dyn.lbl_col_1>div>div:first-child {
font-weight: bold;
}
/** Im Mobilfall Spalten untereinander ausgeben **/
@media only screen and (max-width: 671px) {
/* Handy */
.tbl_auto_dyn>div {
flex-direction: column;
}
.tbl_auto_dyn>div>div {
width: 100% !important;
}
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** ****************************************************** ÜBERSCHRIFTEN ******************************************************* **/
/** Überschiften wie H-Tags, wenn diese nicht verwendet werden können
**/
.lbl_h1,
.lbl_h2,
.lbl_h3,
.lbl_h4,
.lbl_h5,
.lbl_h6 {
display: block;
}
.lbl_h1 {
font-size: 32px;
margin: 21.44px 0;
line-height: 37.44px;
}
.lbl_h2 {
font-size: 24px;
margin: 19.92px 0;
line-height: 27.84px;
}
.lbl_h3 {
font-size: 18.72px;
margin: 18.7184px 0;
line-height: 22.56px;
}
.lbl_h4 {
font-size: 16px;
margin: 21.28px 0;
line-height: 19.2px;
}
.lbl_h5 {
font-size: 13.28px;
margin: 22.176px 0;
line-height: 14.72px;
}
.lbl_h6 {
font-size: 10.72px;
margin: 24.9776px 0;
line-height: 12.16px;
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** ********************************************************* DISPLAYS ********************************************************* **/
.disp_flex {
display: flex;
}
.disp_inlineflex {
display: inline-flex;
}
/** Verteilt alle direkten Nachkommen in einer Zeile, bzw. in einer Spalt -> rev = von hinten nach vorne **/
.flex_direc_row {
flex-direction: row;
}
.flex_direc_row_rev {
flex-direction: row-reverse;
}
.flex_direc_col {
flex-direction: column;
}
.flex_direc_col_rev {
flex-direction: column-reverse;
}
/** Packt alle Flexboxen in eine Zeile bzw. Spalte (nowrap),
bricht die Zeile / Spalte um (wrap) oder kehrt die Reihenfolge der Flexboxen um (wrap-reverse). **/
.flex_wrap_now {
flex-wrap: nowrap;
}
.flex_wrap_w {
flex-wrap: wrap;
}
.flex_wrap_w_rev {
flex-wrap: wrap-reverse;
}
/** richtet Flexboxen entlang der Hauptachse (links, rechts, zentriert) und
verteilt den freien Raum zwischen den Flexboxen mit space-between bzw. space-around. **/
.flex_just_cont_start {
justify-content: flex-start;
}
.flex_just_cont_end {
justify-content: flex-end;
}
.flex_just_cont_center {
justify-content: center;
}
.flex_just_cont_sb {
justify-content: space-between;
}
.flex_just_cont_sa {
justify-content: space-around;
}
/** richtet Flexboxen an den Kanten oben, unten oder zentriert entlang der zweiten Achse aus **/
.flex_ali_items_start {
align-items: flex-start;
}
.flex_ali_items_end {
align-items: flex-end;
}
.flex_ali_items_center {
align-items: center;
}
.flex_ali_items_str {
align-items: stretch;
}
.flex_ali_items_base {
align-items: baseline;
}
/** verteilt die Flexboxen anhand ihres Inhalts auf der zweiten Achse **/
.flex_ali_cont_start {
align-content: flex-start;
}
.flex_ali_cont_end {
align-content: flex-end;
}
.flex_ali_cont_center {
align-content: center;
}
.flex_ali_cont_sb {
align-content: space-between;
}
.flex_ali_cont_sa {
align-content: space-around;
}
.flex_ali_cont_str {
align-content: stretch;
}
/** ***************************** Mobilfall ******************************* **/
@media only screen and (max-width: 1024px) {
.disp_flex_mob {
display: flex;
}
.disp_inlineflex_mob {
display: inline-flex;
}
/** Verteilt alle direkten Nachkommen in einer Zeile, bzw. in einer Spalt -> rev = von hinten nach vorne **/
.flex_direc_row_mob {
flex-direction: row;
}
.flex_direc_row_rev_mob {
flex-direction: row-reverse;
}
.flex_direc_col_mob {
flex-direction: column;
}
.flex_direc_col_rev_mob {
flex-direction: column-reverse;
}
/** Packt alle Flexboxen in eine Zeile bzw. Spalte (nowrap),
bricht die Zeile / Spalte um (wrap) oder kehrt die Reihenfolge der Flexboxen um (wrap-reverse). **/
.flex_wrap_now_mob {
flex-wrap: nowrap;
}
.flex_wrap_w_mob {
flex-wrap: wrap;
}
.flex_wrap_w_rev_mob {
flex-wrap: wrap-reverse;
}
/** richtet Flexboxen entlang der Hauptachse (links, rechts, zentriert) und
verteilt den freien Raum zwischen den Flexboxen mit space-between bzw. space-around. **/
.flex_just_cont_start_mob {
justify-content: flex-start;
}
.flex_just_cont_end_mob {
justify-content: flex-end;
}
.flex_just_cont_center_mob {
justify-content: center;
}
.flex_just_cont_sb_mob {
justify-content: space-between;
}
.flex_just_cont_sa_mob {
justify-content: space-around;
}
/** richtet Flexboxen an den Kanten oben, unten oder zentriert entlang der zweiten Achse aus **/
.flex_ali_items_start_mob {
align-items: flex-start;
}
.flex_ali_items_end_mob {
align-items: flex-end;
}
.flex_ali_items_center_mob {
align-items: center;
}
.flex_ali_items_str_mob {
align-items: stretch;
}
.flex_ali_items_base_mob {
align-items: baseline;
}
/** verteilt die Flexboxen anhand ihres Inhalts auf der zweiten Achse **/
.flex_ali_cont_start_mob {
align-content: flex-start;
}
.flex_ali_cont_end_mob {
align-content: flex-end;
}
.flex_ali_cont_center_mob {
align-content: center;
}
.flex_ali_cont_sb_mob {
align-content: space-between;
}
.flex_ali_cont_sa_mob {
align-content: space-around;
}
.flex_ali_cont_str_mob {
align-content: stretch;
}
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** ********************************************************** BOXEN *********************************************************** **/
.combox {
width: 100%;
}
.combox>div:first-child {
padding: 5px;
min-height: 45px;
background-color: rgb(210, 210, 210);
}
.combox .combox_label {
font-size: 18px;
font-weight: 400;
padding-left: 10px;
padding-right: 10px;
width: 100%;
}
.combox .combox_button {
border-radius: 50%;
padding: 5px;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
border: 1px solid rgba(0, 0, 0, 0.3);
}
.combox .combox_button:hover {
background-color: #e6e6e6;
background-image: inherit;
}
.combox .combox_icon {
width: 23px;
height: 23px;
background-image: url("../gfx/arrow-right-btn.png");
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transition: transform 1s;
}
.combox [onclick] {
cursor: pointer;
}
.combox.is_active .box_icon_open {
transform: rotate(90deg);
transition: transform 1s;
}
.combox .combox_text {
border: 2px solid transparent;
border-top-width: 0px;
padding: 0px;
height: 0px;
overflow: hidden;
transition: height 1s, padding-left 0s linear 1s, padding-top 1s, border 1s linear 0.2s;
}
.combox.is_active .combox_text {
border: 2px solid rgb(210, 210, 210);
border-top-width: 0px;
padding: 5px;
height: auto;
transition: height 1s, padding-top 1s, border 1s;
}
/** ***************************** Mobilfall ******************************* **/
@media only screen and (max-width: 1024px) {
.combox .combox_icon.sz_mob_40 {
width: 40px;
height: 40px;
}
.combox .text_sz_mob_22 {
font-size: 22px !important;
}
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** ********************************************************* BEREICHE ********************************************************* **/
.view-wrp {
width: 100%;
height: 100vh !important;
}
.view-wrp-min {
min-width: 100%;
min-height: 100vh !important;
}
.view-wrp-navigation {
width: 100%;
height: calc(100vh - 80px) !important;
}
.view-wrp-min-navigation {
min-width: 100%;
min-height: calc(100vh - 80px) !important;
}
/** ---------------------------------------------------------------------------------------------------------------------------- **/
/** *********************************************** SCHALTER / TASTER / BUTTONS ************************************************ **/
.button_circle {
border-radius: 50%;
min-width: 33px;
min-height: 33px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.button_circle>div {
margin: auto;
width: 20px;
height: 20px;
}
.button_circle:hover {
background-color: #e6e6e6;
background-image: inherit;
}
/** ***************************** Mobilfall ******************************* **/
@media only screen and (max-width: 1024px) {
.button_circle {
min-width: 52px;
min-height: 52px;
}
.button_circle>div {
width: 35px;
height: 35px;
}
}
/****************************************************************************************************************************************************************************************
DATEI: std_library.css
*****************************************************************************************************************************************************************************************/
/*********************************************************************************/
/**************************************Zeile**************************************/
.full-line {
width: 100%;
}
.full-line.center {
text-align: center;
}
/*********************************************************************************/
/***********************************Ausrichtung***********************************/
.bottom-center {
position: absolute;
text-align: center;
bottom: 15px;
width: 100%;
}
.bottom-center.spec {
/* bottom: 50px;
bottom: var(--entfernung_elementzubottom, 50px); */
bottom: 110px;
bottom: var(--entfernung_elementzubottom, 110px);
}
.full-screen-height {
/** Setzt die Höhe auf mindestens die Höhe des verwendeten Bildschirms.
Sollte der Content darüberhinaus höher sein, wird die Höhe des Content verwendet. */
min-height: 100vh;
height: 100%;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.bottom-center.spec {
bottom: 100px;
bottom: var(--entfernung_elementzubottom_mobile, 100px);
}
}
/*********************************************************************************/
/**************************************Footer*************************************/
html,
body {
/* Ganze Seite mit 100% reservieren, damit der Footer am unteren Rand des Fensters ausgerichtet werden kann */
height: 100%;
}
.site {
/**
* Der Bereich "site" ist der Content + Footer
* Mindesthöhe ist 100% abzüglich der Höhe des Headers, damit bei Seiten ohne Scrollbalken, kein Scrollbalken erzeugt wird
**/
position: relative;
min-height: calc(100% - 80px);
min-height: calc(100% - var(--hoehe_header, 80px));
margin: 0 auto;
display: flex;
align-items: stretch;
align-content: stretch;
flex-wrap: wrap;
}
#main_content:after {
/* Bereich für den Footer ohne Inhalt reservieren */
height: 115px;
height: var(--hoehe_footer, 115px);
content: "";
display: block;
}
.site-footer,
.site-footer>div {
/* Höhe des Footers und der Einzelelemente */
min-height: 115px;
min-height: var(--hoehe_footer, 115px);
}
.site-footer {
/* Bereich des Footers */
background-color: white;
position: absolute;
bottom: 0;
width: 100%;
}
.footer-line {
/* Bereich innerhalb des Footers */
background-color: white;
float: left;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.footer-line.section {
/* Bereich im Footer für die Links */
width: 70%;
padding-right: 0;
}
.footer-line.social {
/* Bereich im Footer für die Social-Icons */
width: 30%;
padding-left: 0;
}
.footer-section {
/* Ausrichtung der Links im Footer */
float: left;
padding-right: 30px;
width: 25%;
}
.footer-section>ul {
padding-left: 0;
margin-bottom: 0;
}
.footer-list-title {}
.footer-list-item {
/* Punkte im Footer */
list-style: none;
}
.footer-list-item>a:hover {
/* Punkte im Footer beim Hovern */
color: gray;
}
.footer-social {
width: 100%;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.site {
min-height: calc(100% - 60px);
min-height: calc(100% - var(--hoehe_header_mobile, 60px));
}
#main_content:after {
height: calc(115px * 2);
height: calc(var(--hoehe_footer, 115px) * 2);
}
.footer-line {
text-align: center;
}
.footer-line.section {
width: 100%;
padding-left: 5%;
padding-right: 5%;
}
.footer-line.social {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 10px;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.footer-section {
padding-right: 15px;
}
}
/*********************************************************************************/
/**************************************Texte**************************************/
.fs-default {
/* Standardschriftgröße setzen */
font-size: 18px;
font-size: var(--schrift_default, 18px);
}
/* Schriftgröße setzen */
.fs-10em {
font-size: 1.0em;
}
.fs-11em {
font-size: 1.1em;
}
.fs-12em {
font-size: 1.2em;
}
.fs-13em {
font-size: 1.3em;
}
.fs-14em {
font-size: 1.4em;
}
.fs-15em {
font-size: 1.5em;
}
.fs-16em {
font-size: 1.6em;
}
.fs-17em {
font-size: 1.7em;
}
.fs-18em {
font-size: 1.8em;
}
.fs-19em {
font-size: 1.9em;
}
.fs-20em {
font-size: 2.0em;
}
.text {
/* Text allgemein */
}
.text a:hover {
/* Text mit einem Link */
cursor: pointer;
opacity: 0.7;
}
/* Textblock */
.text-block {
/* Texte Block mittig ausgerichtet */
margin: auto;
}
/* Breite des Texte Blocks je Zusatz sm, md & lg */
.text-block.sm {
width: 25%;
}
.text-block.md {
width: 50%;
}
.text-block.lg {
width: 75%;
}
.text-block.xl {
width: 90%;
}
/* Text ausrichten */
.text-right {
/* Text rechtsbündig ausrichten */
text-align: right !important;
}
.text-center {
/* Text zentriert ausrichten */
text-align: center !important;
}
.text-left {
/* Text linksbündig ausrichten */
text-align: left !important;
}
.text-justify {
/* Text als Blocksatz ausrichten */
text-align: justify !important;
}
.text-hyphens {
/* Text bei Silbentrennung trennen */
hyphens: auto;
}
.text-break-word {
word-break: break-word;
word-wrap: break-word;
}
/* Text-Auflistung Style 1 */
.text-list-1 {
/* Bild auf einer Seite und Text auf der anderen Seite */
/* Im Mobilfall ist das Bild über dem Text */
padding-top: 50px;
padding-bottom: 50px;
display: inline-block;
}
.text-list-1.grap-left>.graphic {
/* Grafik links ausrichten */
float: left;
background-position: center right;
}
.text-list-1.grap-right>.graphic {
/* Grafik rechts ausrichten */
float: right;
background-position: center left;
}
.text-list-1.grap-left>.text {
/* Textblock rechts und Text links ausrichten */
text-align: left;
}
.text-list-1.grap-right>.text {
/* Textblock links und Text rechts ausrichten */
text-align: right;
}
.text-list-1>.graphic,
.text-list-1>.text {
/* Grafik- und Textelement nebeneinander mit einer Mindesthöhe */
min-height: 100px;
display: inline-block;
}
.text-list-1>.graphic {
/* Grafikelement 1/3 */
width: 31%;
margin-left: 2%;
margin-right: 2%;
}
.text-list-1>.graphic-zoom {
background-position: center center !important;
}
.text-list-1>.text {
/* Textelement 2/3 */
width: 61%;
margin-left: 2%;
margin-right: 2%;
}
/* Text-Auflistung Style 2 */
.text-list-2 {
/* Bild auf einer Seite und Text auf der anderen Seite */
/* Im Mobilfall ist das Bild über dem Text */
padding-top: 50px;
padding-bottom: 50px;
display: inline-block;
}
.text-list-2>.area {
/* Elemente auf 50% Breite setzen */
width: 46%;
margin-left: 2%;
margin-right: 2%;
float: left;
}
.text-list-2>.area>.titel {
/* Titel der Area */
padding-top: 50px;
min-height: 150px;
}
/*////////////////////////////////////*/
.text-list-2>.text {
/* Textblock zentrieren */
text-align: center;
}
.text-list-2>.graphic,
.text-list-1>.text {
/* Grafik- und Textelement nebeneinander mit einer Mindesthöhe */
min-height: 100px;
display: inline-block;
}
.text-list-2>.graphic-zoom {
background-position: center center !important;
}
/*////////////////////////////////////*/
/* Text-Auflistung Style 3 */
.text-list-3 {
/* Bild auf einer Seite und Text um das Bild herumfließen lassen */
/* Im Mobilfall ist das Bild über dem Text */
padding-top: 50px;
padding-bottom: 50px;
display: block;
overflow: auto;
background-color: white;
margin-top: 50px;
box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 0.75);
}
.text-list-3.grap-left>.graphic {
/* Grafik links ausrichten */
float: left;
background-position: center right;
}
.text-list-3.grap-right>.graphic {
/* Grafik rechts ausrichten */
float: right;
background-position: center left;
}
.text-list-3>.graphic,
.text-list-3>.text {
/* Grafik- und Textelement nebeneinander mit einer Mindesthöhe */
min-height: 100px;
display: block;
}
.text-list-3>.graphic {
/* Grafikelement 1/3 */
width: 50%;
margin-left: 2%;
margin-right: 2%;
min-height: inherit;
}
.text-list-3>.graphic-zoom {
background-position: center center !important;
}
.text-list-3>.text {
/* Textelement 2/3 */
width: auto;
margin-left: 2%;
margin-right: 2%;
}
.text-list-3>.text.wordwrap {
/* Zeilenumbruch, wenn im Text auch ein Zeilenumbruch ist */
word-wrap: break-word;
white-space: pre-line;
}
.text-list-3.grap-left .elem-oc {
/* Textblock rechts und Text links ausrichten */
float: right;
}
.text-list-3.grap-right .elem-oc {
/* Textblock links und Text rechts ausrichten */
float: left;
}
/* ----------------- Text-Auflistung Style 4 ----------------- */
.text-list-4 {
/* Text 50% pro Seite */
/* Im Mobilfall ist das Bild über dem Text */
display: block;
}
.text-list-4>.area {
width: 50%;
margin: 0 -1%;
display: inline-block;
vertical-align: top;
}
/* ----------------- Text-Auflistung Style 4 ----------------- */
/* ----------------- Text-Auflistung Style 5 ----------------- */
/**
Grafik wird zentriert neben dem Text angezeigt.
Nützlich für bspw. Profilbilder.
Standard ist die Grafik links und der Text rechts
**/
.text-list-5 {
display: grid;
grid-template-columns: 1fr 1fr;
}
.text-list-5>.graphic {
width: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.text-list-5>.text {
padding: 5px;
}
/**
Durch die Zusatzklasse "grap-right",
wird die Grafik rechts angezeigt und der Text links
**/
.text-list-5.grap-right,
.text-list-5.grap-right>.graphic,
.text-list-5.grap-right>.text {
transform: scaleX(-1);
}
/* ----------------- Text-Auflistung Style 5 ----------------- */
/* ----------------------------------------------------------- */
/* Textbereich ein- & ausklappen (Mehr lesen / Weniger lesen) */
.cut-text {
/* Text standardmäßig eingeklappt */
height: 0px;
transition: 1s;
overflow-y: hidden;
overflow-x: hidden;
width: 100%;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.text-list-3 {
padding: 25px;
}
.text-list-1.grap-left>.graphic,
.text-list-1.grap-right>.graphic,
.text-list-3.grap-left>.graphic,
.text-list-3.grap-right>.graphic {
float: none;
background-position: center center;
}
.text-list-1>.graphic,
.text-list-1>.text,
.text-list-2>.area,
.text-list-3>.graphic {
width: 100%;
margin: 0;
}
.text-list-3>.text {
margin: 0;
}
.text-list-4>.area {
width: 100%;
}
/* Im Mobilfall wird die Grafik immer über dem Text angezeigt */
.text-list-5 {
display: block;
grid-template-columns: none;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.text-block.sm {
width: 50%;
}
.text-block.md {
width: 70%;
}
.text-block.lg {
width: 85%;
}
.text-block.xl {
width: 90%;
}
.text-list-1,
.text-list-2 {
display: inline-block;
}
.text-list-3 {
display: block;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.text-block.sm {
width: 90%;
}
.text-block.md {
width: 90%;
}
.text-block.lg {
width: 90%;
}
.text-block.xl {
width: 95%;
}
.text-list-1,
.text-list-2 {
display: inline-block;
padding-top: 25px;
padding-bottom: 25px;
}
.text-list-3 {
display: block;
padding-top: 25px;
padding-bottom: 25px;
}
}
/*********************************************************************************/
/*************************************Grafiken************************************/
.graphic {
/* Grafik allgemein einbinden */
background-image: url('./gfx/kein_Bild_vorhanden.jpg');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
}
.graphic>img {
display: block;
margin: auto;
}
/* Breiten definieren */
.graphic.xs {
width: 15%;
}
.graphic.sm {
width: 20%;
}
.graphic.md {
width: 45%;
}
.graphic.lg {
width: 70%;
}
.graphic.xl {
width: 100%;
}
/* Sichtbarkeit */
.graphic.invi-mob {
/* Im Mobilfall unsichtbar */
}
.graphic.visi-mob {
/* Nur im Mobilfall sichtbar */
display: none;
}
.graphic-zoom {
/* Grafik heranzoomen, bis diese das Element ausfüllt */
background-size: cover;
}
.graphic-zoom>img {
/* Grafik heranzoomen, bis diese das Element ausfüllt */
object-fit: cover;
height: inherit;
width: 100%;
}
.graphic-scale {
/* Grafik skalieren, bis diese vollständig in das Element passt */
background-size: contain;
}
.graphic-scale>img {
/* Grafik skalieren, bis diese vollständig in das Element passt */
object-fit: contain;
height: 100%;
}
.graphic-theme {
/* Grafik fixieren und als Thema anzeigen */
background-position: top center;
position: fixed;
height: 100%;
right: 10px;
}
.graphic.shadow-top {
box-shadow: inset 0px 41px 16px -32px rgba(0, 0, 0, 0.75);
}
/* ---------------------- Ausrichtung ---------------------- */
.graphic.lt {
/* links oben */
background-position: left top !important;
}
.graphic.lc {
/* links mittig */
background-position: left center !important;
}
.graphic.lb {
/* links unten */
background-position: left bottom !important;
}
.graphic.ct {
/* mittig oben */
background-position: center top !important;
}
.graphic.cc {
/* mittig mittig - zentrieren */
background-position: center center !important;
}
.graphic.cb {
/* mittig unten */
background-position: center bottom !important;
}
.graphic.rt {
/* rechts oben */
background-position: right top !important;
}
.graphic.rc {
/* rechts mittig */
background-position: right center !important;
}
.graphic.rb {
/* rechts unten */
background-position: right bottom !important;
}
/* ---------------------- Ausrichtung ---------------------- */
/* ---------------------- Profilbilder ---------------------- */
.profile {
/* standardmäßig kreisrund */
border-radius: 50%/50%;
}
/* ---------------------- Profilbilder ---------------------- */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.graphic.invi-mob {
display: none;
}
.graphic.visi-mob {
display: block;
}
.graphic-theme {
display: none;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.graphic.xs {
width: 15%;
}
.graphic.sm {
width: 50%;
}
.graphic.md {
width: 70%;
}
.graphic.lg {
width: 85%;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.graphic.xs {
width: 90%;
}
.graphic.sm {
width: 90%;
}
.graphic.md {
width: 90%;
}
.graphic.lg {
width: 90%;
}
}
/*********************************************************************************/
/*******************************Element-Eigenschaften*****************************/
.elem-oc {
/* Element, welches per onclick Ereignis regieren soll */
cursor: pointer;
color: #1E90FF;
font-size: medium;
}
.elem-oc:hover {
/* Hover::Element, welches per onclick Ereignis regieren soll */
color: blue;
}
.elem-display {
/* Element, welches eingeblendet wird */
display: block;
}
.elem-hide {
/* Element, welches ausgeblendet wird */
display: none;
}
.elem-point {
/* Element, welches einen Pointer als Cursor angezeigt bekommen soll */
cursor: pointer;
}
.elem-no-mark {
user-select: none;
}
/*********************************************************************************/
/**************************************Icons**************************************/
.icon {
/* Icon allgemein */
background-image: url('../gfx/kein_Bild_vorhanden.jpg');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: inline-block;
height: 15px;
width: 15px;
}
.input-team {
position: relative;
}
.input-icon {
position: absolute;
top: 0;
right: 0;
height: 100%;
min-width: 20px;
margin: 0 10px 0 5px;
}
.icon.sz20 {
height: 20px;
width: 20px;
}
.icon.sz25 {
height: 25px;
width: 25px;
}
.icon.sz30 {
height: 30px;
width: 30px;
}
.icon.sz35 {
height: 35px;
width: 35px;
}
/* 13.04.2018 auskommentiert
.icon.rotate {
Icon um 180° routieren lassen
transform: rotate(180deg);
}
*/
.icon.icon-rot-90 {
/* Icon um 90° routieren lassen */
transform: rotate(90deg);
}
.icon.icon-rot-180 {
/* Icon um 180° routieren lassen */
transform: rotate(180deg);
}
.icon.icon-rot-270 {
/* Icon um 270° routieren lassen */
transform: rotate(270deg);
}
.icon-expand {
/* Icon zur Erweiterung bspw. des Textes */
background-image: url('../gfx/icon-expand.png');
}
.social-icon {
/* Icon mit abgerundeter Ecke rechts unten (Icon im Footer) */
border-radius: 0 0 10% 0;
height: 30px;
width: 30px;
}
.social-icon:hover {
background-color: #5BA2DA !important;
background-color: var(--farbe_social_icon_hover, #5BA2DA) !important;
}
.icon.icon-left {
background-image: url('../gfx/arrow-left-btn.png');
}
.icon.icon-right {
background-image: url('../gfx/arrow-right-btn.png');
}
.icon.icon-download {
background-image: url('../gfx/download-cloud-btn.png');
}
.icon.icon-check {
background-image: url('../gfx/check-btn.png');
}
.icon.icon-x {
background-image: url('../gfx/x-btn.png');
}
.icon.icon-delete {
background-image: url('../gfx/delete-btn.png');
}
.icon.icon-warning {
background-image: url('../gfx/warning-btn.png');
}
.icon.icon-time {
background-image: url('../gfx/time-btn.png');
}
.icon.icon-search {
background-image: url('../gfx/search-btn.png');
}
.icon.icon-teamviewer {
background-image: url('../gfx/teamviewer.png');
}
.icon.icon-user {
background-image: url('../gfx/user-btn.png');
}
.icon.icon-lock {
background-image: url('../gfx/lock-btn.png');
}
.icon.icon-unlock {
background-image: url('../gfx/unlock-btn.png');
}
.icon.icon-gear {
background-image: url('../gfx/gear-btn.png');
}
.icon.icon-newdata {
background-image: url('../gfx/newdata-btn2.png');
}
.icon.icon-menu {
background-image: url('../gfx/menu-btn.png');
}
.icon.icon-maillock {
background-image: url('../gfx/mail-lock-btn.png');
}
.icon.icon-mail {
background-image: url('../gfx/mail-btn.png');
}
.icon.icon-plus {
background-image: url('../gfx/plus-btn.png');
}
.icon.icon-eye-open {
background-image: url('../gfx/eye-open-btn.png');
}
.icon.icon-eye-close {
background-image: url('../gfx/eye-close-btn.png');
}
.icon.icon-folder {
background-image: url('../gfx/folder-btn.png');
}
.icon.icon-searchfolder {
background-image: url('../gfx/searchfolder-btn.png');
}
.icon.icon-opt-menu {
background-image: url('../gfx/opt-menu-btn.png');
}
.icon.icon-download-w {
background-image: url('../gfx/icon_download.png');
}
.icon.icon-save {
background-image: url('../gfx/save-btn.png');
}
.icon.icon-list {
background-image: url('../gfx/list-btn.png');
}
/*********************************************************************************/
/****************************Platzhalter - Placeholder****************************/
/* -------------------- Platzhalter Höhe -------------------- */
.ph-horizon-xs {
/* extra klein - extra small */
min-height: 25px;
}
.ph-horizon-sm {
/* klein - small */
min-height: 50px;
}
.ph-horizon-md {
/* mittel - medium */
min-height: 270px;
}
.ph-horizon-lg {
/* groß - large */
min-height: 360px;
}
.ph-horizon-xl {
/* extra groß - extra large */
min-height: 540px;
}
/* -------------------- Platzhalter Höhe -------------------- */
/* --------------- Platzhalter Höhe Mobilfall --------------- */
/* Platzhalter werden nur im Mobilfall verwendet */
.ph-horizon-xxs-mob {
display: none;
}
/* extra extra klein - extra extra small */
.ph-horizon-xs-mob {
display: none;
}
/* extra klein - extra small */
.ph-horizon-sm-mob {
display: none;
}
/* klein - small */
.ph-horizon-md-mob {
display: none;
}
/* mittel - medium */
.ph-horizon-lg-mob {
display: none;
}
/* groß - large */
.ph-horizon-xl-mob {
display: none;
}
/* extra groß - extra large */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.ph-horizon-xxs-mob {
min-height: 10px;
display: block;
}
/* extra extra klein - extra extra small */
.ph-horizon-xs-mob {
min-height: 25px;
display: block;
}
/* extra klein - extra small */
.ph-horizon-sm-mob {
min-height: 50px;
display: block;
}
/* klein - small */
.ph-horizon-md-mob {
min-height: 270px;
display: block;
}
/* mittel - medium */
.ph-horizon-lg-mob {
min-height: 360px;
display: block;
}
/* groß - large */
.ph-horizon-xl-mob {
min-height: 540px;
display: block;
}
/* extra groß - extra large */
}
/* --------------- Platzhalter Höhe Mobilfall --------------- */
/* --------- Platzhalter Höhe Mobilfall unsichtbar ---------- */
/* Platzhalter werden im Mobilfall unsichtbar */
.ph-horizon-xxs-mob.invi {
min-height: 10px;
display: block;
}
/* extra extra klein - extra extra small */
.ph-horizon-xs-mob.invi {
min-height: 25px;
display: block;
}
/* extra klein - extra small */
.ph-horizon-sm-mob.invi {
min-height: 50px;
display: block;
}
/* klein - small */
.ph-horizon-md-mob.invi {
min-height: 270px;
display: block;
}
/* mittel - medium */
.ph-horizon-lg-mob.invi {
min-height: 360px;
display: block;
}
/* groß - large */
.ph-horizon-xl-mob.invi {
min-height: 540px;
display: block;
}
/* extra groß - extra large */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.ph-horizon-xxs-mob.invi {
display: none;
}
/* extra extra klein - extra extra small */
.ph-horizon-xs-mob.invi {
display: none;
}
/* extra klein - extra small */
.ph-horizon-sm-mob.invi {
display: none;
}
/* klein - small */
.ph-horizon-md-mob.invi {
display: none;
}
/* mittel - medium */
.ph-horizon-lg-mob.invi {
display: none;
}
/* groß - large */
.ph-horizon-xl-mob.invi {
display: none;
}
/* extra groß - extra large */
}
/* --------- Platzhalter Höhe Mobilfall unsichtbar ---------- */
/* ------------------- Platzhalter Breite ------------------- */
.ph-vertical-xs {
/* extra klein - extra small */
min-width: 25px;
}
.ph-vertical-sm {
/* klein - small */
min-width: 50px;
}
.ph-vertical-md {
/* mittel - medium */
min-width: 270px;
}
.ph-vertical-lg {
/* groß - large */
min-width: 360px;
}
.ph-vertical-xl {
/* extra groß - extra large */
min-width: 540px;
}
/* ---------------------------------------------------------- */
/* -------------- Platzhalter Breite Mobilfall -------------- */
/* Platzhalter werden nur im Mobilfall verwendet */
.ph-vertical-xs-mob {
display: none;
}
/* extra klein - extra small */
.ph-vertical-sm-mob {
display: none;
}
/* klein - small */
.ph-vertical-md-mob {
display: none;
}
/* mittel - medium */
.ph-vertical-lg-mob {
display: none;
}
/* groß - large */
.ph-vertical-xl-mob {
display: none;
}
/* extra groß - extra large */
.ph-vertical-50-mob {
display: none;
}
/* 50% */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.ph-vertical-xs-mob {
min-width: 25px;
display: inline-block;
}
/* extra klein - extra small */
.ph-vertical-sm-mob {
min-width: 50px;
display: inline-block;
}
/* klein - small */
.ph-vertical-md-mob {
min-width: 270px;
display: inline-block;
}
/* mittel - medium */
.ph-vertical-lg-mob {
min-width: 360px;
display: inline-block;
}
/* groß - large */
.ph-vertical-xl-mob {
min-width: 540px;
display: inline-block;
}
/* extra groß - extra large */
.ph-vertical-50-mob {
min-width: 50%;
display: inline-block;
}
/* 50% */
}
/* ---------------------------------------------------------- */
/* -------- Platzhalter Breite Mobilfall unsichtbar --------- */
/* Platzhalter werden im Mobilfall unsichtbar */
.ph-vertical-xs-mob.invi {
min-width: 25px;
display: inline-block;
}
/* extra klein - extra small */
.ph-vertical-sm-mob.invi {
min-width: 50px;
display: inline-block;
}
/* klein - small */
.ph-vertical-md-mob.invi {
min-width: 270px;
display: inline-block;
}
/* mittel - medium */
.ph-vertical-lg-mob.invi {
min-width: 360px;
display: inline-block;
}
/* groß - large */
.ph-vertical-xl-mob.invi {
min-width: 540px;
display: inline-block;
}
/* extra groß - extra large */
.ph-vertical-50-mob.invi {
min-width: 50%;
display: inline-block;
}
/* 50% */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.ph-vertical-xs-mob.invi {
display: none;
}
/* extra klein - extra small */
.ph-vertical-sm-mob.invi {
display: none;
}
/* klein - small */
.ph-vertical-md-mob.invi {
display: none;
}
/* mittel - medium */
.ph-vertical-lg-mob.invi {
display: none;
}
/* groß - large */
.ph-vertical-xl-mob.invi {
display: none;
}
/* extra groß - extra large */
.ph-vertical-50-mob.invi {
display: none;
}
/* 50% */
}
/* ---------------------------------------------------------- */
/*********************************************************************************/
/*********************************Tabelle - Table*********************************/
table,
table>tbody,
table>body>tr,
table>body>tr>td {
/* Tabelleninhalte oben ausrichten */
vertical-align: top !important;
}
.tbl-def {
/* Tabellengrundgerüst */
}
.tbl-def>div>div {
/* Tabellengrundgerüst innere Ebene (Felder neben einander und Text oben ausrichten) */
display: inline-block;
padding: 5px;
margin-left: -2px;
margin-right: -2px;
vertical-align: top;
background-color: rgba(91, 162, 218, 0.5);
/* Hintergrund der Zeile setzen */
}
.tbl-def>div:nth-child(even)>div {
background-color: rgba(255, 255, 255, 0.1);
/* Hintergrund jeder geraden Zeile transparent setzen */
}
.tbl-def-row-head>div {
/* Erste Zeile ist Kopfzeile (Schrift groß und fett) */
font-size: 20px;
font-weight: bold;
}
.tbl-def-col-l {
text-align: left;
}
.tbl-def-col-r {
text-align: right;
}
.tbl-def-col-c {
text-align: center;
}
/* -------------------- Tabelle 1 Spalte --------------------- */
.tbl-def.col-1>div>div {
/* Alle Spalten gleich groß */
width: 100%;
}
/* -------------------- Tabelle 1 Spalte --------------------- */
/* -------------------- Tabelle 2 Spalten -------------------- */
.tbl-def.col-2>div>div {
/* Alle Spalten gleich groß*/
width: 50%;
}
/* -------------------- Tabelle 2 Spalten -------------------- */
/* -------------------- Tabelle 3 Spalten -------------------- */
.tbl-def.col-3>div>div {
/* Alle Spalten gleich groß*/
width: 33%;
}
/* -------------------- Tabelle 3 Spalten -------------------- */
/* -------------------- Tabelle 4 Spalten -------------------- */
.tbl-def.col-4>div>div {
/* Alle Spalten gleich groß*/
width: 25%;
}
/* -------------------- Tabelle 4 Spalten -------------------- */
/* -------------------- Tabelle 5 Spalten -------------------- */
.tbl-def.col-5>div>div {
/* Alle Spalten gleich groß */
width: 20%;
}
.tbl-def.col-5.fst-row>div>div:first-child {
/* Erste Spalte größer als restliche Spalten */
width: 31%;
/* Aufgrund von Google Chrome von 32 auf 31 reduziert*/
}
.tbl-def.col-5.fst-row>div>div {
/* Restliche Spalten kleiner als erste Spalte */
width: 17%;
}
/* -------------------- Tabelle 5 Spalten -------------------- */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
/* Kommentare in p-Tags werden ausgeblendet */
.tbl-def>div>div>p {
display: none;
}
.col-5>.tbl-def-row-head {
min-height: 100px;
}
.col-5>.tbl-def-row-head>div:first-child {
transform: rotate(0deg);
}
.col-5>.tbl-def-row-head>div {
transform: rotate(90deg);
}
.tbl-def.col-5>div>div:first-child {
width: 68%;
}
.tbl-def.col-5>div>div {
width: 8%;
}
}
/*********************************************************************************/
/**************************************Spalten************************************/
.col-def {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: top;
margin-left: -5px;
margin-right: -5px;
}
.col-1of1 {
width: 100%;
}
.col-1of2 {
width: 50%;
}
.col-1of3 {
width: 33%;
}
.col-1of4 {
width: 25%;
}
/* *************** Important *************** */
.col-1of1.important {
width: 100% !important;
}
.col-1of2.important {
width: 50% !important;
}
.col-1of3.important {
width: 33% !important;
}
.col-1of4.important {
width: 25% !important;
}
/* *************** Puffer *************** */
.col-1of1.puffer {
width: 99%;
}
.col-1of1.puffer.important {
width: 99% !important;
}
.col-1of2.puffer {
width: 49%;
}
.col-1of2.puffer.important {
width: 49% !important;
}
.col-1of3.puffer {
width: 32%;
}
.col-1of3.puffer.important {
width: 32% !important;
}
.col-1of4.puffer {
width: 24%;
}
.col-1of4.puffer.important {
width: 24% !important;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.col-def {
width: 100%;
}
.col-def.important {
width: 100% !important;
}
.col-def.puffer {
width: 100%;
}
.col-def.puffer.important {
width: 100% !important;
}
}
/*********************************************************************************/
/***************************Im Mobilfall ein-/ausblenden**************************/
.mob-show {
/* In Normalansicht ausgeblendet & im Mobilfall eingeblendet */
display: none;
}
.mob-invi.disp-blk {
/* In Normalansicht eingeblendet (block) & im Mobilfall ausgeblendet */
display: block;
}
.mob-invi.disp-iblk {
/* In Normalansicht eingeblendet (inline-block) & im Mobilfall ausgeblendet */
display: inline-block;
}
.mob-invi-tab.disp-cont {
/* In Normalansicht eingeblendet (contents) & im Tabletfall ausgeblendet */
display: contents;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.mob-show.disp-blk {
display: block !important;
}
.mob-show.disp-iblk {
display: inline-block !important;
}
.mob-invi {
display: none !important;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.mob-invi-tab {
display: none !important;
}
}
/*********************************************************************************/
/**************************************SITEMAP************************************/
.sitemap {
/* Alle Programmpunkte */
background-color: white;
padding-left: 20px;
}
.sitemap-1 {
/* Jeden Block visuell abgrenzen */
padding-top: 20px;
background-color: white;
}
.sitemap .sitemap-level-1 {
/* Level 1 */
color: #000000;
font-size: 20px;
font-weight: bold;
}
.sitemap .sitemap-level-2 {
/* Level 2 */
color: #424242;
font-size: 18px;
font-weight: bold;
}
.sitemap .sitemap-level-3 {
/* Level 3 */
color: #6E6E6E;
font-size: 16px;
font-weight: bold;
}
.sitemap a {
/* Ab Level 4 */
color: #A4A4A4;
font-size: 14px;
font-weight: bold;
}
.sitemap a:hover {
/* Hovereffekt für alle Programmpunkte gleich */
color: #5BA2DA;
color: var(--farbe_sitemap_hover, #5BA2DA);
}
/*********************************************************************************/
/************************************Meldungen************************************/
/*Grundelement + Zusatzelement */
.report {
/* Grundelement */
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.report.report-success {
/* Zusatzelement - Erfolgreich */
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.report.report-info {
/* Zusatzelement - Info */
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.report.report-warning {
/* Zusatzelement - Warnung */
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.report.report-danger {
/* Zusatzelement - Gefahr */
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
/*********************************************************************************/
/**************************mobiles Menü aus einer Liste***************************/
/* ------------------------ Variante 1 ------------------------ */
.list-menu {}
.list-menu>div {}
.list-menu>div img {
min-width: 10px;
min-height: 10px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
margin: 3px 3px 7px 3px;
padding: 8px;
}
.list-menu>div .bb_trans {
background-image: url('../gfx/transparent.png');
}
.list-menu>div .bb_plus {
background-image: url('../gfx/lavid/icons/arrow-right-btn.png');
cursor: pointer;
}
.list-menu>div .bb_minus {
background-image: url('../gfx/lavid/icons/arrow-right-btn.png');
transform: rotate(90deg);
transition: transform 0.5s;
cursor: pointer;
}
/* ------------------------ Variante 1 ------------------------ */
/*********************************************************************************/
/**********************************Ausrichtungen**********************************/
.child-left>div {
/* Kinderelemente links anordnen */
display: inline;
text-align: left;
}
.child-right>div {
/* Kinderelemente rechts anordnen */
display: inline;
text-align: right;
}
.child-center>div {
/* Kinderelemente zentrieren */
margin: auto;
}
/*********************************************************************************/
/*******************************Traceausgabe im Popup*****************************/
.trace-out {
position: absolute;
z-index: 50;
width: 100%;
background-color: white;
}
.trace-out.is-active>.trace-out-cont {
height: auto;
margin: 100px 50px 50px 50px;
border: 3px solid #CECECE;
padding: 10px;
overflow: hidden;
}
.trace-out>.trace-out-cont,
.trace-out.inactive>.trace-out-cont {
height: 0px;
margin: 0px;
border: 0px solid #CECECE;
padding: 0px;
}
.trace-out-close {
display: none;
}
.trace-out.is-active>.trace-out-close {
display: block;
padding: 10px;
cursor: pointer;
text-align: center;
background-color: #CECECE;
}
.trace-out.is-active>.trace-out-close>div {
background-image: url('../gfx/arrow-left-btn.png');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: inline-block;
height: 20px;
width: 20px;
transform: rotate(90deg);
transition: transform 0.5s;
}
.trace-out.inactive>.trace-out-close>div {
transform: rotate(270deg);
}
/*********************************************************************************/
/***************************Expandbox (Aufklappboxen)*****************************/
.expandBox {
border: 1px solid #C8C8C8;
height: auto;
margin: 12px 0 0 5px;
border-bottom-right-radius: 15px;
background-color: white;
}
.expandBox-titlebar {
height: auto;
cursor: pointer;
padding: 5px 0 5px 20px;
border-bottom-right-radius: 14px;
}
.expandBox-titlebar.bright {
background-color: #D2D2D2;
}
.expandBox-titlebar.bright:hover {
background-color: #E5E5E5;
}
.expandBoxTitle {
display: flex;
margin: -16px 4px 4px 10px;
}
.expandBox-titletext {
padding-left: 15px;
font-weight: bold;
}
.expandBox-content {
overflow-x: auto;
display: none;
background-color: white;
margin: 1px;
border-radius: 15px;
}
.expandBox-content.active {
display: block;
}
/** Aufklappende Box Animation
.expandBox-content {
padding-left: 58px;
padding-right: 10px;
overflow-x: scroll;
overflow-y: hidden;
max-height: 0;
}
.expandBox-content.active {
max-height: 2000px;
transition-property: all;
transition-duration: 1.5s;
}
*/
.expandBox-contentText {
text-decoration: none;
font-weight: normal;
line-height: 18px;
}
.expandBox-contentText img {
/* Bilder automatisch zentrieren */
max-width: 100% !important;
height: auto !important;
}
.expandBox-contentText iframe {
width: 100%;
max-width: 900px;
}
.expandBox-contentText ul {
margin: 5px;
}
.expandBox-contentTextWrapper {
padding: 14px 14px 14px 25px;
min-height: 70px;
}
.expandBox_Img {
/** Setzen der Pfeilkonfiguration */
background-image: url('../gfx/arrow-left-btn.png');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: inline-block;
height: 15px;
width: 15px;
/** Ausrichten des Pfeiles nach rechts */
transform: rotate(180deg);
transition: transform 0.5s;
}
.expandBox_Img.imgOpen {
/** Ausrichten des Pfeiles nach unten */
transform: rotate(270deg);
transition: transform 0.5s;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.FAQ_Inhalttext iframe {
height: 350px;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.FAQ_Titeltext {
font-size: 16px;
}
.FAQ_Inhalttext iframe {
height: 250px;
}
.FAQ_Inhalttext {
font-size: 15px;
}
}
/*********************************************************************************/
/*****************************Dropdown-Menü***************************************/
/**********************************Version 1.0********************************/
.dropdown-menu-1>.dropdown-menu-top {
/* Schaltfläche des Dropdown-Menüs um Dropdown-Menü zu öffnen */
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 5px;
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
cursor: pointer;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
}
.dropdown-menu-1>.dropdown-menu-top.v2 {
border: 0px solid transparent;
border-radius: 0px;
background-image: none;
}
.dropdown-menu-1>.dropdown-menu-top.v3 {
border-radius: 50%;
}
.dropdown-menu-1>.dropdown-menu-top:hover {
/* Schaltfläche, wenn Maus darüber steht */
background-color: #e6e6e6;
background-image: inherit;
}
.dropdown-menu-1>.dropdown-menu-top.v2:hover {
/* Schaltfläche, wenn Maus darüber steht */
background-color: transparent;
background-image: inherit;
}
.dropdown-menu-1>.dropdown-menu-top>div {
/* Icon der Schaltfläche */
vertical-align: inherit;
height: 100%;
width: 100%;
margin: 0;
padding: 1px;
}
.dropdown-menu-1.is-active>.dropdown-menu-top>div {
/* Icon der Schaltfläche, wenn Dropdwon-Menü geöffnet ist */
}
.dropdown-menu-1.is-active>.dropdown-menu-top {
/* Schaltfläche des Dropdown-Menüs, wenn Dropdown-Menü geöffnet ist */
}
.dropdown-menu-1>.dropdown-menu-top>p {
/* Text der Schaltfläche */
display: none;
}
.dropdown-menu-1.is-active>.dropdown-menu-top>p {
/* Text der Schaltfläche, wenn geöffnet */
}
.dropdown-menu-1>.dropdown-menu-cont {
/* Inhalt des Dropdown-Menüs */
display: none;
background-color: white;
position: absolute;
list-style: none;
z-index: 1000;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu-1.is-active>.dropdown-menu-cont {
/* Inhalt des Dropdown-Menüs, wenn geöffnet */
display: block;
}
.dropdown-menu-1>.dropdown-menu-cont .dropdown-menu-cont {
/* Untermenü - Inhalt des Dropdown-Menüs */
display: none;
background-color: rgba(0, 0, 0, 0.075);
}
.dropdown-menu-1>.dropdown-menu-cont .dropdown-menu-cont.is-active {
/* Untermenü - Inhalt des Dropdown-Menüs, wenn geöffnet */
display: block;
}
.dropdown-menu-1 .dropdown-menu-item {
/* Menüpunkte */
width: 100%;
color: black;
padding: 5px;
background-color: transparent;
border-width: 1px;
border-style: hidden hidden solid hidden;
}
.dropdown-menu-1>.dropdown-note {
/* Hinweis Kreis für Zahlen. Bsp.: Anzahl von aktiven Filtern */
font-weight: bold;
line-height: 17px;
text-align: center;
position: absolute;
margin-left: 25px;
margin-top: -5px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 50%;
height: 20px;
width: 20px;
color: white;
background-color: rgba(91, 162, 218, 0.7);
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.dropdown-menu-1>.dropdown-menu-top {
height: 50px;
width: 50px;
}
.dropdown-menu-1.is-active>.dropdown-menu-top.v2 {
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
}
.dropdown-menu-1>.dropdown-menu-top>div {
height: 45px;
width: 45px;
}
.dropdown-menu-1.is-active>.dropdown-menu-top>div {
background-image: url('../gfx/x-btn.png');
float: right;
}
.dropdown-menu-1.is-active>.dropdown-menu-top {
position: fixed;
top: 0;
right: 0;
border-radius: 0px;
width: 100%;
z-index: 3000;
}
.dropdown-menu-1.is-active>.dropdown-menu-top>p {
display: inline-block;
text-align: center;
color: gray;
font-size: 28px;
font-weight: bold;
padding: 5px;
}
.dropdown-menu-1>.dropdown-menu-cont {
position: fixed;
top: 50px;
right: 0;
width: 100%;
min-height: 100%;
}
.dropdown-menu-1 .dropdown-menu-item {
font-size: 22px !important;
height: 50px !important;
}
.dropdown-menu-1>.dropdown-note {
font-size: 20px;
line-height: 29px;
;
margin-top: -9px;
margin-left: 30px;
height: 30px;
width: 30px;
}
}
/*********************************************************************************/
/**********************************Autocompleter**********************************/
div.autocomplete ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div.autocomplete ul li.selected {
background-color: #5BA2DA;
color: #000000;
font-weight: bold;
}
div.autocomplete ul li {
list-style-type: none;
display: block;
margin: 0;
padding: 2px;
height: 30px;
cursor: pointer;
border: 1px solid #cccccc;
border-top: none;
z-index: 1000;
display: inline-table;
width: 100%;
}
ul.AC_Results_UL {
background-color: #f9f9f9;
}
li.AC_Results_LI {
color: #333333;
text-decoration: none;
font-size: 14px;
}
li.AC_Results_LI:hover {
color: #000000;
font-weight: bold;
}
/*********************************************************************************/
/*****************************Downloadbereich manuell*****************************/
.download-area {
/* Rahmen des Downloadbereichs */
width: 100%;
background-color: #E6E6E6;
text-align: left;
padding: 20px;
}
.download-area .head.line {
/* Tabellen Überschrift */
font-weight: bold;
line-height: 3;
border-bottom: 2px solid #E6E6E6;
}
.download-area .head.line:hover {
background-color: white;
}
.download-area .line {
/* Tabellen Zeilen */
background-color: white;
display: flex;
align-items: center;
}
.download-area .line:hover {
background-color: transparent;
}
.download-area .column {
/* Tabellen Zeilen */
display: inline-block;
margin: 5px -5px 5px 5px;
padding: 5px;
}
.download-area .column:nth-child(1) {
width: 10%;
}
.download-area .column:nth-child(2) {
width: 30%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.download-area .column:nth-child(3) {
width: 40%;
}
.download-area .column:nth-child(4) {
width: 20%;
}
.download-area .btn-text {
text-align: center;
}
.download-area .column:nth-child(4)>a {
/* Button / Link in der letzten Tabellenzeile */
display: flex;
justify-content: center;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.download-area .head.line {
display: none;
}
.download-area .line {
display: block;
text-align: center;
padding: 10px;
margin-bottom: 20px;
}
.download-area .line:last-child {
margin-bottom: 0px;
}
.download-area .column:nth-child(1) {
width: 20%;
}
.download-area .column:nth-child(2) {
width: 80%;
}
.download-area .column:nth-child(3) {
width: 100%;
display: block;
}
.download-area .column:nth-child(4) {
width: 100%;
display: block;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.download-area .column:nth-child(4)>a {
display: inline-flex;
}
}
/*********************************************************************************/
/******************** Button um den Anfang der Seite aufzurufen ******************/
.btn-startpoint {
z-index: -1;
position: fixed;
height: 40px;
width: 40px;
bottom: 10px;
right: 10px;
background-color: rgba(92, 162, 218, 0.6);
border-width: 2px;
border-style: solid;
border-color: rgba(92, 162, 218, 1);
border-radius: 50%;
opacity: 0;
transition: opacity 1s, z-index 0s linear 1s;
}
.btn-startpoint.is-scroll {
z-index: 550;
opacity: 1;
transition: opacity 1s, z-index 0s;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.btn-startpoint {
height: 60px;
width: 60px;
padding: 10px;
}
.btn-startpoint div {
height: 100% !important;
width: 100% !important;
margin: auto auto !important;
}
}
/*********************************************************************************/
/*********************************** Lagerscan ***********************************/
/* Rahmen um Aufträge zu Markieren, welche von anderen Bearbeitern in Bearbeitung sind */
.lagerscan-in-processing {
border: 3px solid rgba(0, 255, 0, 1.0);
/* rgba(0, 255, 0, 1.0) = lime */
}
.lagerscan-in-processing-warning {
border: 3px solid rgba(255, 140, 0, 1.0);
/* rgba(0, 255, 0, 1.0) = lime */
}
@media (max-width: 1024px) {
.lagerscan-in-processing {
border-color: rgba(0, 255, 0, 0.5);
}
.lagerscan-in-processing-warning {
border-color: rgba(255, 140, 0, 0.5);
}
}
/* Bereich der User-Eingabe */
.lagerscan-input {
border: 1px solid #bababa;
}
@media (max-width: 1024px) {
input.lagerscan-input {
font-size: 22px !important;
height: 50px !important;
}
}
/* Bereich der User-Rückmeldung */
.lagerscan-report {
border: 1px solid #bababa;
color: #bababa;
min-height: 22px;
padding: 0 5px 0 5px;
}
@media (max-width: 1024px) {
.lagerscan-report {
min-height: 50px;
font-size: 22px;
line-height: 2;
}
}
/* Ansicht der erfassten Daten in einer Box / einem Rahmen */
.lagerscan-content {
border: 1px solid #bababa;
padding: 5px;
}
.lagerscan-content.v2 {
border: 0px solid transparent;
padding: 0px;
}
@media (max-width: 1024px) {
.lagerscan-content {
font-size: 22px;
}
}
.lagerscan-content .sequence_position,
.lagerscan-sequence {
background-color: rgba(0, 255, 0, 1.0);
/* rgba(0, 255, 0, 1.0) = lime */
}
@media (max-width: 1024px) {
.lagerscan-content .sequence_position,
.lagerscan-sequence {
background-color: rgba(0, 255, 0, 0.5);
}
}
/*********************************************************************************/
/************************************* Listen ************************************/
/** Alle Elemente innerhalb dieser Liste gleichmäßig nebeneinander auflisten **/
.list-flex {
/** Elemente mittig ausrichten **/
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 100%;
}
.list-flex.align-sp {
/** Elemente gleichmäßig mit gleichen Zwischenräumen ausrichten **/
justify-content: space-between;
}
/*********************************************************************************/
/************************************* Farben ************************************/
.lavid-blau {
color: #5BA2DA !important;
}
/****************************************************************************************************************************************************************************************
DATEI: std_navigation.css
*****************************************************************************************************************************************************************************************/
/*********************************************************************************/
/******************************Haupt-Bereich-Header*******************************/
.main-area-header {
background-color: white;
background-color: var(--farbe_header, white);
height: 80px;
height: var(--hoehe_header, 80px);
width: 100%;
position: fixed;
z-index: 700;
}
.main-area-header-fixfiller {
/* Höhe des Headers mit LEER reservieren */
height: 80px;
height: var(--hoehe_header, 80px);
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.main-area-header {
height: 60px;
height: var(--hoehe_header_mobile, 60px);
}
.main-area-header-fixfiller {
height: 60px;
height: var(--hoehe_header_mobile, 60px);
}
}
/*********************************************************************************/
/****************************Globale Navigationszeile*****************************/
.global-navigation {
/* Logo + Menüpunkte + Suchbegriff */
}
.global-navigation-one {
/* Globale Navigationszeile Bereich 1 (Logo) */
width: 20%;
float: left;
}
.global-navigation-two {
/* Globale Navigationszeile Bereich 2 (Navigation) */
width: 65%;
float: left;
}
.global-navigation-three {
/* Globale Navigationszeile Bereich 3 (Suchoption) */
width: 15%;
float: left;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.global-navigation-three {
float: right;
margin-right: calc(40px + 10px);
margin-right: calc(var(--groesse_btnnavi_mobile, 40px) + 10px);
width: 60px;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.global-navigation-one {
width: 35%;
}
}
/*********************************************************************************/
/**************************************Logo***************************************/
.logo {
/* Logo ist bündig im Header */
padding: 15px;
height: 80px;
height: var(--hoehe_header, 80px);
background-color: transparent;
background-color: var(--farbe_logo_hintergrund, transparent);
}
.logo .logo-image {
/* Logo Größe anpassen und links ausrichten */
float: left;
height: 100%;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
}
/******************* LogoEx *******************/
.logo-ex {
/* Logo überlappt nach unten in den Hauptbereich (Handyfall -> Logo nur im Header) */
z-index: 550;
position: relative;
margin-left: 30px;
padding: 35px 15px;
background-color: transparent;
background-color: var(--farbe_logo_hintergrund, transparent);
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 0.45s;
}
.logo-ex .logo-image {
height: var(--hoehe_logo, 80px);
width: auto;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 0.45s;
}
.logo-ex.is-scroll {
padding: 15px 15px;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 0.45s;
}
.logo-ex.is-scroll .logo-image {
height: calc(var(--hoehe_logo, 80px) - 10px);
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 0.45s;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.logo {
height: 60px;
height: var(--hoehe_header_mobile, 60px);
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.logo-ex {
margin-left: 0;
}
.logo-ex.collapse-in {
/* Wenn ein mobiles Menü geöffnet wird, Logo einklappen */
padding: 0px 5px;
}
.logo-ex .logo-image {
height: 60px;
height: var(--hoehe_header_mobile, 60px);
}
.logo-ex.is-scroll .logo-image {
height: calc(60px - 10px);
height: calc(var(--hoehe_header_mobile, 60px) - 10px);
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.logo-ex {
margin-left: 0;
padding: 5px;
}
.logo-ex .logo-image,
.logo-ex.is-scroll .logo-image {
height: calc(60px - 10px);
height: calc(var(--hoehe_header_mobile, 60px) - 10px);
background-size: contain;
}
.logo-ex.is-scroll {
padding: 5px;
}
}
/*********************************************************************************/
/*************************************Suche***************************************/
.search-btn {
cursor: pointer;
padding: calc(80px / 4);
padding: calc(var(--hoehe_header, 80px) / 4);
height: 80px;
height: var(--hoehe_header, 80px);
display: flex;
max-width: 200px;
margin: 0;
}
.search-btn-icon {
float: right;
height: calc(80px / 2);
height: calc(var(--hoehe_header, 80px) / 2);
width: 100%;
flex: 0 0 auto;
background-size: contain;
background-repeat: no-repeat;
background-image: url(../gfx/icon_search.png);
background-position: right center;
}
.search-lbl {
font-weight: initial;
padding-left: 5px;
font-size: 18px;
height: 100%;
width: 100%;
line-height: calc(80px / 2);
line-height: calc(var(--hoehe_header, 80px) / 2);
}
.pop-suche {
display: none;
}
.pop-suche.is-active {
display: block;
}
.pop-suche-back {
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0px !important;
left: 0px !important;
z-index: 9990 !important;
background-color: black !important;
background-color: var(--farbe_suche_hintergrund, black) !important;
opacity: 0.8 !important;
opacity: var(--trans_suche_hintergrund, 0.8) !important;
}
.pop-suche-up {
border: 1px solid transparent !important;
border-radius: 10px !important;
min-height: 400px !important;
min-height: var(--hoehe_suche_popup, 400px) !important;
min-width: 50% !important;
min-width: var(--breite_suche_popup, 50%) !important;
z-index: 9995 !important;
background-color: transparent !important;
background-color: var(--farbe_suche_popup_hintergrund, transparent) !important;
opacity: 1.0 !important;
opacity: var(--trans_suche_popup_hintergrund, 1.0) !important;
left: calc(50% * 0.5) !important;
left: calc(var(--breite_suche_popup_rest, 50%) * 0.5) !important;
top: 20%;
position: fixed !important;
padding: 15px !important;
color: white !important;
color: var(--farbe_suche_popup_schrift, white) !important;
}
.pop-suche-input {
width: 100%;
background-color: transparent;
border: none;
bottom: 0;
position: absolute;
height: 50px;
font-size: 40px;
text-align: center;
outline: 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.pop-suche-input:focus {
border-bottom: 3px solid rgba(255, 255, 255, 0.6);
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.search-btn {
height: 60px;
height: var(--hoehe_header_mobile, 60px);
padding: calc(60px / 4) 0 calc(60px / 4) 0;
padding: calc(var(--hoehe_header_mobile, 60px) / 4) 0 calc(var(--hoehe_header_mobile, 60px) / 4) 0;
}
.search-btn-icon {
height: calc(60px / 2);
height: calc(var(--hoehe_header_mobile, 60px) / 2);
background-position: center center;
}
.search-lbl {
display: none;
}
.pop-suche-up {
left: 0 !important;
width: 100% !important;
}
}
/*********************************************************************************/
/**********************************Menübutton*************************************/
/* Mobiles Menü Icon Grundaufbau */
.navi-mobile {
display: block;
position: relative;
overflow: hidden;
margin: 10px;
padding: 0;
width: 40px;
width: var(--groesse_btnnavi_mobile, 40px);
height: 40px;
height: var(--groesse_btnnavi_mobile, 40px);
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: 3px;
border: none;
cursor: pointer;
transition: background 0.3s;
float: right;
}
.navi-mobile:focus {
outline: none;
}
.navi-mobile span {
display: block;
position: absolute;
top: calc((40px / 2) - 2px);
top: calc((var(--groesse_btnnavi_mobile, 40px) / 2) - 2px);
left: calc(40px / 9);
left: calc(var(--groesse_btnnavi_mobile, 40px) / 9);
right: calc(40px / 9);
right: calc(var(--groesse_btnnavi_mobile, 40px) / 9);
height: 4px;
background-color: black;
background-color: var(--farbe_btnnavi_mobile, black);
}
.navi-mobile span::before,
.navi-mobile span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: black;
background-color: var(--farbe_btnnavi_mobile, black);
content: "";
}
.navi-mobile span::before {
top: calc(40px / (-3.5));
top: calc(var(--groesse_btnnavi_mobile, 40px) / (-3.5));
}
.navi-mobile span::after {
bottom: calc(40px / (-3.5));
bottom: calc(var(--groesse_btnnavi_mobile, 40px) / (-3.5));
}
/* Animation zu X - htx */
.navi-mobile-htx {
background-color: white;
background-color: var(--farbe_btnnavi2_mobile, white);
opacity: 0.2;
opacity: var(--transparenz_btnnavi2_mobile, 0.2);
}
.navi-mobile-htx span {
transition: background 0s 0.3s;
}
.navi-mobile-htx span::before,
.navi-mobile-htx span::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.navi-mobile-htx span::before {
transition-property: top, transform;
}
.navi-mobile-htx span::after {
transition-property: bottom, transform;
}
/* Menü ist geöffnet - is active */
.navi-mobile-htx.is-active {
background-color: red;
background-color: var(--farbe_btnnavi3_mobile, red);
}
.navi-mobile-htx.is-active span {
background: none;
}
.navi-mobile-htx.is-active span::before {
top: 0;
transform: rotate(45deg);
}
.navi-mobile-htx.is-active span::after {
bottom: 0;
transform: rotate(-45deg);
}
.navi-mobile-htx.is-active span::before,
.navi-mobile-htx.is-active span::after {
transition-delay: 0s, 0.3s;
}
/* Plus für Unterbereiche */
.navi-mobile-plus {
margin-left: 16px;
margin-left: var(--schrift_groeße_navi_ebene3, 16px);
transition: transform 0.3s;
display: inline-block;
background: gray;
background: var(--farbe_link_ebene2, gray);
height: 16px;
height: var(--schrift_groeße_navi_ebene3, 16px);
position: relative;
width: calc(16px * 0.1);
width: calc(var(--schrift_groeße_navi_ebene3, 16px) * 0.1);
}
.navi-mobile-plus:after {
background: gray;
background: var(--farbe_link_ebene2, gray);
content: "";
height: calc(16px * 0.1);
height: calc(var(--schrift_groeße_navi_ebene3, 16px) * 0.1);
left: calc(16px * (-0.45));
left: calc(var(--schrift_groeße_navi_ebene3, 16px) * (-0.45));
position: absolute;
top: calc(16px * 0.45);
top: calc(var(--schrift_groeße_navi_ebene3, 16px) * 0.45);
width: 16px;
width: var(--schrift_groeße_navi_ebene3, 16px);
}
/* Plus zu X drehen */
.navi-mobile-plus.is-active {
top: 0;
transform: translateX(calc(25px / (-25))) translateY(calc(25px / 25)) rotate(45deg);
transform: translateX(calc(var(--schrift_groeße_navi_mobile, 25px) / (-25))) translateY(calc(var(--schrift_groeße_navi_mobile, 25px) / 25)) rotate(45deg);
}
.navi-mobile-img {
/* Grafik (Bspw. Pfeil) für Unterbereiche */
background-image: url(../gfx/arrow_down.gif);
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: inline-block;
height: 16px;
height: var(--schrift_groeße_navi_ebene3, 16px);
width: 16px;
width: var(--schrift_groeße_navi_ebene3, 16px);
position: relative;
transition: transform 0.3s;
}
.navi-mobile-img.is-active {
/* Grafik um 90° gegen den Uhrzeigersinn drehen, bzw. im Mobilfall im Uhrzeigersinn drehen */
transform: rotate(-90deg);
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.navi-mobile-plus {
display: block;
background: gray;
background: var(--farbe_link_ebene1_mobile, gray);
height: 25px;
height: var(--schrift_groeße_navi_mobile, 25px);
width: calc(25px / 5);
width: calc(var(--schrift_groeße_navi_mobile, 25px) / 5);
margin: 0 auto;
}
.navi-mobile-plus:after {
background: gray;
background: var(--farbe_link_ebene1_mobile, gray);
height: calc(25px / 5);
height: calc(var(--schrift_groeße_navi_mobile, 25px) / 5);
left: calc(25px * (-0.4));
left: calc(var(--schrift_groeße_navi_mobile, 25px) * (-0.4));
top: calc(25px * 0.4);
top: calc(var(--schrift_groeße_navi_mobile, 25px) * 0.4);
width: 25px;
width: var(--schrift_groeße_navi_mobile, 25px);
}
.navi-mobile-img {
transform: rotate(-90deg);
}
.navi-mobile-img.is-active {
transform: rotate(0deg);
}
}
/*********************************************************************************/
/************************Navigationsmenü - normal & mobile************************/
.navigation {
height: 80px;
height: var(--hoehe_header, 80px);
}
@media only screen and (min-width: 1200px) {
/* Monitor */
.navigation {
position: relative;
padding-right: 200px;
}
}
.navigation ul {
/*Navigationsbereich ohne Abstände, die vom Bootstrap kommen*/
margin: 0;
}
.navigation li {
/*Alle Auflistungsstriche ausblenden*/
list-style: none;
}
.navigation a {
/*Alle Links*/
color: black;
}
.navigation a:not([href]) {
cursor: context-menu;
}
.navigation a[onclick] {
cursor: pointer;
}
.nav-lvl-1 {
/*Ebene 1*/
float: left;
height: 80px;
height: var(--hoehe_header, 80px);
margin-right: 30px;
padding-top: calc(80px / 4);
padding-top: calc(var(--hoehe_header, 80px) / 4);
line-height: calc(80px / 2);
line-height: calc(var(--hoehe_header, 80px) / 2);
}
.nav-lvl-1>ul {
/*Ebene 2 - Untermenübereich*/
top: 80px;
top: var(--hoehe_header, 80px);
width: 100%;
padding-left: 0px;
height: 0;
position: fixed;
z-index: 500;
overflow-y: hidden;
overflow-x: hidden;
transition: 0.4s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;
}
.nav-lvl-1>ul>li:first-child {
margin-top: 20px;
}
.nav-lvl-1:hover {
/* Balken unterhalb des Programmpunktes einblenden */
border-bottom: 5px solid black;
border-bottom: 5px solid var(--farbe_navigationsbereich, black);
opacity: 0.8;
opacity: var(--transparenz_navigationsbereich, 0.8);
}
.nav-lvl-1:hover>ul {
/* Ebene 1 - Hovereffekt */
height: 300px;
height: var(--hoehe_navigationsbereich, 300px);
}
.sub-navigation {
/*Ebene 2 - Hintergrund links Untermenübereich */
background-color: black;
background-color: var(--farbe_navigationsbereich, black);
opacity: 0.8;
opacity: var(--transparenz_navigationsbereich, 0.8);
top: 80px;
top: var(--hoehe_header, 80px);
width: 100%;
left: 0;
height: 0;
position: fixed;
z-index: 499;
transition: 0.4s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;
}
.nav-lvl-1:hover>.sub-navigation {
/*Ebene 2 - Hintergrund links Untermenübereich einblenden*/
height: 300px;
height: var(--hoehe_navigationsbereich, 300px);
}
.nav-lvl-1>a {
/*Ebene 1 - Links*/
color: black;
color: var(--farbe_link_ebene1, black);
font-size: 18px;
font-size: var(--schrift_groeße_navi_ebene1, 18px);
}
.nav-lvl-1:hover>a {
color: gray;
color: var(--farbe_link_hover_ebene1, gray);
}
.nav-lvl-2 {
/*Ebene 2*/
line-height: 30px;
}
.nav-lvl-2 ul {
/*Ab Ebene 2 - Menüunterbereiche ausblenden*/
display: none;
position: absolute;
top: 0;
padding: 20px;
margin-left: 200px;
margin-left: var(--entfernung_lvlzulvl, 200px);
height: 100%;
width: 100%;
}
.nav-lvl-2>a {
/*Ebene 2 - Links*/
color: gray;
color: var(--farbe_link_ebene2, gray);
font-size: 16px;
font-size: var(--schrift_groeße_navi_ebene2, 16px);
}
.nav-lvl-2:hover>a {
color: white;
color: var(--farbe_link_hover_ebene2, white);
}
.nav-lvl-3:hover>a {
/*Ebene 3 - Hover auf Oberpunkt ändert Farbe im a-Tag*/
color: white;
color: var(--farbe_link_hover_ebene3, white);
}
.nav-lvl-3 a {
/*Ab Ebene 3 - Links*/
color: gray;
color: var(--farbe_link_ebene3, gray);
font-size: 16px;
font-size: var(--schrift_groeße_navi_ebene3, 16px);
}
.nav-lvl-4 a {
/*Ab Ebene 4 - Links*/
color: gray;
color: var(--farbe_link_ebene3, gray);
font-size: 16px;
font-size: var(--schrift_groeße_navi_ebene3, 16px);
}
.nav-lvl-4 a:hover {
/*Ab Ebene 4 - Hover auf a-Tag färbt a-Tag*/
color: white;
color: var(--farbe_link_hover_ebene3, white);
}
.nav-login {
/*Ebene 1 Login*/
float: left;
height: 80px;
height: var(--hoehe_header, 80px);
margin-right: 30px;
padding-top: calc(80px / 4);
padding-top: calc(var(--hoehe_header, 80px) / 4);
line-height: calc(80px / 2);
line-height: calc(var(--hoehe_header, 80px) / 2);
}
.nav-login>a {
/*Ebene 1 Login - Links*/
color: black;
color: var(--farbe_link_ebene1, black);
font-size: 18px;
font-size: var(--schrift_groeße_navi_ebene1, 18px);
cursor: pointer;
}
@media only screen and (min-width: 1025px) and (max-width: 1169px) {
/* Monitor
Verkleinern der Schriftgröße sowie des Seitenabstand der Level-1 Menüpunkte damit diese nicht mehr umbrechen */
li.navigation-option.nav-lvl-1 {
margin-right: 17px;
}
li.navigation-option.nav-lvl-1>a,
.nav-lavid-r>a,
.search-lbl {
font-size: 16px;
}
}
/* >************************************** Spezial Login Menü - Lavid ************************************** */
.nav-lavid-r {
float: right;
margin-right: 0;
}
@media only screen and (min-width: 1025px) {
/* Monitor */
.nav-lavid-r {
position: absolute;
right: 0;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
/*Spezial*/
.nav-lavid-r>a {
display: block;
}
}
.nav-lavid-r>a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* <************************************** Spezial Login Menü - Lavid ************************************** */
.nav-login>a:hover {
color: gray;
color: var(--farbe_link_hover_ebene1, gray);
}
.nav-lvl-1 .menu_add_on {
/* Schalter Untermenü ein-/ausklappen */
padding-left: 0px;
display: none;
background-color: black;
background-color: var(--farbe_navigationsbereich, black);
opacity: 0.8;
opacity: var(--transparenz_navigationsbereich, 0.8);
}
#btnNAVIMOBILE {
/*Navigation-Öffnen/Schließen-Button*/
display: none;
}
#btnNAVIMOBILE.login-activ {
/*Login -> Button ausblenden -Öffnen/Schließen-Button*/
display: none;
}
.nav-toggle {
/*Untermenüs ein- & ausblenden*/
display: inline-block !important;
}
.navigation-toggle {
/*Menü im Mobilfall einblenden*/
}
.nav-mob-activ {
/*Hintergrund - Content deaktivieren, nicht scrollbar machen...*/
}
@media only screen and (min-width: 1025px) {
/*Bildschirm*/
.nav-lvl-1 li>ul {
display: block;
opacity: 0.0;
height: 0px;
overflow: hidden;
padding: 0px 20px;
transition: height 0s, opacity 0s;
}
.nav-lvl-1 li:hover>ul {
opacity: 1.0;
height: 250px;
}
.nav-lvl-2>ul {
margin-top: 20px;
}
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.navigation {
height: 100%;
width: 0;
overflow-y: scroll;
position: fixed;
z-index: 500;
right: 0;
background-color: black;
background-color: var(--farbe_navigationsbereich, black);
opacity: 0.8;
opacity: var(--transparenz_navigationsbereich, 0.8);
margin-top: 60px;
margin-top: var(--hoehe_header_mobile, 60px);
overflow-x: hidden;
transition: 0.5s;
transition: width 0.5s, hyphens 0.1s;
}
.navigation li {
width: 100%;
border-top: 1px solid;
display: inline-grid;
/* für Google-Chrome > Schalter bei Untermenü neben den richtigen Programmpunkten */
}
.navigation a {
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
}
.nav-lvl-1 {
float: none;
height: auto;
padding-top: 0;
line-height: 30px;
}
.nav-lvl-1>ul {
width: 100%;
padding: 0;
height: auto;
position: static;
display: none;
}
.nav-lvl-1>ul>li:first-child {
margin-top: 0px;
}
.nav-lvl-1:hover {
border-bottom: 0px;
}
.nav-lvl-1:hover>ul {
height: auto;
}
.nav-lvl-1:hover>.sub-navigation {
height: 0;
}
.nav-lvl-1>a {
color: gray;
color: var(--farbe_link_ebene1_mobile, gray);
width: 100%;
font-size: 25px;
font-size: var(--schrift_groeße_navi_mobile, 25px);
padding-left: 5px;
}
.nav-lvl-1:hover>a {
color: white;
color: var(--farbe_link_hover_mobile, white);
}
.nav-lvl-2 ul {
position: relative;
padding: 0;
margin-left: auto;
width: 100%;
}
.nav-lvl-2>a {
width: 100%;
font-size: 25px;
font-size: var(--schrift_groeße_navi_mobile, 25px);
color: gray;
color: var(--farbe_link_ebene2_mobile, gray);
padding-left: 12px;
}
.nav-lvl-2:hover>a {
color: white;
color: var(--farbe_link_hover_mobile, white);
}
.nav-lvl-3:hover>a {
color: white;
color: var(--farbe_link_hover_mobile, white);
}
.nav-lvl-3>a {
width: 100%;
font-size: 25px;
font-size: var(--schrift_groeße_navi_mobile, 25px);
color: gray;
color: var(--farbe_link_ebene3_mobile, gray);
padding-left: 24px;
}
.nav-lvl-4>a {
width: 100%;
font-size: 25px;
font-size: var(--schrift_groeße_navi_mobile, 25px);
color: gray;
color: var(--farbe_link_ebene3_mobile, gray);
padding-left: 36px;
}
.nav-lvl-4 a:hover {
color: white;
color: var(--farbe_link_hover_mobile, white);
}
.nav-login {
float: none;
height: auto;
padding-top: 0;
line-height: normal;
}
.nav-login>a {
color: gray;
color: var(--farbe_link_ebene1_mobile, gray);
width: 100%;
font-size: 25px;
font-size: var(--schrift_groeße_navi_mobile, 25px);
}
.nav-login>a:hover {
color: white;
color: var(--farbe_link_hover_mobile, white);
}
.nav-lvl-1 .menu_add_on {
display: inline-block;
width: 50px;
right: 0;
position: absolute;
}
#btnNAVIMOBILE {
display: block;
position: absolute;
right: 0;
cursor: pointer;
z-index: 701;
}
.nav-toggle {
display: block !important;
}
.navigation-toggle {
width: 100%;
width: var(--breite_navigationsbereich_mobile, 100%);
}
}
/*********************************************************************************/
/**********************************Login-Popup************************************/
.pop {
/*Popup für den Login*/
/* display: none; */
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0.5s;
}
.pop.is-active {
/* display: block; */
opacity: 1;
visibility: visible;
}
.pop-back {
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0px !important;
left: 0px !important;
z-index: 9990 !important;
background-color: black !important;
background-color: var(--farbe_login_hintergrund, black) !important;
opacity: 0.6 !important;
opacity: var(--trans_login_hintergrund, 0.7) !important;
}
.pop-up {
border: 1px solid black !important;
border-radius: 10px !important;
min-height: 400px !important;
min-height: var(--hoehe_login_popup, 400px) !important;
min-width: 50% !important;
min-width: var(--breite_login_popup, 50%) !important;
z-index: 9995 !important;
background-color: white !important;
background-color: var(--farbe_login_popup_hintergrund, white) !important;
opacity: 1.0 !important;
opacity: var(--trans_login_popup_hintergrund, 1.0) !important;
left: calc(50% * 0.5) !important;
left: calc(var(--breite_login_popup_rest, 50%) * 0.5) !important;
top: 20%;
position: fixed !important;
padding: 15px !important;
color: black !important;
color: var(--farbe_login_popup_schrift, black) !important;
}
.pop-up div>input {
background-color: initial;
background-color: var(--farbe_login_eingabe_hintergrund, initial);
}
/************************Login Version 1************************/
.pop-up-back {
position: fixed;
z-index: 9995 !important;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.pop-up-exit {
float: right;
height: 50px;
width: 50px;
margin: 5px;
cursor: pointer;
}
.pop-up.login-v1 {
position: static !important;
left: auto !important;
border: 0px;
border-color: transparent !important;
background-color: transparent !important;
padding: 0 !important;
width: 400px !important;
margin: 0 auto;
margin-top: 300px;
}
/*Login Label Bereich*/
.login-v1-label {
display: flex;
align-items: flex-end;
justify-content: center;
align-content: center;
position: relative;
}
.login-v1-label>label,
.login-v1-input .btn {
background-color: white !important;
background-color: var(--farbe_login_popup_hintergrund, white) !important;
border-radius: 0;
text-align: center;
width: 100%;
margin: 0;
color: white;
}
.login-v1-label:before,
.login-v1-label:after {
display: flex;
content: " ";
background-color: white;
height: 15px;
width: 25px;
}
/* Login Close Button*/
.login-v1-label .popup-close {
/* Für den Fall Login werden andere Ausrichtungen des Popup-Schließen Schalter benötigt */
top: 8px;
right: -16px;
}
/*Login Input Bereich*/
.login-v1-input {
padding: 25px !important;
background-color: white;
box-shadow: 20px 20px 50px #BDBDBD;
}
.login-v1-input>div input {
color: black !important;
background-color: #DBDBDB;
}
.login-v1-input label {
font-weight: normal;
}
.login-v1-input .login-spec div:first-child {
display: block;
float: left;
}
.login-v1-input .login-spec div:last-child {
display: block;
float: right;
}
/* Anzeigen / Ausblenden */
input[type="password"]~button[aria-label="anzeigen"].show-password,
input[type="text"]~button[aria-label="ausblenden"].show-password {
display: block;
}
input[type="text"]~button[aria-label="anzeigen"].show-password,
input[type="password"]~button[aria-label="ausblenden"].show-password {
display: none;
}
.show-password {
background: 0 0;
border: 0;
z-index: 2;
color: #5BA2DA;
cursor: pointer;
position: absolute;
height: 34px;
padding: 6px;
right: 0;
font-size: 13px;
line-height: normal;
}
/***************************************************************/
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.pop-back {
opacity: 0.95 !important;
}
.pop-up {
left: 0 !important;
width: 100% !important;
opacity: 1.0 !important;
top: 30% !important;
}
.login-v1-label>label {
font-size: 35px !important;
font-weight: normal !important;
}
.login-v1-label .popup-close {
top: -16px;
right: 3px;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.pop-up.login-v1 {
width: 100% !important;
margin-top: calc(60px * 3) !important;
margin-top: calc(var(--hoehe_header_mobile, 60px) * 3) !important;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.pop-up.login-v1 {
width: 100% !important;
margin-top: calc(60px + 20px) !important;
margin-top: calc(var(--hoehe_header_mobile, 60px) + 20px) !important;
}
}
/*********************************************************************************/
/**********************************Haupt-Bereich**********************************/
.main-area {
/*Zentrierter Hauptbereich*/
margin: 0 auto;
}
#main_content {
/* Container der Site über volle Breite ausweiten */
width: 100%;
}
#main_content.ex {
/*Wenn die Klasse logo-ex verwendet wird, darf der Hauptbereich erst unter dem Logo anfangen*/
padding-top: 80px;
padding-top: var(--hoehe_logo, 80px);
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/*Tablet*/
#main_content.ex {
padding-top: 80px;
padding-top: var(--hoehe_logo, 80px);
}
}
@media only screen and (max-width: 671px) {
/*Handy*/
#main_content.ex {
padding-top: 0px !important;
}
}
/*********************************************************************************/
/***********************Brotkrumen - Weg des Programmpnktes***********************/
.way-navigation-filler {
background-color: white;
background-color: var(--farbe_header, white);
padding-left: 20%;
position: absolute;
z-index: 1;
}
.way-navigation {
/*Zeile für die Brotkrumen*/
background-color: white;
background-color: var(--farbe_header, white);
display: block;
padding-left: 40px;
}
.way-navigation a {
/*Farbe für Links ändern*/
color: black;
}
@media only screen and (max-width: 671px) {
/* Handy */
.way-navigation-filler {
display: none;
}
.way-navigation {
padding-left: 10px;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 1024px) {
/* Handy + Tablet */
.way-navigation a {
/* Schriftgröße im Mobilfall vergrößern */
font-size: 18px;
}
}
/*********************************************************************************/
/*** Ankerpunkt um das Zielelement entsprechend der Navigation zu verschieben ****/
.anchor {
position: absolute;
z-index: -1;
margin-top: calc((80px * (-1)) + 1px);
margin-top: calc((var(--hoehe_header, 80px) * (-1)) + 1px);
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
/* Höhe des Mobilen Headers [+ Höhe des Logos im Fall ex] abziehen */
.anchor {
margin-top: calc((60px * (-1)) + 1px);
margin-top: calc((var(--hoehe_header_mobile, 60px) * (-1)) + 1px);
}
}
@media only screen and (max-width: 672px) {
.anchor {
margin-top: calc((60px * (-1)) + 1px);
margin-top: calc((var(--hoehe_header_mobile, 60px) * (-1)) + 1px);
}
}
/****************************************************************************************************************************************************************************************
DATEI: std_search.css
*****************************************************************************************************************************************************************************************/
/*********************************************************************************/
/**********************************Style - News***********************************/
.Tbl_Header_News {
/*Header der Suche*/
}
.Tbl_Line_News_1 {
/*Zeile (ungerade)*/
}
.Tbl_Line_News_2 {
/*Zeile (gerade)*/
}
.Tbl_Col_News_Graphic {
/*Grafikbereich*/
width: 25%;
padding: 10px;
}
.Tbl_Col_News_Graphic img {
/*Grafik*/
width: 100%;
max-height: 250px;
object-fit: cover;
}
.Tbl_Col_News_Label {
/*Überschriftsbereich*/
width: auto;
display: block;
padding: 10px;
}
.Tbl_Col_News_Label a {
/*Überschrift*/
font-size: 1.5em;
font-weight: bold;
color: gray;
}
.Tbl_Col_News {
/*Textbereich*/
width: auto;
display: block;
padding: 10px;
}
.Tbl_Col_Header_News {}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Tbl_Col_News {
margin-bottom: 30px;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.Tbl_Col_News_Graphic {
width: 50%;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.Tbl_Col_News_Graphic {
width: 100%;
display: block;
}
}
/*********************************************************************************/
/*******************************Style - News Blog*********************************/
.Tbl_NewsBlog tbody {
/*Gesamter Block*/
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.Tbl_NewsBlog .screen {
margin: 0 !important;
}
.Tbl_Header_NewsBlog {
/*Header der Suche*/
}
.Tbl_Line_NewsBlog {
/*Zeile (ungerade)*/
background-color: white;
display: inline-block;
min-height: 550px;
width: 30%;
margin: 40px 0% 10px 0px;
box-shadow: 0px 0px 20px -5px #BDBDBD;
/* Position setzen, damit der Endbereich immer am unteren Rand ausgerichtet werden kann */
position: relative;
}
.Tbl_Line_Sel_NewsBlog {
box-shadow: 0px 0px 20px -5px rgba(91, 162, 218, 1);
}
.Tbl_Line_NewsBlog.Tbl_Line_NewsBlog_2 {
/*Zeile (gerade)*/
}
.Tbl_Col_NewsBlog_Label {
/*Überschriftsbereich*/
height: 80px;
width: 100%;
display: block;
padding: 15px;
/* Überschriftsworte auf Breite des DIVs eingrenzen */
overflow: hidden;
text-overflow: ellipsis;
}
.Tbl_Col_NewsBlog_Label a {
/*Überschrift*/
font-size: 1.5em;
font-weight: bold;
color: black;
}
.Tbl_Col_NewsBlog_Graphic .add-icon {
/* Optional kann ein Icon / transparentes Bild über das original Bild gelegt werden */
position: absolute;
width: 100%;
height: 150px;
margin: 25px 0px;
background-image: url(gfx/kein_Bild_vorhanden.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.Tbl_Col_NewsBlog_Graphic {
/*Grafikbereich*/
width: 100%;
display: block;
background-color: #ffffff;
/* Von Schwarz auf weiß geändert. Sieht, wenn die Bilder noch am Laden sind, wesentlich besser aus als ein schwarzer Block */
}
.Tbl_Col_NewsBlog_Graphic img {
/*Grafik*/
width: 100%;
height: 200px;
object-fit: cover;
}
.Tbl_Col_NewsBlog_Graphic.graphic-scale img {
/* Grafik skalieren */
object-fit: contain;
}
.Tbl_Col_NewsBlog_Date {
/*Datum*/
color: #A4A4A4;
padding: 15px;
height: 50px;
}
.Tbl_Col_NewsBlog_Date a {
color: #A4A4A4;
}
.Tbl_Col_NewsBlog {
/*Textbereich*/
color: #585858;
/*
min-height: 170px;
*/
height: 170px;
overflow: hidden;
width: auto;
display: block;
padding: 15px;
/* Platz reservieren, für den Endbereich */
margin-bottom: 50px;
text-align: justify;
word-break: break-word;
word-wrap: break-word;
}
.Tbl_Col_NewsBlog h1,
.Tbl_Col_NewsBlog h2,
.Tbl_Col_NewsBlog h3,
.Tbl_Col_NewsBlog h4,
.Tbl_Col_NewsBlog h5 {
margin: 0;
font-size: 14px;
font-weight: bold;
}
.Tbl_Col_NewsBlog a {
color: #585858;
}
.Tbl_Col_NewsBlog::before {
content: "";
position: absolute;
z-index: 1;
width: calc(100% - 30px);
height: calc(170px - 15px);
background-image: linear-gradient(to bottom, transparent 75%, white calc(100% - 15px));
}
.Tbl_Col_NewsBlog.show_full_newstext {
min-height: 170px;
height: auto;
}
.Tbl_Col_NewsBlog.show_full_newstext::before {
z-index: -1;
}
.Tbl_Col_NewsBlog_End {
/*Zum Artikel*/
display: block;
min-height: 50px;
width: auto;
padding-top: 15px;
margin: 0 15px 0 15px;
border-top: 1px solid #A4A4A4;
/* Den Endbereich immer am unteren Rand ausrichten */
position: absolute;
bottom: 0;
width: calc(100% - 30px);
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Tbl_Line_NewsBlog {
min-height: auto;
width: 100%;
}
.Tbl_Col_NewsBlog_Graphic img {
height: auto;
}
.Tbl_Col_NewsBlog {
min-height: auto;
}
}
/*********************************************************************************/
/***************************** Style - Individual ********************************/
.Tbl_Header_Individual {
/* Header */
background-color: #606060;
text-align: center;
vertical-align: middle;
}
.Tbl_Header_Individual>td,
.Tbl_Header_Individual font {
/* Schrift im Header */
color: white;
font-weight: bold;
font-size: 14px;
padding-left: 2px;
padding-right: 2px;
line-height: 3;
}
.Tbl_Header_Individual>td {
/* Rahmen im Header */
border-width: 1px;
border-color: white;
border-style: none solid none none;
}
.Tbl_Header_Individual+tr .filterbtn_background {
/* Filterbutton ausblenden */
display: none;
}
.Tbl_Line_Individual {
/* Standardwerte für jede Zeile */
min-height: 25px;
width: 100%;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
}
.Tbl_Line_Individual:hover {
/* Hovereffekt für jede Zeile */
color: gray;
}
.Tbl_Line_Individual td {
font-size: inherit;
line-height: inherit;
}
.Tbl_Line_Individual a {
/* Alle Links innerhalb Zeilen der Tabelle */
height: 100%;
width: 100%;
display: block;
font-size: inherit;
line-height: inherit;
}
.Tbl_Line_Individual.First_Line_1:nth-child(1),
.Tbl_Line_Individual.First_Line_1:nth-child(1) a,
.Tbl_Line_Individual.First_Line_2:nth-child(2),
.Tbl_Line_Individual.First_Line_2:nth-child(2) a,
.Tbl_Line_Individual.First_Line_3:nth-child(3),
.Tbl_Line_Individual.First_Line_3:nth-child(3) a {
/* erste Zeile (erstes, zweites oder drittes Element ausgewählt, da nicht klar ist, ob mit/ohne Header und ob mit/ohne Filterfelder) */
background-color: yellow !important;
color: black !important;
}
.Tbl_Line_Individual:nth-child(odd) {
/* ungerade Zeilen */
}
.Tbl_Line_Individual:nth-child(even) {
/* Hintergrundfarbe bei gerade Zeilen */
background-color: #A4090F;
}
.Tbl_Line_Individual:nth-child(even),
.Tbl_Line_Individual:nth-child(even) a {
/* gerade Zeilen */
color: white;
}
/* Zeile, die zuletzt ausgewählt wurde */
.Tbl_Line_Individual_Sel {
background-color: rgba(255, 255, 0, 1) !important;
color: black !important;
}
.Tbl_Line_Individual_Sel a {
color: black !important;
}
.Nav_Individual {
/* Navigation */
text-align: center;
}
.Nav_Individual ul {
width: 100%;
}
.Nav_Individual li {
display: inline-block;
}
.Nav_Individual li>a {
/* Navigation-Item */
color: #A4090F !important;
height: auto;
display: block;
}
.Nav_Individual li>span {
/* Navigation-Item ausgewählt */
background-color: #A4090F !important;
border-color: #A4090F !important;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Tbl_Header_Individual>td,
.Tbl_Header_Individual font,
.Tbl_Line_Individual,
.Nav_Individual li {
font-size: 22px;
}
}
/*********************************************************************************/
/******************************** Style - Downloads ******************************/
.Div_Download {
padding: 20px;
background-color: white;
}
.Div_Header_Download_Text.header-v2 {
/* Überschrift */
padding-bottom: 130px;
}
.Div_Header_Download_Text.header-v2 h2 {
/* Überschrift */
text-decoration: underline;
}
.Div_Header_Download,
.Div_Header_Download.header-v2 {
/* Kopfzeile */
background-color: white;
text-align: left;
vertical-align: middle;
border-bottom: 3px #E6E6E6 solid;
}
.Div_Header_Download>div>div {
/* Schrift im Header */
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
line-height: 3;
display: inline-block;
}
.Div_Header_Download>div>div:nth-child(1) {
display: none;
}
.Div_Header_Download>div>div:nth-child(2),
.Div_Header_Download>div>div:nth-child(5),
.Div_Header_Download>div>div:nth-child(6) {
width: 10%;
}
.Div_Header_Download>div>div:nth-child(3),
.Div_Header_Download>div>div:nth-child(7) {
width: 20%;
}
.Div_Header_Download>div>div:nth-child(4) {
width: 30%;
}
.Div_Header_Download.header-v2>div>div:nth-child(1) {
display: inline-block;
}
.Div_Header_Download.header-v2>div>div:nth-child(1),
.Div_Header_Download.header-v2>div>div:nth-child(3) {
width: 10%;
}
.Div_Header_Download.header-v2>div>div:nth-child(2),
.Div_Header_Download.header-v2>div>div:nth-child(5),
.Div_Header_Download.header-v2>div>div:nth-child(6) {
width: 15%;
}
.Div_Header_Download.header-v2>div>div:nth-child(4) {
width: 30%;
}
/* Inputfelder zum Filtern */
.Div_Input_Download>div>div {
position: absolute;
width: 80% !important;
}
.Div_Input_Download>div>div::before,
.Div_Input_Download input {
display: inline-block;
margin-left: -18px;
}
.Div_Input_Download>div>div:nth-child(3) {
margin-top: -200px;
}
.Div_Input_Download>div>div:nth-child(3)::before {
content: "Nummer:\00a0";
width: 150px;
}
.Div_Input_Download>div>div:nth-child(4) {
margin-top: -160px;
}
.Div_Input_Download>div>div:nth-child(4)::before {
content: "Bezeichnung:\00a0";
width: 150px;
}
.Div_Input_Download>div>div:nth-child(5) {
margin-top: -120px;
}
.Div_Input_Download>div>div:nth-child(5)::before {
content: "Datum:\00a0";
width: 150px;
}
.Div_Line_Download {
/* Zeilen */
background-color: white;
}
.Div_Line_Download:hover {
/* Zeilen */
background-color: #E6E6E6;
}
.Div_Line_Download>div {
/* Alle Spalten */
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.Div_Line_Download_Sel {
/* Ausgewählte Zeilen */
}
.Div_Line_Download .Col_text {
/* Textspalten */
hyphens: auto;
}
.Div_Line_Download .Col_10 {
/* Textspalten */
width: 10% !important;
}
.Div_Line_Download .Col_15 {
/* Textspalten */
width: 15% !important;
}
.Div_Line_Download .Col_20 {
/* Textspalten */
width: 20% !important;
}
.Div_Line_Download .Col_30 {
/* Textspalten */
width: 30% !important;
}
.Div_Line_Download .Col_titel {
/* Gruppen-Überschriftsspalte */
width: 100% !important;
background-color: white !important;
padding-top: 20px;
padding-bottom: 10px;
font-weight: bold;
line-height: 3;
text-align: center;
}
.Div_Line_Download .Col_item {}
.Div_Line_Download .Col_detail {
/* Details wie Größe und Stand */
}
.Div_Line_Download .Col_btnDownload {
/* Download Button */
}
.Nav_Download {
/* Navigator */
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Div_Header_Download {
border-bottom: hidden;
}
.Div_Header_Download>div>div {
display: none;
}
.Div_Line_Download:nth-child(odd) {
background-color: #E6E6E6;
}
.Div_Line_Download>div {
display: block;
}
.Div_Line_Download.separate-line {
margin-bottom: 10px;
border-bottom: 3px #C6C6C6 solid;
}
.Div_Line_Download .Col_10 {
width: 100% !important;
}
.Div_Line_Download .Col_15 {
width: 100% !important;
}
.Div_Line_Download .Col_20 {
width: 100% !important;
}
.Div_Line_Download .Col_30 {
width: 100% !important;
}
.Div_Line_Download .Col_item {
display: none;
}
.Div_Line_Download .Col_detail {
text-align: right;
}
.Div_Line_Download .Col_btnDownload {
text-align: right;
}
.Col_10.Col-Mobile-Together,
.Col_15.Col-Mobile-Together,
.Col_20.Col-Mobile-Together,
.Col_30.Col-Mobile-Together {
width: auto !important;
display: inline-block !important;
}
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Div_Header_Download_Text.header-v2 {
padding-bottom: 180px;
}
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Div_Input_Download>div>div:nth-child(3) {
margin-top: -240px;
}
.Div_Input_Download>div>div:nth-child(4) {
margin-top: -180px;
}
.Div_Input_Download>div>div:nth-child(6) {
margin-top: -120px;
}
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.Div_Input_Download input {
width: 100% !important;
}
}
/*********************************************************************************/
/*********************************Markierung Offene*******************************/
tr.Tbl_Line_Offen {
background-color: lime;
}
tr.Tbl_Line_Offen:hover {
background-color: green;
}
tr.Tbl_Line_Offen_Sel {
background-color: lime;
}
tr.Tbl_Line_Offen_Sel:hover {
background-color: green;
}
/*********************************************************************************/
/******************************Style - Übersichtlich******************************/
.Tbl_Header_Clear font {
font-size: 20px !important;
}
.Tbl_Line_Clear,
.Tbl_Line_Clear_2,
.Tbl_Line_Sel_Clear {
font-size: 20px !important;
}
.Tbl_Line_Clear a,
.Tbl_Line_Clear_2 a,
.Tbl_Line_Sel_Clear a {
font-size: 20px !important;
width: 100%;
display: block;
}
/*********************************************************************************/
/************************************Navigator************************************/
.page-count {
/* Seitenanzahl */
margin-top: -20px;
}
/****************************************************************************************************************************************************************************************
DATEI: std_elements.css
*****************************************************************************************************************************************************************************************/
/* Standard Style für Elemente */
/**********************************Info-Bereich***********************************/
.info-area {
/* Bereich für Infos */
padding: 0;
position: relative;
height: 300px;
height: var(--hoehe_infobereich, 300px);
}
.ex .info-area {
/* Infobereich bei Klassen "logo-ex" nach oben veschrieben */
margin-top: calc(80px * (-1));
margin-top: calc(var(--hoehe_logo, 80px) * (-1));
}
.ex .info-area.inside {
/* Infobereich bei Klassen "logo-ex" innerhalb der Seite, ohne oberen Abstand */
margin-top: 0px;
}
.info-area-image {
/* Bild innerhalb des Infobereichs */
height: 300px;
height: var(--hoehe_infobereich, 300px);
background-image: url('./gfx/kein_Bild_vorhanden.jpg');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.info-area-text {
/* Überschriftstext innerhalb des Infobereichs */
text-align: center;
padding-top: 100px;
height: 100%;
color: white;
font-size: 50px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
}
.info-area-text.shadowtext {
/* Setzt einen Schatten für den Überschriftstext innerhalb des Infobereichs */
text-shadow: 5px 5px 5px black;
}
.info-area-caption {
/* Überschriftstext innerhalb des Infobereichs */
text-align: center;
color: white;
font-size: 20px;
}
@media only screen and (max-width: 671px) {
/* Handy */
.info-area,
.info-area-image {
height: calc(300px * (2/3)) !important;
height: calc(var(--hoehe_infobereich, 300px) * (2/3)) !important;
}
.ex .info-area {
margin-top: -5px;
}
.info-area-text {
font-size: 25px;
padding-top: 100px;
}
}
/*********************************************************************************/
/*************************************Gallery*************************************/
.graphic-gallery {
padding: 0;
position: relative;
display: inline-block;
height: 250px;
}
.graphic-gallery div {
height: inherit;
}
.graphic-gallery-image {
/* Bild innerhalb des Infobereichs */
height: inherit;
background-image: url('./gfx/kein_Bild_vorhanden.jpg');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
a.graphic-gallery-image {
cursor: pointer;
}
.graphic-gallery-image.zoom {
/* Bild zoomen */
background-size: cover !important;
}
.graphic-gallery-image.zoom>img {
/* Grafik heranzoomen, bis diese das Element ausfüllt */
object-fit: cover;
height: inherit;
width: 100%;
}
.graphic-gallery-image.scale {
/* Grafik skalieren, bis diese vollständig in das Element passt */
background-size: contain !important;
}
.graphic-gallery-image.scale>img {
/* Grafik skalieren, bis diese vollständig in das Element passt */
object-fit: contain;
height: 100%;
width: inherit;
margin: auto;
}
/* Bootstrap-Klassen überschreiben */
.carousel-inner {
/* Für IE10+, hält Grafik im Karussell, sonst Verschieben nach unten */
position: absolute;
}
.carousel-caption {
/* Text innerhalb des Infobereichs */
height: auto !important;
color: white;
color: var(--farbe_infobereich_text, white);
}
.carousel-indicators li {
/* Navigationspunkte innerhalb des Infobereichs */
border: 1px solid white;
border: 1px solid var(--farbe_infobereich_navi, white);
height: 15px;
width: 15px;
}
.carousel-indicators .active {
/* Aktiver Navigationspunkt innerhalb des Infobereichs */
background-color: white;
background-color: var(--farbe_infobereich_navi, white);
height: 15px;
width: 15px;
opacity: 0.7;
}
/*********************************************************************************/
/***************************Popup-Bild mit modale Box*****************************/
.modal {
/* Modale Box (Hintergrund) */
padding-top: calc(80px + 30px);
padding-top: calc(var(--hoehe_header, 80px) + 30px);
display: none;
position: fixed;
z-index: 600;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
}
.modal.active,
.modal-active .modal {
/* Box sichtbar machen */
display: block;
}
.modal-content {
/* Inhalt der modalen Box (Grafik) */
margin: auto;
display: block;
width: 80%;
height: 80%;
}
.modal-caption {
/* Bildunterschrift */
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal .close {
/* Close Button */
margin-right: 30px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
float: none;
display: block;
text-align: right;
padding-bottom: 20px;
transition: 0.3s;
}
.modal .close:hover,
.modal .close:focus {
/* Close Button beim Hovern */
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.modal {
padding-top: calc(60px + 30px);
padding-top: calc(var(--hoehe_header_mobile, 60px) + 30px);
}
.modal-content {
width: 100%;
}
}
/*********************************************************************************/
/*********************************Popup-Fenster***********************************/
.popup-overlay {
/** Setzt den Hintergrund grau*/
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
height: calc(100% + 115px);
/** IE: Setzt die Höhe der grauen Oberfläche auf die gesamte Seite (inklusive Footer) */
height: calc(100% + (var(--hoehe_footer, 115px)));
/** Setzt die Höhe der grauen Oberfläche auf die gesamte Seite (inklusive Footer) */
}
.popup-overlay.is-active {
/** Schaltet die Overlay-Klasse sowie das ganze Popup sichtbar*/
visibility: visible;
opacity: 1;
z-index: 1;
z-index: 600;
/*position: fixed;*/
}
.popup-overlay.no-scroll {
/** Popup scrollt nicht mit und bleibt beim scrollen fest stehen*/
position: absolute;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.popup-overlay {
height: calc(100% + (115px * 2));
/** IE: Setzt die Höhe der grauen Oberfläche im Mobilfall auf die gesamte Seite (inklusive Footer) */
height: calc(100% + (var(--hoehe_footer, 115px) * 2));
/** Setzt die Höhe der grauen Oberfläche im Mobilfall auf die gesamte Seite (inklusive Footer) */
}
}
.popup-wrapper {
/** Definition des Popup Feld*/
/*margin: 70px auto;
margin: calc(80px * 2) auto;
margin: calc(var(--hoehe_header, 80px) * 2) auto;*/
padding: 20px;
border-radius: 5px;
width: 60%;
margin: auto;
top: calc(80px * 2);
top: calc(var(--hoehe_header, 80px) * 2);
display: table;
background-color: #F2F2F2;
position: relative;
/* Animation */
transition: all .7s ease-in-out;
/* Schatten */
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}
.popup-close {
/* Schließen Schalter */
position: absolute;
top: -14.5px;
right: -14.5px;
border-radius: 50%;
padding: 8px;
/* background-color: rgba(249, 249, 249, 0.9);;
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.75); */
border: 1px solid #C3C3C3;
width: 33px;
height: 33px;
cursor: pointer;
}
.popup-close:hover {
background-color: #FCFCFC;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.close-img {
/* Setzt das X-Bild als Hintergrund des DIVS für den Schließen Schalter des Standard Popup */
background-image: url(../gfx/x-btn.png);
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
background-size: contain;
}
.popup-close .close-img {
/* Setzt die Größe des X-Bildes für den Schließen Schalter des Standard Popup*/
width: 100%;
height: 100%;
}
@media only screen and (min-width: 1024px) {
/* Dekstop */
.popup-wrapper.xs {
width: 25%;
}
.popup-wrapper.sm {
width: 35%;
}
.popup-wrapper.md {
width: 45%;
}
.popup-wrapper.lg {
width: 55%;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.popup-wrapper.xs {
width: 40%;
}
.popup-wrapper.sm {
width: 50%;
}
.popup-wrapper.md {
width: 70%;
}
.popup-wrapper.lg {
width: 90%;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.popup-wrapper.xs {
width: 70%;
}
.popup-wrapper.sm {
width: 70%;
}
.popup-wrapper.md {
width: 85%;
}
.popup-wrapper.lg {
width: 90%;
}
}
/*********************************************************************************/
/********************************Hintergrundfüller********************************/
.background-filler {
/* Hintergrundbild über die ganze Bildschirm-Höhne/-Breite */
padding-top: 80px;
padding-top: var(--hoehe_logo, 80px);
background-image: url('../gfx/background_filler.png');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
text-align: center;
width: 100%;
min-height: calc(100% - (115px - 80px));
min-height: calc(100% - (var(--hoehe_footer, 115px) - var(--hoehe_logo, 80px)));
}
.ex .background-filler {
/* Im Falle eines Logos mit der Klasse "logo-ex" den oberen reservierten Bereich entfernen */
margin-top: calc(80px * (-1));
margin-top: calc(var(--hoehe_logo, 80px) * (-1));
}
.background-filler.btn-spec {
/* Um unteren Bereich des Hintergrundfüllers Platz reservieren für einen Button */
padding-bottom: 100px;
}
.background-filler.repeat {
background-repeat: repeat;
background-position: left top;
background-size: auto;
}
.background-filler-fix {
background-image: url('../gfx/background_filler.png');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: fixed;
height: 100%;
width: 100%;
z-index: -100;
top: 0;
}
.background-filler.fullscreen-height {
/** Setzt die mindest Höhe des Hintergrund auf die gesamte Bildschirmhöhe minus Navigation und Header*/
min-height: calc(100vh - (80px + 115px));
min-height: calc(100vh - (var(--hoehe_logo, 80px) + var(--hoehe_footer, 115px)));
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.background-filler {
min-height: calc(100% - ((115px * 2) - 80px));
min-height: calc(100% - ((var(--hoehe_footer, 115px) * 2) - var(--hoehe_logo, 80px)));
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.background-filler {
margin-top: auto !important;
padding-top: 5px;
min-height: calc(100% - (115px * 2));
min-height: calc(100% - (var(--hoehe_footer, 115px) * 2));
}
}
/*********************************************************************************/
/************************** Helpcenter - Servicebereich **************************/
.helpcenter {
/* Helpcenter rechts mittig fixieren */
position: fixed;
z-index: 650;
top: 40%;
right: 0;
text-align: center;
}
.helpcenter>ul {
/* Keine List-Punkte */
list-style: none;
padding: 0;
margin: 0;
}
.helpcenter li:first-child {
/* Erstes Element soll kein Trennstrich oben haben */
border-top: none;
}
.helpcenter li {
/* Elemente sollen einen Trennstrich haben und als Button erkannt werden */
border-top: 1px solid white;
cursor: pointer;
}
.helpcenter-item {
/* Element zum Klicken / Hovern */
display: block;
background-color: gray;
background-color: var(--farbe_helpcenter, gray);
color: white;
height: 60px;
width: 66px;
}
.helpcenter-item:hover {
/* Element beim Hovern */
background-color: silver;
background-color: var(--farbe_helpcenter_hover, silver);
}
.helpcenter-item .graphic {
/* Icon-Element anzeigen */
height: 33px;
width: 33px;
margin-top: 3px;
display: inline-block;
vertical-align: text-top;
}
.helpcenter-text {
/* Text-Element, wenn vorhanden links und fest definiert */
background-color: gray;
background-color: var(--farbe_helpcenter, gray);
position: absolute;
height: auto;
width: 250px;
margin-top: -58px;
margin-left: 66px;
padding: 9px;
overflow: hidden;
text-align: left;
color: white;
cursor: default;
border-radius: 0 0 10px 0;
opacity: 0;
transition: opacity 0.5s;
}
li:hover+.helpcenter-text,
.helpcenter-text:hover {
/* Text-Element einblenden */
margin-left: -250px;
opacity: 1.0;
}
/* Mobiles Menü über Info Button */
.helpcenter-mob-info-menu {
display: none;
position: fixed;
z-index: 750;
top: 0;
right: calc(40px + 70px);
right: calc(var(--groesse_btnnavi_mobile, 40px) + 70px);
height: 40px;
width: 40px;
margin-top: calc((60px - 40px) * 0.5);
margin-top: calc((var(--hoehe_header_mobile, 60px) - 40px) * 0.5);
cursor: pointer;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url('../gfx/info-btn.png');
transition: transform 0.5s;
}
.helpcenter.is-active~.helpcenter-mob-info-menu {
transform: rotate(180deg);
border-radius: 50%;
background-color: #5BA2DA;
background-color: var(--color_hint, #5BA2DA);
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.helpcenter {
/* Servicebereich oben herausraus schieben */
height: calc(100% - 60px);
height: calc(100% - var(--hoehe_header_mobile, 60px));
width: 100%;
right: 0;
background-color: gray;
background-color: var(--farbe_helpcenter, gray);
top: -100%;
transition: top 0.5s;
/* Zeit zum Hineinschieben 0,5 Sekunden */
}
/* Servicebereich von oben hinein schieben */
.helpcenter.is-active {
top: 60px;
top: var(--hoehe_header_mobile, 60px);
}
/* Servicebereich als Kacheln anzeigen */
.helpcenter ul {
display: grid;
height: 100%;
}
/* Ränder ausblenden */
.helpcenter li {
border-top: 0px solid white;
}
/* Verfügbaren Platz voll nutzen */
.helpcenter .helpcenter-item {
height: 100%;
width: 100%;
}
/* Grafik prozentual vergrößern */
.helpcenter-item .graphic {
margin: 10% 10% 0% 10%;
height: 40%;
width: 80%;
}
/* Bezeichnung vergrößern */
.helpcenter-item span {
display: inline-block;
height: 50%;
width: 100%;
font-size: 30px;
}
/* Info-Button anzeigen */
.helpcenter-mob-info-menu {
display: block;
}
/* Info-Button ausblenden */
.helpcenter-mob-info-menu.inactive {
display: none;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
/* Kacheln je 2 nebeneinander */
.helpcenter ul {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
/* Für IE Grads definieren, wo Sie starten sollen */
.helpcenter ul>li:nth-child(2),
.helpcenter-text {}
/* Für IE Grads definieren, wo Sie starten sollen */
.helpcenter ul>li:nth-child(3),
.helpcenter-text {}
/* Rand unten an einzelnder Kachel */
.helpcenter-item {
border-bottom: 1px white solid;
}
/* Rand rechts an jeder ungeraden Kachel */
.helpcenter-item:nth-child(odd) {
border-right: 1px white solid;
}
/* Text in der Grid-Area halten */
.helpcenter-text {
position: inherit;
margin: 0;
text-align: inherit;
width: inherit;
padding: 20px;
opacity: 1.0;
}
/* Text an der selber Position halten */
li:hover+.helpcenter-text,
.helpcenter-text:hover {
margin-left: 0;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
/* Kacheln untereinander */
.helpcenter ul {
grid-template-columns: auto;
grid-template-rows: auto;
}
/* Für IE Grads definieren, wo Sie starten sollen */
.helpcenter ul>li:nth-child(2) {}
/* Für IE Grads definieren, wo Sie starten sollen */
.helpcenter ul>li:nth-child(3) {}
/* Text ausblenden/unsichtbar machen */
.helpcenter-text {
opacity: 0.0;
z-index: -1;
}
/* Text ausblenden/unsichtbar machen */
li:hover+.helpcenter-text,
.helpcenter-text:hover {
margin-left: 0;
opacity: 0.0;
}
}
/*********************************************************************************/
/************************************Kacheln**************************************/
.tile {
/* Kachel Grundelement */
min-height: 200px;
width: 200px;
background-color: silver;
background-color: var(--farbe_kachel, silver);
color: black;
color: var(--farbe_schrift_kachel, black);
padding: 5px;
margin: 20px;
display: inline-block;
vertical-align: top;
position: relative;
}
.tile.transparent {
/* Transparenz der Kachel beachten */
opacity: var(--transparenz_kachel, 0.5);
}
.tile.transparent.opac-70 {
/* Transparenz der Kachel 70% */
opacity: 0.7;
}
.tile.transparent:hover {
/* Transparenz der Kachel nicht beachten beim Hovern */
opacity: 1.0;
}
/* Größe der Kachel anpassen */
.tile.size-xs {
min-height: 100px;
width: 100px;
}
.tile.size-sm {
min-height: 200px;
width: 200px;
}
.tile.size-md {
min-height: 250px;
width: 250px;
}
.tile.size-lg {
min-height: 350px;
width: 350px;
}
.tile.size-xl {
/* Kachel mit voller Breite */
min-height: 350px;
width: 100%;
}
/* Überschriftsgröße anpassen */
.tile.size-sm h1 {
font-size: 25px;
}
/* Im Handyfall Icon und Überschrift verbinden */
.tile .icon-headline .tile-icon {}
.tile .icon-headline h1 {}
.tile-icon {
/* Icon innerhalb der Kachel 01 */
margin-top: 10px;
height: 70px;
width: 70px;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.tile h1 {
margin-top: 10px;
font-weight: bold;
/* Silbentrennung Überschrift */
hyphens: auto;
}
.tile-text {
min-height: 25%;
}
.tile-text.btn-spec {
padding-bottom: 60px;
}
.tile .btn {
background-color: gray;
background-color: var(--farbe_kachel_schalter, gray);
border-color: gray;
border-color: var(--farbe_kachel_schalter, gray);
color: white;
color: var(--farbe_schrift_kachel_schalter, white);
min-height: 30px;
width: 70%;
}
/* ~~~~~~~~~~~~~ Schaltfläche / Button rechts unten als Banderole ~~~~~~~~~~~~ */
.btn-tile-br {
position: absolute;
right: -54px;
bottom: 46px;
height: 50px;
width: 250px;
transform: rotateZ(-45deg);
}
.btn-tile-br:before {
content: "";
position: absolute;
height: 0;
width: 250px;
border-top: 50px solid #5BA2DA;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
right: 0;
}
.btn-tile-br:after {
content: "";
position: absolute;
z-index: -1;
height: 0;
width: 248px;
border-top: 50px solid #5BA2DA;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
right: 0;
}
.btn-tile-br>div {
position: absolute;
width: 100%;
height: 100%;
right: 0px;
padding: 10px;
color: black;
font-weight: bold;
font-size: 17px;
}
.tile:hover .btn-tile-br>div {
/* Schwarz */
color: rgba(0, 0, 0, 0.8);
box-shadow: 0px -7px 6px -5px rgba(0, 0, 0, 0.8);
/* Weiß */
color: rgba(255, 255, 255, 0.8);
box-shadow: 0px -7px 6px -5px rgba(255, 255, 255, 0.8);
}
.tile:hover h1,
.tile:hover h2,
.tile:hover h3,
.tile:hover h4,
.tile:hover h5,
.tile:hover h6 {
text-shadow: 0 0 4px white;
}
.tile-01 {
/* Kachel mit rechts unten abgerundeter Ecke */
border-radius: 0 0 10% 0;
}
.tile-02 {
/* Kachel mit leicht abgerundeten Ecken */
border-radius: 5px;
}
.tile-list-flex {
/* Alle Kacheln/Divs innerhalt dieser Klasse gleichmäßig auflisten */
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
width: 900px;
/* Um im Normalfall immer 3 Kacheln nebeneinander zu haben */
}
.tile-list-flex.xl {
width: 100%;
}
.tile-list-flex.align-sp {
justify-content: space-between;
}
.tile-list-flex.align-se {
justify-content: space-evenly;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.tile-icon {
height: 50px;
width: 50px;
}
.tile-list-flex {
width: 100%;
}
/* Schalter / Banderole gerade nach oben schieben */
.btn-tile-br {
right: 0px;
min-height: 40px;
top: 20px;
width: 100%;
transform: none;
}
.btn-tile-br:before,
.btn-tile-br:after {
width: 100%;
border-top: 40px solid #5BA2DA;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
}
.tile-list-flex.align-sp {
justify-content: center;
}
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.tile.size-xs {
min-height: 100px;
width: 100px;
}
.tile.size-lg {
min-height: 250px;
width: 250px;
}
.tile.size-xl {
min-height: 250px;
width: 100%;
}
.tile.size-sm h1 {
font-size: 100%;
}
.tile.size-sm .tile-text {
font-size: 75%;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.tile.size-xs {
min-height: 100px;
width: 90%;
}
.tile.size-sm {
min-height: 150px;
width: 90%;
}
.tile.size-md {
min-height: 200px;
width: 90%;
}
.tile.size-lg {
min-height: 250px;
width: 90%;
}
.tile.size-xl {
min-height: 250px;
width: 90%;
}
.tile .icon-headline .tile-icon {
vertical-align: bottom;
display: inline-block;
}
.tile .icon-headline h1 {
width: auto;
display: inline-block;
}
.tile-01 {
border-radius: 0 0 30px 0;
}
}
/*********************************************************************************/
/*************************************Schalter************************************/
.btn-tile {
/* Großer eigener Schalter im Bereich der Kacheln*/
background-color: gray !important;
background-color: var(--farbe_kachel_schalter, gray) !important;
border-color: gray !important;
border-color: var(--farbe_kachel_schalter, gray) !important;
color: white !important;
color: var(--farbe_schrift_kachel_schalter, white) !important;
height: 60px;
min-width: 350px;
padding: 10px;
font-size: 30px !important;
}
.btn-close {
/* Cloase-Button - X-Button - Schaltfläche zum Schließen */
position: relative;
display: inline-block;
width: 50px;
height: 50px;
overflow: hidden;
}
.btn-close::before,
.btn-close::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: black;
height: 8px;
margin-top: -4px;
}
.btn-close::before {
transform: rotate(45deg);
}
.btn-close::after {
transform: rotate(-45deg);
}
.btn-close.btn-white::before,
.btn-close.btn-white::after {
/* Farbe anders als Standard definieren (Weiß) */
background-color: white;
}
.btnc-line>div {
/* Eine Reihe von Schaltern hintereinander, müssen in einem div einzelnd gekapselt werden */
float: left;
}
.btnc {
/* Standard Button */
display: inline-block;
max-width: 100%;
margin: 5px;
padding: 10px;
border-width: 1px;
border-style: solid;
border-color: gray;
border-radius: 5px;
color: black;
background-color: darkgray;
font-size: 14px;
}
.btnc:hover {}
.btnc.flush {
/* Buttons Bündig */
margin-left: 0;
margin-right: 0;
}
.btn-icon {
/* Button mit Icon */
color: #8E8D92;
background-color: #F3F3F3;
border-color: #BFBFBF;
border-radius: 3px;
box-shadow: -2px 5px 5px;
font-weight: bold;
}
.btn-icon:hover {
margin: 10px 5px 0px 5px;
box-shadow: -2px 2px 5px;
}
.icon-btn-one,
.icon-btn-two {
/* Icon im Button */
width: 14px;
height: 14px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.icon-btn-one {
/* Icon im Button links */
float: left;
margin: 3px 6px 3px 3px;
}
.icon-btn-two {
/* Icon im Button rechts */
float: right;
margin: 3px 3px 3px 6px;
}
.btn-icon .icon-sm {
/* Kleinegroße Icon verwenden */
width: 20px;
height: 20px;
}
.icon-btn-one.icon-sm {
margin: 0px 3px 0px 0px;
}
.icon-btn-two.icon-sm {
margin: 0px 0px 0px 3px;
}
.btn-icon .icon-md {
/* Mittelgroßes Icon verwenden */
width: 30px;
height: 30px;
}
.icon-btn-one.icon-md {
margin: -5px 3px -5px 0px;
}
.icon-btn-two.icon-md {
margin: -5px 0px -5px 3px;
}
/* Icons für Buttons */
.btn-icon .left {
background-image: url('../gfx/arrow-left-btn.png');
}
.btn-icon .right {
background-image: url('../gfx/arrow-right-btn.png');
}
.btn-icon .download {
background-image: url('../gfx/download-cloud-btn.png');
}
.btn-icon .check {
background-image: url('../gfx/check-btn.png');
}
.btn-icon .x {
background-image: url('../gfx/x-btn.png');
}
.btn-icon .delete {
background-image: url('../gfx/delete-btn.png');
}
.btn-icon .warning {
background-image: url('../gfx/warning-btn.png');
}
.btn-icon .time {
background-image: url('../gfx/time-btn.png');
}
.btn-icon .search {
background-image: url('../gfx/search-btn.png');
}
.btn-icon .teamviewer {
background-image: url('../gfx/teamviewer.png');
}
.btn-icon .user {
background-image: url('../gfx/user-btn.png');
}
.btn-icon .lock {
background-image: url('../gfx/lock-btn.png');
}
.btn-icon .unlock {
background-image: url('../gfx/unlock-btn.png');
}
.btn-icon .gear {
background-image: url('../gfx/gear-btn.png');
}
.btn-icon .newdata {
background-image: url('../gfx/newdata-btn2.png');
}
.btn-icon .menu {
background-image: url('../gfx/menu-btn.png');
}
.btn-icon .maillock {
background-image: url('../gfx/mail-lock-btn.png');
}
.btn-icon .mail {
background-image: url('../gfx/mail-btn.png');
}
.btn-icon .plus {
background-image: url('../gfx/plus-btn.png');
}
.btn-icon .eye-open {
background-image: url('../gfx/eye-open-btn.png');
}
.btn-icon .eye-close {
background-image: url('../gfx/eye-close-btn.png');
}
.btn-icon .folder {
background-image: url('../gfx/folder-btn.png');
}
.btn-icon .searchfolder {
background-image: url('../gfx/searchfolder-btn.png');
}
.btn-icon .opt-menu {
background-image: url('../gfx/opt-menu-btn.png');
}
.btn-icon .save {
background-image: url('../gfx/save-btn.png');
}
.btn-icon .list {
background-image: url('../gfx/list-btn.png');
}
.btn-icon .btn-text {
/* Text neben einem Button-Icon */
display: inline-block;
margin-right: 3px;
margin-left: 3px;
}
.btnc .btn-text {
/* Standard: Wenn Text zu lang, diesen umbrechen */
white-space: normal;
}
.btnc .btn-text.elli {
/* Wenn Text zu lang, diesen mit ... kürzen */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Breite des Textbereichs anpassen */
.btnc .btn-text {
width: calc(100% - 17px);
}
.btnc .icon-sm+.btn-text {
width: calc(100% - 23px);
}
.btnc .icon-md+.btn-text {
width: calc(100% - 33px);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Schalterleiste ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.btn-line-grp {
width: 100%;
}
.btn-line-itm {
padding: 4px 12px;
border: 1px solid #cccccc;
border-right-width: 0px;
color: #999999;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
}
.btn-line-grp .btn-line-itm:first-child {
border-radius: 5px 0 0 5px;
}
.btn-line-grp .btn-line-itm:last-child {
border-radius: 0 5px 5px 0;
border-right-width: 1px;
}
.btn-line-itm:hover {
background-position: 0 -30px;
}
.btn-line-itm.sel {
color: #5BA2DA;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Schalterblock ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.btn-block-grp {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.btn-block-itm {
padding: 4px 12px;
border: 1px solid #cccccc;
border-top-width: 0px;
border-left-width: 0px;
width: 25%;
color: #999999;
overflow: hidden;
text-overflow: ellipsis;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
}
.btn-block-itm:first-child,
.btn-block-itm:nth-child(5),
.btn-block-itm:nth-child(9),
.btn-block-itm:nth-child(13),
.btn-block-itm:nth-child(17),
.btn-block-itm:nth-child(21) {
border-left-width: 1px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.btn-block-itm:nth-child(4),
.btn-block-itm:nth-child(8),
.btn-block-itm:nth-child(12),
.btn-block-itm:nth-child(16),
.btn-block-itm:nth-child(20),
.btn-block-itm:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.btn-block-itm:first-child,
.btn-block-itm:nth-child(2),
.btn-block-itm:nth-child(3),
.btn-block-itm:nth-child(4) {
border-top-width: 1px;
}
.btn-block-itm.sel {
color: rgba(91, 162, 218, 0.7);
}
.btn-block-itm:hover {
color: #5BA2DA;
font-weight: bold;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.btn-tile {
min-width: 100%;
font-size: 30px;
border-radius: 0px !important;
margin-left: 0px !important;
}
/* Im Mobilfall den Button auf volle Breite */
.btnc.mob-full {
width: 100%;
margin: 5px 0px;
}
/* Im Mobilfall den Button auf volle Breite beim Hover */
.btnc.mob-full:hover {
margin: 10px 0px 0px 0px;
}
/* Text neben einem Button-Icon im Mobilfall verschwinden lassen */
.btn-icon .btn-text.invi-mob {
display: none;
}
/* Schalter der Schalterleiste und des Schalterblocks anpassen -> Größer */
.btn-line-itm:hover,
.btn-block-itm:hover {
background-color: #e6e6e6;
}
.btn-line-itm,
.btn-block-itm {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.btn-block-itm {
width: 33.33%;
border-radius: 0 !important;
}
.btn-block-itm:nth-child(5),
.btn-block-itm:nth-child(9),
.btn-block-itm:nth-child(13),
.btn-block-itm:nth-child(17),
.btn-block-itm:nth-child(21) {
border-left-width: 0px;
}
.btn-block-itm:nth-child(4) {
border-top-width: 0px;
}
.btn-block-itm:first-child,
.btn-block-itm:nth-child(4),
.btn-block-itm:nth-child(7),
.btn-block-itm:nth-child(10),
.btn-block-itm:nth-child(13),
.btn-block-itm:nth-child(16),
.btn-block-itm:nth-child(19),
.btn-block-itm:nth-child(22) {
border-left-width: 1px;
}
.btnc.sma-full {
/* Im Smartphonefall den Button auf volle Breite */
width: 100%;
margin: 5px 0px;
}
}
@media only screen and (min-width: 671px) and (max-width: 1024px) {
/* Tablet */
.btnc.tab-full {
/* Im Tabletfall den Button auf volle Breite */
width: 100%;
margin: 5px 0px;
}
}
/*********************************************************************************/
/**************************************Linien*************************************/
hr {
/* Horizontale Linie */
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
border-color: gray;
background-color: gray;
color: gray;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Horizontale Trennlinie ~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Linie definieren */
.line-h {
display: block;
width: 100%;
border-color: gray;
color: gray;
}
.line-h:after {
content: ' ';
display: inherit;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
border-color: inherit;
color: inherit;
}
/* Größen definieren */
.line-h.size-xs:after {
width: 50px;
}
.line-h.size-sm:after {
width: 100px;
}
.line-h.size-md:after {
width: 50%;
}
.line-h.size-lg:after {
width: 75%;
}
.line-h.size-xl:after {
width: 90%;
}
/**
* Mobilfall
* mob-invi = Im Mobilfall sichtbar, sonst unsichtbar
* mob-visi = Im Mobilfall unsichtbar, sonst sichtbar
**/
.line-h.mob-invi {}
.line-h.mob-visi {
display: none;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.line-h.mob-invi {
display: none;
}
.line-h.mob-visi {
display: block;
}
}
/*********************************************************************************/
/**************************************Formen*************************************/
[class^=arr-] {
/* Alle "arr-" Klassen als Pfeil darstellen */
border: solid currentColor;
border-width: 0 .1em .1em 0;
display: inline-block;
padding: .15em;
margin-bottom: 5px;
vertical-align: middle;
}
.arr-right {
transform: rotate(-45deg);
}
.arr-left {
transform: rotate(135deg);
}
.arr-up {
transform: rotate(-135deg);
}
.arr-down {
transform: rotate(45deg);
}
/*********************************************************************************/
/***********************************Auto-Logout***********************************/
.auto-logout {
/* Div in dem der Countdaown des Autologouts angezeigt wird */
margin-top: -25px;
}
@media only screen and (max-width: 1024px) {
/* Mobilfall */
.auto-logout {
display: none;
}
}
/*********************************************************************************/
/*********************************** Bienenwaben *********************************/
.comb-grid {
/* Wabengitter */
margin: auto;
display: inline-block;
margin-bottom: 106px;
}
.comb-grid.dimensional {
/* 3D */
transform: perspective(600px) rotateX(60deg);
}
.comb-row {
/* Wabenreihe */
clear: left;
display: flex;
}
.comb-out {
/* Rahmen um eine Wabe herum */
cursor: pointer;
}
.comb-row .comb-out:nth-child(even) {
/* jede zweite Wabe nach unten versetzen */
margin-top: 106px;
}
.comb-out.invi div {
/* unsichtbare Waben */
border-color: transparent;
background: transparent;
color: transparent;
}
.comb-out.invi .left,
.comb-out.invi .right {
border-top-width: 0;
}
.comb-out.invi .middle {
height: 104px;
}
/* Margin oben abziehen, für bspw. Erstenzeile */
.comb-row .comb-out.strip {
margin-top: 0px;
}
.comb-out.invi-mob {
/* Im Handyfall unsichtbar */
}
.comb-out.visi-mob {
/* Nur im Handyfall sichtbar */
display: none !important;
}
.comb {
/* Wabe */
float: left;
margin-right: -52px;
margin-bottom: -100px;
transition: transform 1s;
}
.comb .left {
/* linke Spitze der Wabe */
float: left;
width: 0;
border-right: 60px solid #5BA2DA;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
.comb .middle {
/* Mitte der Wabe */
float: left;
width: 120px;
height: 208px;
background: #5BA2DA;
}
.comb .right {
/* rechte Spitze der Wabe */
float: left;
width: 0;
border-left: 60px solid #5BA2DA;
border-top: 104px solid transparent;
border-bottom: 104px solid transparent;
}
/* Farbe der Rückseite anpassen */
.comb.active .left {
/* linke Spitze der Wabe - Rückseite */
border-right-color: #398bdd;
transition: border-right-color 0.3s ease-in;
}
.comb.active .middle {
/* Mitte der Wabe - Rückseite */
background: #398bdd;
transition: background 0.3s ease-in;
}
.comb.active .right {
/* rechte Spitze der Wabe - Rückseite */
border-left-color: #398bdd;
transition: border-left-color 0.3s ease-in;
}
/* Hover */
.comb:hover .left {
border-right-color: #87b5da;
}
.comb:hover .middle {
background: #87b5da;
}
.comb:hover .right {
border-left-color: #87b5da;
}
.comb-out.invi .comb:hover .left {
border-right-color: transparent;
}
.comb-out.invi .comb:hover .middle {
background: transparent;
}
.comb-out.invi .comb:hover .right {
border-left-color: transparent;
}
.comb-text {
position: absolute;
width: 180px;
height: 108px;
margin: 50px 30px;
color: white;
font-size: 110%;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
align-items: stretch;
transition: height 0s ease 0.3s;
}
.comb.active .comb-text {
height: 0px;
}
.comb-text-hidden {
position: absolute;
width: 180px;
height: 0px;
margin: 50px 30px;
color: white;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
align-items: stretch;
transform: rotateX(180deg);
transition: height 0s ease 0.3s;
}
.comb.active .comb-text-hidden {
height: 108px;
}
.comb-text-hidden a {
color: white;
text-decoration: underline;
}
.comb-text-hidden a:hover {
opacity: 0.50;
}
.comb.active {
transform: rotateX(180deg);
}
/* **************** Größen **************** */
/* sm - small */
.comb-grid.sm .comb {
margin-right: -26px;
margin-bottom: -50px;
}
.comb-grid.sm .comb .left {
border-right-width: 30px;
border-top-width: 52px;
border-bottom-width: 52px;
}
.comb-grid.sm .comb .middle {
width: 60px;
height: 104px;
}
.comb-grid.sm .comb .right {
border-left-width: 30px;
border-top-width: 52px;
border-bottom-width: 52px;
}
.comb-grid.sm .comb-out:nth-child(even) {
margin-top: 53px;
}
/* lg - large */
.comb-grid.lg .comb {
margin-right: -78px;
margin-bottom: -150px;
}
.comb-grid.lg .comb .left {
border-right-width: 90px;
border-top-width: 156px;
border-bottom-width: 156px;
}
.comb-grid.lg .comb .middle {
width: 180px;
height: 312px;
}
.comb-grid.lg .comb .right {
border-left-width: 90px;
border-top-width: 156px;
border-bottom-width: 156px;
}
.comb-grid.lg .comb-out:nth-child(even) {
margin-top: 159px;
}
@media only screen and (min-width: 672px) and (max-width: 1024px) {
/* Tablet */
.comb-grid {
margin-bottom: 53px;
}
.comb {
margin-right: -26px !important;
margin-bottom: -50px !important;
}
.comb .left {
border-right-width: 30px !important;
border-top-width: 52px !important;
border-bottom-width: 52px !important;
}
.comb .middle {
width: 60px !important;
height: 104px !important;
}
.comb .right {
border-left-width: 30px !important;
border-top-width: 52px !important;
border-bottom-width: 52px !important;
}
.comb-text {
height: 74px !important;
width: 90px !important;
margin: 15px 15px !important;
}
.comb-row .comb-out:nth-child(even) {
margin-top: 53px !important;
}
.comb-out.invi .left,
.comb-out.invi .right {
border-top-width: 0 !important;
}
.comb-out.invi .middle {
height: 52px !important;
}
.comb-row .comb-out.strip {
margin-top: 0px !important;
}
.comb-text-hidden {
height: 0px !important;
min-height: 0px !important;
}
.comb.active .comb-text-hidden {
height: auto !important;
min-height: 104px !important;
margin: 0;
padding: 20px;
width: 30%;
z-index: 2;
background-color: #eaeaea;
color: #333333;
opacity: 0.9;
transform: none;
/* Schatten */
box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.6);
}
.comb.active .comb-text {
height: 0px;
}
.comb.active {
transform: none;
}
}
@media only screen and (max-width: 671px) {
/* Handy */
.comb-grid {
margin-bottom: 0px;
}
.comb-row {
display: block !important;
}
.comb-out {
width: 100% !important;
}
.comb {
float: none !important;
/* IE Fallback */
float: initial !important;
display: inline-block !important;
margin: auto !important;
}
.comb-row .comb-out:nth-child(even) {
margin-top: 0 !important;
}
.comb-out.invi,
.comb-out.invi-mob {
display: none !important;
}
.comb-out.visi-mob {
display: block !important;
}
}
/*********************************************************************************/
/********************************** Flyer Boxen **********************************/
/* Flyerbox */
.flyer {
background-color: #eaeaea;
text-align: center;
width: 300px;
box-shadow: 0px 0px 4px #BDBDBD;
margin: 40px 10px 10px 10px;
}
/* Bereich - Überschrift */
.flyer .fly-label {
display: block;
height: 80px;
width: 100%;
font-size: 1.5em;
font-weight: bold;
padding: 15px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Überschrift zentrieren */
.flyer .fly-label>div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Grafik */
.flyer .fly-graphic {
display: block;
height: 600px;
background-image: url('./gfx/kein_Bild_vorhanden.jpg');
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
/* Trennlinie nach Grafik */
.flyer .fly-graphic:after {
display: block;
content: " ";
height: 7.5px;
width: 90%;
margin: 0 5%;
}
/* Bereich nach Grafik - Links */
.flyer .fly-end {
display: block;
padding-top: 7.5px;
padding-bottom: 7.5px;
}
/* alle Links */
.flyer a {
display: block;
height: 100%;
width: 100%;
}
@media only screen and (max-width: 671px) {
/* Handy */
.flyer {
width: 100%;
margin: 10px;
}
}
/*********************************************************************************/
/********************************* Beispiel Boxen ********************************/
/* Box mit zwei Zeilen */
.box-eg-c {
display: block;
background-color: rgb(250, 250, 250);
color: rgb(23, 23, 23);
border: 1px solid #e3e3e3;
}
/* Label */
.box-eg-c::before {
display: block;
content: "Beispiel";
background-color: rgb(242, 242, 242);
padding: 8px 16px;
border-bottom: 1px solid #e3e3e3;
}
.box-eg-c>div {
overflow-y: auto;
white-space: nowrap;
}
.box-eg-c>div>div {
padding: 16px 16px 0px 16px;
}
/* Result */
.box-eg-c>div>div:last-of-type {
color: #008000;
padding-bottom: 16px;
}
/* Box mit einer Zeile */
.box-eg-o {
display: block;
background-color: rgb(250, 250, 250);
color: rgb(23, 23, 23);
border: 1px solid #e3e3e3;
}
/* Label */
.box-eg-o::before {
display: block;
content: "Beispiel";
background-color: rgb(242, 242, 242);
padding: 8px 16px;
border-bottom: 1px solid #e3e3e3;
}
.box-eg-o>div {
overflow-y: auto;
white-space: nowrap;
}
.box-eg-o>div>div {
padding: 16px 16px 0px 16px;
}
/* Result */
.box-eg-o>div>div:last-of-type {
padding-bottom: 16px;
}
.codebox::before {
display: block;
content: "Code-Beispiel";
background-color: rgb(242, 242, 242);
padding: 8px 16px;
border-bottom: 1px solid #e3e3e3;
}
.codebox[codebox-heading]::before {
content: attr(codebox-heading);
}
.codebox {
display: block;
padding: 0;
font-size: unset;
font-family: unset;
border: 1px solid #e3e3e3;
background-color: rgb(250, 250, 250);
}
.codebox>* {
font-family: 'Courier New', Courier, monospace !important;
}
.codebox .codebox-comment {
color: #008000 !important;
}
/* Größerer Schalter, durch größere Linien / Bars */
.navbar-toggle .icon-bar {
margin: 5px 0 5px 0;
width: 38px !important;
height: 4px !important;
}
/*********************************************************************************/
/* Flipcard container. */
.flip-card {
background-color: transparent;
width: 25rem;
height: 25rem;
/* border: 1px solid #f1f1f1; */
perspective: 400px;
/* 3D Effekt. Kann entfernt werden wenn ungewünscht */
}
/* Positionierung von front- und backside wrapper */
.flip-card-wrapper {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/* Horizontaler "Flip" Animation bei Maushover oder Mausklick */
.flip-card:hover .flip-card-wrapper,
.flip-card:active .flip-card-wrapper {
transform: rotateY(180deg);
}
/* Positionierung von front- und back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
/* Safari */
backface-visibility: hidden;
}
/* Style front side */
.flip-card-front {
background-color: #00688B;
color: #fff;
}
/* Style back side */
.flip-card-back {
background-color: #00688B;
color: #fff;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
}
/* Style back side text*/
.flip-card-back p {
margin: 1rem;
}
.fileupload {
padding-left: 0 !important;
padding-right: 0 !important;
}
.fileupload .searchfield {
margin-left: -3px !important;
text-align: center !important;
}
.fileupload .searchfield:hover {
cursor: not-allowed !important;
}
@media only screen and (min-width: 768px) {
.fileupload .searchfield {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.fileupload .searchbtn {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
input.fileupload.searchfield {
height: 30px !important;
}