/*#############################################################################################################################*/
/*############################################# Schriftarten ##################################################################*/
/*#############################################################################################################################*/

@font-face { font-family: "stiebel-icons"; src: url("../fonts/stiebel-icons.eot"); src: url("../fonts/stiebel-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/stiebel-icons.ttf") format("truetype"), url("../fonts/stiebel-icons.svg#stiebel-icons") format("svg"), url("../fonts/stiebel-icons.woff") format("woff"); rel: 'preload'; font-display: swap;}
@font-face { font-family: "stiebel-enev"; src: url("../fonts/stiebel-enev.otf"); rel: 'preload'; rel: 'preload'; font-display: swap;}
@font-face { font-family: 'stiebel-enev-icons'; src: url('../fonts/stiebel-enev.otf') format('truetype'); rel: 'preload'; font-display: swap;}
@font-face { font-family: 'google_icons'; src: url('../fonts/Material-Icons-Outlined_v134.woff2') format('woff2'); rel: 'preload'; font-display: swap;}
@font-face { font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; src: url('../fonts/Material-Icons-Outlined_v134.woff2') format('woff2'); rel: 'preload'; font-display: swap;}
@font-face { font-family: 'icons_social_media';  src: url(../fonts/Social_Shapes.woff2) format('woff2'); font-display: swap; rel: 'preload'; }

/*#############################################################################################################################*/
/*################################################ Icons ######################################################################*/
/*#############################################################################################################################*/

/* URL mit neusten Gogle Fonts gibts hier: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,0 >> Da steht dann die URL zur *.woff2-Datei drin >> Diese URL dann bei 'google icons' und 'Material icons' in Zeile 8/9 ersetzen*/
/* Auf der Google-Icons-Seite Strichstärke usw. wählen und dann URL rauskopieren (Static Font), URL aufrufen und dann steht dort die Adresse zum Download der WOFF2-Datei (vom eigenen Braunschweig-Server nehmen nicht live von Google ziehen (Datenschutz) ) */
/* In der WOFF2-Datei dann noch Version hochsetzen */

.ste_icon_waermequelle:before {font-family: "stiebel-icons"; content: "\E052"; font-style: normal; display: block;}
.ste_icon_waermequelle_luft:before {font-family: "google_icons"; content: "air"; font-style: normal; display: block;}
.ste_icon_waermequelle_erdreich:before {font-family: "google_icons"; content: "landscape"; font-style: normal; display: block;}
.ste_icon_waermequelle_wasser:before {font-family: "google_icons"; content: "water"; font-style: normal; display: block;}
.ste_icon_waermepumpe:before {font-family: "stiebel-enev"; content: "\004E"; font-style: normal; display: block;}
.ste_icon_waermepumpe_hybrid:before {font-family: "stiebel-enev"; content: "\0046"; font-style: normal; display: block;}
.ste_icon_puffer:before {font-family: "stiebel-icons"; content: "\e004"; font-style: normal; display: block;}
.ste_icon_radiator:before {font-family: "stiebel-icons"; content: "\E00D";font-style: normal; display: block;}
.ste_icon_fbh:before {font-family: "stiebel-enev"; content: "\0073";font-style: normal; display: block;}
.ste_icon_fbh_radiator:before {font-family: "stiebel-enev"; content: "\007A";font-style: normal; display: block;}
.ste_icon_warmwasser:before {font-family: "stiebel-icons"; content: "\e02e";font-style: normal; display: block;}
.ste_icon_lueftung:before {font-family: "google_icons"; content: "mode_fan";font-style: normal; display: block;}
.ste_icon_kuehlung:before{font-family: "google_icons"; content:"mode_cool";font-style: normal; display: block;}
.ste_icon_solar:before {font-family: "google_icons"; content: "sunny";font-style: normal; display: block;}
.ste_icon_solaranlage:before {font-family: "google_icons"; content: "solar_power";font-style: normal; display: block;}
.ste_icon_wallbox:before {font-family: "google_icons"; content: "ev_station";font-style: normal; display: block;}
.ste_icon_kompass:before {font-family: "google_icons"; content: "explore";font-style: normal; display: block;}
.ste_icon_heizlast:before {font-family: "stiebel-icons"; content: "\E043";font-style: normal; display: block;}
.ste_icon_installation:before{font-family: "google_icons"; content:"plumbing"; font-style: normal; display: block;}
.ste_icon_haus:before {font-family: "stiebel-icons"; content: "\E008";font-style: normal; display: block;}
.ste_icon_schall:before {font-family: "google_icons"; content: "hearing"; font-style: normal; display: block;}
.ste_icon_dhe:before {font-family: "stiebel-enev"; content: "\0047"; font-style: normal; display: block;}
.ste_icon_wwk:before {font-family: "stiebel-enev"; content: "\0049"; font-style: normal; display: block;}
.ste_icon_suchen:before {font-family: "google_icons"; content: "search"; font-style: normal; display: block;}
.ste_icon_elektro:before {font-family: "google_icons"; content: "flash_on"; font-style: normal; display: block;}
.ste_icon_elektro_a:before {font-family: "google_icons"; content: "flash_auto"; font-style: normal; display: block;}
.ste_icon_stecker:before {font-family: "stiebel-icons"; content: "\E048"; font-style: normal; display: block;}
.ste_icon_regelung:before {font-family: "google_icons"; content: "touch_app"; font-style: normal; display: block;}
.ste_icon_zirkulation:before {font-family: "stiebel-enev"; content: "\0079";font-style: normal; display: block;}
.ste_icon_gruppenversorgung:before {font-family: "stiebel-enev"; content: "\006D";font-style: normal; display: block;}
.ste_icon_warmwasser_plus:before {font-family: "stiebel-icons"; content: "\E027";font-style: normal; display: block;}
.ste_icon_warmwasser_normal:before {font-family: "stiebel-icons"; content: "\E047";font-style: normal; display: block;}
.ste_icon_temperatur:before {font-family: "stiebel-icons"; content: "\E025";font-style: normal; display: block;}
.ste_icon_info:before {font-family: "google_icons"; content: "info"; font-style: normal; display: block;}
.ste_icon_eco_mode:before {font-family: "google_icons"; content: "eco"; font-style: normal; display: block;}
.ste_icon_liste:before {font-family: "google_icons"; content: "storage"; font-style: normal; display: block;}
.ste_icon_liste_nummer:before {font-family: "google_icons"; content: "checklist"; font-style: normal; display: block;}
.ste_icon_liste_bullet:before {font-family: "google_icons"; content: "format_list_bulleted"; font-style: normal; display: block;}
.ste_icon_liste_edit:before {font-family: "google_icons"; content: "edit_note"; font-style: normal; display: block;}
.ste_icon_hilfe:before {font-family: "google_icons"; content: "live_help"; font-style: normal; display: block;}
.ste_icon_hilfe_2:before {font-family: "google_icons"; content: "help"; font-style: normal; display: block;}
.ste_icon_katalog:before {font-family: "google_icons"; content: "auto_stories"; font-style: normal; display: block;}
.ste_icon_euro:before {font-family: "google_icons"; content: "euro_symbol"; font-style: normal; display: block;}
.ste_icon_pfund:before {font-family: "google_icons"; content: "currency_pound"; font-style: normal; display: block;}
.ste_icon_dollar:before {font-family: "google_icons"; content: "attach_money"; font-style: normal; display: block;}
.ste_icon_yen:before {font-family: "google_icons"; content: "currency_yen"; font-style: normal; display: block;}
.ste_icon_lineal:before {font-family: "google_icons"; content: "straighten"; font-style: normal; display: block;}
.ste_icon_video:before {font-family: "google_icons"; content: "ondemand_video"; font-style: normal; display: block;}
.ste_icon_energielabel:before {font-family: "google_icons"; content: "label"; font-style: normal; display: block;}
.ste_icon_verteilsystem:before {font-family: "google_icons"; content: "swap_calls"; font-style: normal; display: block;}
.ste_icon_wohnflaeche:before {font-family: "stiebel-icons"; content: "\E021";font-style: normal; display: block;}
.ste_icon_abstand:before {font-family: "google_icons"; content: "settings_ethernet"; font-style: normal; display: block;}
.ste_icon_foto:before {font-family: "google_icons"; content: "photo"; font-style: normal; display: block;}
.ste_icon_auge:before {font-family: "google_icons"; content: "remove_red_eye"; font-style: normal; display: block;}
.ste_icon_chart:before {font-family: "google_icons"; content: "timeline"; font-style: normal; display: block;}
.ste_icon_text:before {font-family: "google_icons"; content: "border_color"; font-style: normal; display: block;}
.ste_icon_wand:before {font-family: "google_icons"; content: "border_right"; font-style: normal; display: block;}
.ste_icon_mehr:before {font-family: "google_icons"; content: "more_horiz"; font-style: normal; display: block;}
.ste_icon_top:before {font-family: "google_icons"; content: "border_top"; font-style: normal; display: block;}
.ste_icon_boden:before {font-family: "google_icons"; content: "border_bottom"; font-style: normal; display: block;}
.ste_icon_3d:before {font-family: "google_icons"; content: "3d_rotation"; font-style: normal; display: block;}
.ste_icon_zertifikat:before {font-family: "google_icons"; content: "verified_user"; font-style: normal; display: block;}
.ste_icon_checkliste:before {font-family: "google_icons"; content: "playlist_add_check"; font-style: normal; display: block;}
.ste_icon_pflaster:before {font-family: "google_icons"; content: "healing"; font-style: normal; display: block;}
.ste_icon_internet:before {font-family: "google_icons"; content: "public"; font-style: normal; display: block;}
.ste_icon_filter:before{font-family: "google_icons"; content: "filter_list"; font-style: normal; display: block;}
.ste_icon_search:before{font-family: "google_icons"; content: "search"; font-style: normal; display: block;}
.ste_icon_schloss:before{font-family: "google_icons"; content: "lock"; font-style: normal; display: block;}
.ste_icon_flamme:before {font-family: "stiebel-icons"; content: "\E03B";font-style: normal; display: block;}
.ste_icon_pool:before {font-family: "google_icons"; content: "pool";font-style: normal; display: block;}
.ste_icon_daemmstandard:before{font-family: "stiebel-icons"; content: "\E002";font-style: normal; display: block;}
.ste_icon_daemmung:before{font-family: "stiebel-enev"; content: "\0071";font-style: normal; display: block;}
.ste_icon_personen:before{font-family: "google_icons";content:"family_restroom";font-style: normal; display: block;}
.ste_icon_anzahl:before{font-family: "google_icons"; content: "loupe"; font-style: normal; display: block;}
.ste_icon_auslass:before{font-family: "google_icons"; content: "keyboard_tab"; font-style: normal; display: block;}
.ste_icon_performance:before{font-family: "google_icons"; content: "network_check"; font-style: normal; display: block;}
.ste_icon_volume_off:before{font-family: "google_icons"; content: "volume_off"; font-style: normal; display: block;}
.ste_icon_nacht:before{font-family: "google_icons"; content: "nights_stay"; font-style: normal; display: block;}
.ste_icon_natur:before{font-family: "google_icons"; content: "nature_people"; font-style: normal; display: block;}
.ste_icon_ohr:before{font-family: "google_icons"; content: "hearing"; font-style: normal; display: block;}
.ste_icon_projektdaten:before{font-family: "google_icons"; content: "person_add"; font-style: normal; display: block;}
.ste_icon_keyboard:before {font-family: "google_icons"; content: "keyboard"; font-style: normal; display: block;}
.ste_icon_geodreieck:before {font-family: "google_icons"; content: "square_foot"; font-style: normal; display: block;}
.ste_icon_standort:before {font-family: "google_icons"; content: "distance";font-style: normal; display: block;}
.ste_icon_schirm:before {font-family: "google_icons"; content: "beach_access"; font-style: normal; display: block;}
.ste_icon_fortluft:before{font-family: "google_icons"; content:"\E8D4"; font-style: normal; display: block;}
.ste_icon_wrg:before{font-family: "google_icons"; content:"\E043"; font-style: normal; display: block;}
.ste_icon_efh:before{font-family: "stiebel-enev"; content:"\0043"; font-style: normal; display: block;}
.ste_icon_mfh:before{font-family: "stiebel-enev"; content:"\0044"; font-style: normal; display: block;}
.ste_icon_nwg:before{font-family: "google_icons"; content:"other_houses"; font-style: normal; display: block;}
.ste_icon_werkzeug:before{font-family: "google_icons"; content:"build"; font-style: normal; display: block;}
.ste_icon_loeschen:before{font-family: "google_icons"; content:"delete"; font-style: normal; display: block;}
.ste_icon_cloud_upload:before{font-family: "google_icons"; content:"cloud_upload"; font-style: normal; display: block;}
.ste_icon_cloud_download:before{font-family: "google_icons"; content:"cloud_download"; font-style: normal; display: block;}
.ste_icon_tools:before{font-family: "google_icons"; content:"apps"; font-style: normal; display: block;}
.ste_icon_neubau:before {font-family: "stiebel-icons"; content: "\E042";font-style: normal; display: block;}
.ste_icon_sanierung:before {font-family: "stiebel-icons"; content: "\E036";font-style: normal; display: block;}
.ste_icon_schulung:before{font-family: "google_icons"; content:"school"; font-style: normal; display: block;}
.ste_icon_geld:before {font-family: "stiebel-icons"; content: "\E016"; font-style: normal; display: block;}
.ste_icon_faq:before{font-family: "google_icons"; content:"tips_and_updates"; font-style: normal; display: block;}
.ste_icon_zubehoer:before{font-family: "google_icons"; content:"post_add"; font-style: normal; display: block;}
.ste_icon_tonhaltigkeit:before{font-family: "google_icons"; content:"music_note"; font-style: normal; display: block;}
.ste_icon_einkaufswagen:before{font-family: "google_icons"; content:"shopping_cart"; font-style: normal; display: block;}
.ste_icon_zange:before{font-family: "google_icons"; content:"plumbing"; font-style: normal; display: block;}
.ste_icon_netzkabel:before{font-family: "google_icons"; content:"electrical_services"; font-style: normal; display: block;}
.ste_icon_stueckliste:before{font-family: "google_icons"; content:"receipt_long"; font-style: normal; display: block;}
.ste_icon_geschenk:before{font-family: "google_icons"; content:"card_giftcard"; font-style: normal; display: block;}
.ste_icon_raumeinstellung:before{font-family: "google_icons"; content:"room_preferences"; font-style: normal; display: block;}
.ste_icon_handwerker:before{font-family: "google_icons"; content:"engineering"; font-style: normal; display: block;}
.ste_icon_betreuung:before{font-family: "google_icons"; content:"supervisor_account"; font-style: normal; display: block;}
.ste_icon_uhr:before{font-family: "google_icons"; content:"schedule"; font-style: normal; display: block;}
.ste_icon_planung:before{font-family: "google_icons"; content:"design_services"; font-style: normal; display: block;}
.ste_icon_ordner:before{font-family: "google_icons"; content:"folder_open"; font-style: normal; display: block;}
.ste_icon_ordner_erstellen:before{font-family: "google_icons"; content:"create_new_folder"; font-style: normal; display: block;}
.ste_icon_bueroklammer:before{font-family: "google_icons"; content:"attach_file"; font-style: normal; display: block;}
.ste_icon_drucker:before{font-family: "google_icons"; content:"print"; font-style: normal; display: block;}
.ste_icon_pfeil_runter:before{font-family: "stiebel-icons"; content:"\E04A"; font-style: normal; display: block;}
.ste_icon_pfeil_hoch:before{font-family: "stiebel-icons"; content:"\E049"; font-style: normal; display: block;}
.ste_icon_pfeil_zurueck:before{font-family: "google_icons"; content:"arrow_back_ios"; font-style: normal; display: block;}
.ste_icon_pfeil_vorwaerts:before{font-family: "google_icons"; content:"arrow_forward_ios"; font-style: normal; display: block;}
.ste_icon_werbekampagne:before{font-family: "google_icons"; content:"campaign"; font-style: normal; display: block;}
.ste_icon_gebäudeschnitt:before{font-family: "google_icons"; content:"house_siding"; font-style: normal; display: block;}
.ste_icon_tuer:before{font-family: "google_icons"; content:"meeting_room"; font-style: normal; display: block;}
.ste_icon_dach:before{font-family: "google_icons"; content:"roofing"; font-style: normal; display: block;}
.ste_icon_fenster:before{font-family: "google_icons"; content:"window"; font-style: normal; display: block;}
.ste_icon_sparschwein:before{font-family: "google_icons"; content:"savings"; font-style: normal; display: block;}
.ste_icon_nachtspeicher:before{font-family: "google_icons"; content:"heat_pump_balance"; font-style: normal; display: block;}
.ste_icon_wasserglas:before{font-family: "google_icons"; content:"local_drink"; font-style: normal; display: block;}
.ste_icon_toolbox:before{font-family: "google_icons"; content:"construction"; font-style: normal; display: block;}
.ste_icon_webinar:before{font-family: "google_icons"; content:"cast_for_education"; font-style: normal; display: block;}
.ste_icon_dusche:before{font-family: "google_icons"; content:"shower"; font-style: normal; display: block;}
.ste_icon_hochhaus:before{font-family: "google_icons"; content:"domain"; font-style: normal; display: block;}
.ste_icon_mitarbeiter:before{font-family: "google_icons"; content:"badge"; font-style: normal; display: block;}
.ste_icon_cancel:before{font-family: "google_icons"; content:"clear"; font-style: normal; display: block;}
.ste_icon_kalender:before{font-family: "google_icons"; content:"today"; font-style: normal; display: block;}
.ste_icon_sitz:before {font-family: "google_icons"; content: "event_seat"; font-style: normal; display: block;}
.ste_icon_angebot:before{font-family: "google_icons"; content:"local_offer"; font-style: normal; display: block;}
.ste_icon_stift:before{font-family: "google_icons"; content:"edit"; font-style: normal; display: block;}
.ste_icon_checkbox_active:before{font-family: "google_icons"; content:"check_box"; font-style: normal; display: block;}
.ste_icon_checkbox_inactive:before{font-family: "google_icons"; content:"check_box_outline_blank"; font-style: normal; display: block;}
.ste_icon_gluehbirne:before{font-family: "google_icons"; content:"online_prediction"; font-style: normal; display: block;}
.ste_icon_auswahl:before{font-family: "google_icons"; content:"check_circle"; font-style: normal; display: block;}
.ste_icon_baujahr:before{font-family: "stiebel-icons"; content:"\E001"; font-style: normal; display: block;}
.ste_icon_kabel:before{font-family: "google_icons"; content:"cable"; font-style: normal; display: block;}
.ste_icon_gas:before{font-family: "stiebel-enev"; content:"\0074"; font-style: normal; display: block;}
.ste_icon_oel:before{font-family: "stiebel-enev"; content:"\0078"; font-style: normal; display: block;}
.ste_icon_fernwaerme:before{font-family: "stiebel-enev"; content:"\006D"; font-style: normal; display: block;}
.ste_icon_badewanne:before{font-family: "google_icons"; content:"bathtub"; font-style: normal; display: block;}
.ste_icon_onfloor:before{font-family: "google_icons"; content:"vertical_align_bottom"; font-style: normal; display: block;}
.ste_icon_infloor:before{font-family: "google_icons"; content:"expand"; font-style: normal; display: block;}
.ste_icon_call_center:before{font-family: "google_icons"; content:"support_agent"; font-style: normal; display: block;}
.ste_icon_kontakt:before{font-family: "google_icons"; content:"contact_mail"; font-style: normal; display: block;}
.ste_icon_rettungsring:before{font-family: "google_icons"; content:"support"; font-style: normal; display: block;}
.ste_icon_menue:before{font-family: "google_icons"; content:"menu"; font-style: normal; display: block;}
.ste_icon_diagramm:before{font-family: "google_icons"; content:"insights"; font-style: normal; display: block;}
.ste_icon_waschbecken:before{font-family: "google_icons"; content:"wash"; font-style: normal; display: block;}
.ste_icon_couch:before{font-family: "google_icons"; content:"weekend"; font-style: normal; display: block;}
.ste_icon_alter_heizung:before{font-family: "stiebel-icons";content:"\E022";font-style: normal; display: block;}
.ste_icon_wohnungsstation:before{font-family: "google_icons"; content:"schema"; font-style: normal; display: block;}
.ste_icon_person_plus:before{font-family: "google_icons"; content: "group_add"; font-style: normal; display: block;}
.ste_icon_person_gruppe:before{font-family: "google_icons"; content: "groups"; font-style: normal; display: block;}
.ste_icon_co2:before{font-family: "google_icons"; content: "co2"; font-style: normal; display: block;}
.ste_icon_send:before{font-family: "google_icons"; content: "schedule_send"; font-style: normal; display: block;}
.ste_icon_speed:before {font-family: "google_icons"; content: "speed"; font-style: normal; display: block;}
.ste_icon_hoehe:before {font-family: "google_icons"; content: "height"; font-style: normal; display: block;}
.ste_icon_wartung:before {font-family: "google_icons"; content: "published_with_changes"; font-style: normal; display: block;}
.ste_icon_lkw:before {font-family: "google_icons"; content: "local_shipping"; font-style: normal; display: block;}
.ste_icon_werkzeugkiste:before {font-family: "google_icons"; content: "home_repair_service"; font-style: normal; display: block;}
.ste_icon_laden:before {font-family: "google_icons"; content: "store"; font-style: normal; display: block;}
.ste_icon_mail:before {font-family: "google_icons"; content: "mail"; font-style: normal; display: block;}
.ste_icon_admin:before {font-family: "google_icons"; content: "admin_panel_settings"; font-style: normal; display: block;}
.ste_icon_flugzeug:before {font-family: "google_icons"; content: "flight_takeoff"; font-style: normal; display: block;}
.ste_icon_tanken:before {font-family: "google_icons"; content: "local_gas_station"; font-style: normal; display: block;}
.ste_icon_baum:before {font-family: "google_icons"; content: "nature"; font-style: normal; display: block;}
.ste_icon_blitz:before {font-family: "google_icons"; content: "bolt"; font-style: normal; display: block;}
.ste_icon_austausch:before {font-family: "google_icons"; content: "cycle"; font-style: normal; display: block;}
.ste_icon_home_2:before {font-family: "google_icons"; content: "in_home_mode"; font-style: normal; display: block;}
.ste_icon_home_3:before {font-family: "google_icons"; content: "real_estate_agent"; font-style: normal; display: block;}

.material-icons {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
    cursor: pointer;
}

/* Dropdown-Liste Google Maps Autocomplete */
.pac-container{
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    background-color: white;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 30%);
}

.pac-item {
    padding: 0px 15px;
}

.pac-item:hover {
    background-color: #efefef;
}

.pac-icon{
    display:none;
}

/*#############################################################################################################################*/
/*############################################### Allgemein ###################################################################*/
/*#############################################################################################################################*/

html {
    font-size: 62.5%;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    padding: 0;
    margin: 0 auto;
    -webkit-tap-highlight-color: transparent;
    overflow-y:scroll;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    margin: 0 auto;
    font-size: 16px;
    line-height: 20px;
    color: black;
    background-color: #efefef;
    overflow-x: hidden;
    min-width: 320px;
}

.main-content {
	width: calc(100% - 70px);
    margin: 0 auto;
    min-height: 100vh;
    padding: 200px 50px;
    float: left;
    margin-left: 70px;
}

.module {
    margin-bottom: 10px;
    position: relative;
}

.container {
    width: 100%;
    max-width: 1920px;  /* 1920x1080 Beliebteste Bildschirmbreite im Jahr 2021 */
    margin-left: auto;
    margin-right: auto;
    float: left;
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.kachel_toolbox {
	display: inline-block; 
	animation: 0.8s fadeIn;
}

.kachel_toolbox_white {
	display: inline-block; 
	animation: 0.8s fadeIn;
	border-radius: 3px;
}

.rahmen_block_eingabe {
    width: 100%;
    float: left;
    margin-bottom: 40px;
	position: relative;
}

.block_eingabe_breite_100 {
    width: 100%;
    float: left;
    position: relative;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 30px;
    padding-bottom: 10px;
}

.block_eingabe_links {
    width: 50%;
    float: left;
    position: relative;
    padding-left: 4%;
    padding-right: 2%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.block_eingabe_rechts {
    width: 50%;
    float: left;
    position: relative;
    padding-left: 2%;
    padding-right: 4%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.button_auswahl_kategorie_rahmen {
	/* width: 100%;
    float: left;
    margin: 30px 0px; */
    float: left;
    width: 100%;
    border-bottom: 1px solid lightgrey;
    margin: 20px 0px;
}

.button_auswahl_kategorie {
	/* float: left;
    display: flex;
    margin: 10px;
    padding: 10px;
    border-bottom: 3px solid transparent;
	cursor: pointer; */

    float: left;
    position: relative;
    margin-right: 10px;
    padding: 20px 10px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.button_auswahl_kategorie_icon {
	font-size: 25px;
    float: left;
}

.button_auswahl_kategorie_label {
	/* font-size: 18px;
    float: left;
    margin-left: 8px; */

    text-transform: uppercase;
    letter-spacing: 1.0px;
    float: left;
    font-size: 13px;
    margin-left: 8px;
}

/* Honeypot als Captcha-Ersatz */
.hpot {
    display: none !important;
}

/*#############################################################################################################################*/
/*############################################ Headlines ######################################################################*/
/*#############################################################################################################################*/

h1 { 
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 124%;
    margin: 0;
}

h2 {
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 130%;
    margin: 0;
}

h3 { 
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 100%;
    margin: 0; 
}

.headline_login_rolle {
    float: left;
    width: 100%;
    font-size: 15px;
    margin-top: -5px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/*#############################################################################################################################*/
/*########################################## Toolbox-Header ###################################################################*/
/*#############################################################################################################################*/

#Header_Logo_Sidebar {
    float: left;
    width: 210px;
    height: 30px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0px 30px;
    text-align: center;
}

#Header_Logo_Mobile {
	text-align: left;
    padding: 13px 0px;
    float: left;
    width: 150px;
    height: 50px;
    cursor: pointer;
}

#Stiebel-Logo {
    max-height: 100%;
	max-width: 100%;
}

#Header_Leiste_Breadcrumb {
    float: left;
	width: calc(100% - 240px);
    overflow: hidden;
}

.header_label_breadcrumb {
	float: left;
    font-size: 21px;
    padding: 15px 6px;
    text-transform: uppercase;
    cursor: pointer;
}

.header_pfeil_breadcrumb {
    float: left;
    margin-top: 13px;
}

#Header_Leiste_Buttons {
    min-width: 150px;
    float: right;
}

.rahmen_icon_zeile_1 {
	float: right;
    padding: 12px 0px 12px 15px;
    cursor: pointer;
}

.header_icon_zeile_1 {
    font-size: 28px !important;
    float: left;
}

#Header_Icon_Warenkorb_Anzahl {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    font-size: 12px;
    top: 0px;
    left: 40px;
    font-weight: bold;
}

#Header_Mobile_Warenkorb_Anzahl {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    font-size: 12px;
    top: 5px;
    left: 30px;
    font-weight: bold;
}

#Container_Header_Navigation {
    padding: 40px 0px 40px 40px;
    right: -1000px;
    top: 5px;
    position: absolute;
    z-index: 99;
    transition: .8s ease;
	max-height: 95vh;
    overflow-y: auto;
}

#Header_Navigation_Close {
    float: left;
    font-size: 40px;
    margin-left: -30px;
    margin-top: -27px;
    cursor: pointer;
}

.Header_Navigation_Spalte {
    width: 250px;
    margin: 0px 20px 0px 20px;
    float: left;
}

.Header_Navigation_Headline {
    width: 100%;
    font-size: 25px;
    float: left;
    margin-bottom: 20px;
    line-height: normal;
}

.Header_Navigation_Item {
    padding: 14px 2px;
    width: 100%;
    float: left;
}

.Header_Navigation_Item_Icon {
    float: left;
    font-size: 20px;
    margin-right: 25px;
    margin-top: -4px;
    cursor: pointer;
}

.Header_Navigation_Item:hover {
    text-decoration: underline;
}

#Header_Toolbox_Zeile_Top {
    position: fixed;
    border-bottom: 1px solid lightgrey;
    top: 0px;
    left: 250px;
    right: 0px;
    z-index: 970;
    height: 80px;
    padding: 5px;
    padding-left: 50px;
    transition: all .4s ease-in-out;
}

#Header_Toolbox_Zeile_Top.hide {
	top: -100px;
}

#Header_Toolbox_Zeile_Top_Mobile {
    position: fixed;
    border-bottom: 1px solid lightgrey;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 970;
    height: 60px;
    padding: 5px;
    /* padding-left: 30px; */
}

.header_toolbox_zeile_top_label {
    float: left;
    font-size: 22px;
    line-height: normal;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    margin-top: 22px;
}

.header_toolbox_zeile_top_pfeil_breadcrumb{
    float: left;
    margin-top: 22px;
    width: 30px;
    text-align: center;
}

#Header_Toolbox_Zeile_Top_Rahmen_Button{
    float: right;
}

.header_toolbox_zeile_button_rahmen{
    float: right;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.header_toolbox_zeile_button_icon{

}

.header_toolbox_zeile_button_label{
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-size: 11px;
    /* font-weight: bold; */
}

#Header_Toolbox_Sidebar {
    display: block;
    width: 250px;
    border-right: 1px solid lightgrey;
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: 970;   /* Nur 'Bitte warten' Modal hat 999 */
    padding: 20px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    /* box-shadow:  3px 0px 15px -5px rgba(0,0,0,.16); */
}

#Header_Toolbox_Sidebar_Block_Buttons_Top {
    float: left;
    height: calc(100% - 100px); 
    overflow-y: auto;
    width: 230px;
}

#Header_Toolbox_Sidebar:hover #Header_Toolbox_Sidebar_Buttons_Expand:hover{
    visibility: visible;
    opacity: 1;
}

#Header_Toolbox_Sidebar_Buttons_Expand {
    opacity: 0;
    position: fixed;
    top: 5px;
    left: 240px;
    border-radius: 50px;
    padding: 4px 6px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    z-index: 970;
    border: 1px solid lightgrey;
}

#Header_Toolbox_Sidebar_Hover_Label {
    position: absolute;
    -moz-border-radius: 10px;
    padding: 5px 7px;
    font-family: 'F2F-Regular';
    font-size: 12px;
    left: 65px;
    height: 30px;
 }
  
 #Header_Toolbox_Sidebar_Hover_Label:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0px;
    border-top: 15px solid transparent;
    border-right: 10px solid;
    border-bottom: 16px solid transparent;
    margin: -5px 0 0 -17px;
 }

#Header_Toolbox_Sidebar_Block_Buttons_Bottom {
    position: absolute;
    bottom: 10px;
    border-top: 1px solid #eaeaea;
    width: calc(100% - 40px);
}
.header_toolbox_sidebar_kachel {
    float: left;
    cursor: pointer;
    width: 100%;
    height: 45px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

.header_toolbox_sidebar_icon {
    font-size: 24px;
    width: 50px;
    float: left;
}

.header_toolbox_sidebar_label {
    width: 200px;
    cursor: pointer;
    font-size: 18px;
    float: left;
    /* font-family: F2F-Regular,Helvetica,Arial,sans-serif; */
}

/*######################################################################################################################*/
/*######################################## Header - Navigationsleiste ##################################################*/
/*######################################################################################################################*/

#Header_Seite_Navigation {
    position: fixed;
    top: 80px;
	min-height: 35px;
    width: calc(100% - 70px);
    max-width: 2025px;
    transition: all .4s ease-in-out;
    z-index: 4;
    margin-left: 70px;
    padding: 15px 50px;
}

#Header_Seite_Navigation.hide {
	top: -100px;
}

.NavLeiste {
    float: left;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    margin-right: 25px;
    padding-bottom: 3px;
}

#NavLeisteSchritt {
    position: relative;
    float: left;
    margin-top: 15px;
}

.nav_leiste_label_ergebnis {
        font-size: 14px;
        float: right;
        margin: 15px 30px;
}

/*######################################################################################################################*/
/*################################################## Toolbox-Menü ######################################################*/
/*######################################################################################################################*/

.header_toolbox_menu_rahmen {
    display: none; 
    position: fixed;
    padding: 20px;
    top: 80px;
    right: 0px;
    z-index: 969;   /* nicht L-Ueberlagern aber Tool uberlagern daher hoechste Tool z-index */
	overflow: auto;
	max-height: calc(100% - 60px);
    box-shadow: 0px 3px 4px 1px gainsboro;
}

#Header_Toolbox_Menu_Block_Suche {
    width: calc(100% - 250px);
}

#Header_Toolbox_Menu_Block_Info_Account {
    width: 500px;  
    text-align: center; 
}

#Header_Toolbox_Menu_Block_Anmeldung{
    width: calc(100% - 250px);
    text-align: center;
}

#Header_Toolbox_Menu_Block_Sprachauswahl {
    width: calc(100% - 250px);
}

.header_toolbox_menu_block_cancel {
    position: absolute;
    top: 5px;
    right: 5px;
}

#Header_Info_Account_Rahmen_Profilbilder {
    margin-left: calc(50% - 75px)
}

#Header_Info_Account_Rahmen_Pic_Profilbild, #Header_Info_Account_Rahmen_Pic_Eigenes_Firmenlogo {
    float: left;
    width: 120px;
    height: 120px;
    border: 1px solid #dfdfdf;
    border-radius: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 15px;
}

#Header_Info_Account_Pic_Profilbild, #Header_Info_Account_Pic_Eigenes_Firmenlogo {
    max-width: 120px;
    max-height: 120px
}

.Header_Leiste_Menu_Rahmen{
    position: relative;
    display: none;
}

.Menu_Apps_Rahmen{
    position: relative;   
    float: left;
    margin: 12px;
    width: 140px;   
    height: 100px;   
	text-align: center;
    cursor: pointer;
}

.Menu_Apps_Name{
	margin-top: 10px;
}

.Icon-Laenderauswahl {
    height: 26px;
    font-size: 35px;
    vertical-align: text-bottom;
    border-radius: 3px;
}

#Header_Profilbild_Angemeldet, #Header_Icon_Profilbild {
    height: 26px;
    width: 26px;
    border-radius: 100%;
    object-fit: cover;
}

#Thumbnail_Profilbild{
	width: 100%;
	height: 100%;
    object-fit: cover;
 }

.Hover_Button_Profilbild {
    display: none !important;
    font-weight: bolder;
    font-size: 18px !important;
}

.Wrapper_Profilbild:hover .Hover_Button_Profilbild {
  display: inline-block !important;
}

/*#############################################################################################################################*/
/*################################################### Footer ##################################################################*/
/*#############################################################################################################################*/

#Rahmen_Footer_Toolbox {
	bottom: 0;
    width: calc(100% - 250px);
    padding: 30px 25px 10px 25px;
    position: absolute;
    left: 250px;
    z-index: 960;   /*diverse Banner müssen höheren z-index haben damit sie den Footer überlagern */
}

.footer_button {
    float: left;
    font-size: 18px;
    margin-left: 20px;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
	height: 40px;
    cursor:pointer;
}

.icon_footer_social_media { 
	float: left;
    margin-right: 10px;
    font-size: 20px;
    cursor:pointer;
}

.ste_icon_facebook:before {font-family: "icons_social_media"; content: "F";}
.ste_icon_twitter:before {font-family: "icons_social_media"; content: "Õ";}
.ste_icon_youtube:before {font-family: "icons_social_media"; content: "ù";}
.ste_icon_whatsapp:before {font-family: "icons_social_media"; content: "í";}
.ste_icon_instagram:before {font-family: "icons_social_media"; content: "d";}
.ste_icon_linkedin:before {font-family: "icons_social_media"; content: "j";}

#PfeilToTopBottom {
    z-index: 2;
    bottom: 10px;
    display: none;
    margin-right: unset!important;
}

/*#############################################################################################################################*/
/*######################################## Buttons ############################################################################*/
/*#############################################################################################################################*/

.button_primary, .button_secondary {
    position: relative;
    float: right;
    margin: 5px;
    padding: 15px;
    border: 1px solid lightgrey;
    cursor: pointer;
    min-height: 42px;
    min-width: 42px;
    font-family: 'F2F-Regular';
    font-size: 14px;
    white-space: nowrap;
    -ms-user-select: None;
    -moz-user-select: None;
    -webkit-user-select: None;
    user-select: None;
}

.button_primary_icon, .button_secondary_icon {
    position: absolute;
    float: left;
    left: 13px;
    top: 14px;
    font-size: 23px;
}

.button_primary_label, .button_secondary_label {
    float: left;
    margin-left: 30px;
    font-family: 'F2F-Regular';
    font-size: 14px;
}

.Toolbox-Button-Text {
    float: right
}

.button_funktion {
    position: relative;
    float: right;
    margin: 5px;
    padding: 10px;
    border: 1px solid lightgrey;
    cursor: pointer;
    min-height: 42px;
    min-width: 42px;
    font-family: 'F2F-Regular';
    font-size: 12px;
}

.button_funktion_icon {
    position: absolute;
    float: left;
    left: 10px;
    font-size: 20px;
}

.button_funktion_label {
    float: left;
    margin-left: 30px;
    font-family: 'F2F-Regular';
    font-size: 12px;
}

.button_funktion_menu_rahmen {
    display: none;
    position: absolute;
    top: 55px;
    right: 0px;
    width: 230px;
    padding: 5px;
    font-size: 15px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 3;
    animation: 0.3s fadeIn;
    text-align: left;
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%), 0 0 27px 0 rgb(0 0 0 / 12%);
}

.button_funktion_menu {
    float: left;
    min-width: 200px;
    padding: 10px;
    cursor: pointer;
    text-align: left;
}

.button_funktion_menu:hover {
    background-color: #f7f7f7;
}

.button_mit_icon_rahmen_large {
	float: left;
	margin: 5px;
	padding: 8px 15px;
}

.button_mit_icon_rahmen {
    float: left;
	margin: 5px;
}

.button_mit_icon_icon {
    float: left;
    margin-left: -5px;
    margin-right: 8px;
    border: none;
    width: 30px;
    height: 30px;
    font-size: 24px !important;
    border-radius: 100px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex !important;
}

.button_mit_icon_label {
    float: left;
    padding-top: 5px;
}

a {
    text-decoration: none;
    outline: 0;
}

a:active, a:focus { outline: 0; }

.arrow, a.arrow {
    font-size: 16px;
    font-family: STEInfoWebBold,Helvetica,Arial,sans-serif;
    display: inline-block;
    padding-left: 11px;
    vertical-align: middle;
    line-height: 22px;
    cursor: pointer;
}

a.arrow:before, a.arrow:hover:before, a.arrow:visited:before {
    width: 5px;
    height: 9px;
    margin: 6px 6px 0 -11px;
    float: left;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    content: "";
    cursor: pointer;
}

.button_auswahl_typ_dokument {
    float: left;
    padding: 10px;
    cursor: pointer;
    width: 100%;
}

.button_auswahl_typ_dokument_label {
    font-size: 18px;
    float: left;
    /* margin-left: 10px; */
    padding-top: 2px;
    padding-left: 15px;
}

.toolbox_dashboard_button {
    position: relative;
    float: right;
    padding: 5px;
    font-size: 15px;
    margin: 10px;
    border-bottom: 2px solid;
    text-transform: uppercase;
    cursor: pointer;
}

/*#############################################################################################################################*/
/*############################################### Selects #####################################################################*/
/*#############################################################################################################################*/

.headline_filter {
    float: left;
    margin-top: -35px;
    margin-bottom: 0px;
    padding: 10px 0px;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.subline_filter {
    float: left;
    width: 100%;
    font-size: 15px;
    margin-top: -5px;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.block_filter_rahmen { 
    width: 100%;
    max-width: 1800px;
    float: left;
    padding: 10px 0px;
    margin-bottom: 10px;
}

.sel_filter_label {
    float: left;
    font-size: 13px;
    text-transform: uppercase;
    padding-top: 12px;
    letter-spacing: 1.5px;
}

.sel_filter_rahmen {
    position: relative;
    height: 30px;
    float: left;
    margin-right: 30px;
    cursor: pointer;
    padding: 5px;
}

.sel_filter_text {
    float: left;
    font-size: 14px;
    padding-right: 2px;
    text-align: right;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
}

.sel_filter_icon {
    float: right;
    font-size: 23px;
    height: 20px;
    margin-right: -7px;
}

.sel_filter_option_rahmen {
    position: absolute;
    top: 33px;
    left: 0px;
    width: max-content;
    padding: 5px;
    font-size: 15px;
    max-height: 290px;
    overflow-y: auto;
    z-index: 3;
    animation: 0.3s fadeIn;
    text-align: left;
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%), 0 0 27px 0 rgb(0 0 0 / 12%);
}

.sel_filter_option {
    cursor: pointer;
    padding: 10px;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
}

.sel_filter_option:hover {
    background-color: #f7f7f7;
}

.sel_filter_suchfeld_rahmen {
    float: left;
    margin-right: 30px;
    border-bottom: 1px solid lightgrey;
}

.sel_filter_suchfeld_input {
    width: 300px;
    height: 30px;
    font-size: 13px;
    background-color: unset;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 0px;
}

.sel_filter_suchfeld_icon {
    font-size: 20px;
    float: right;
    padding-top: 5px;
}

.block_tabelle_rahmen { 
    float: left;
    width: 100%;
    padding: 20px;
    padding-top: 10px;
}

.dashboard_nichts_gefunden_kachel_rahmen {
    width: calc(100% - 20px);
    float: left;
    margin: 10px;
    padding: 50px;
    text-align: center;
}

.sel{
    display: inline-block;
    width:100%;
    margin: 8px 0px;
	position: relative;
    cursor:pointer;
}

.sel_description{
    font-size: 12px;
    margin-bottom: -15px;
    text-transform: uppercase;
    width: 100%;
    float: left;
    text-align: left;
    letter-spacing: 1.5px;
    font-weight: bold;
}

.sel_txt{
    font-size: 15px;
    float: left;
    width: 100%;
    min-height: 40px;
    margin-top: 15px;
    padding: 10px 15px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    border-radius: 3px
}

.sel_texteingabe {
    width: 100%;
    letter-spacing: 1px;
	padding-left: 0px !important;
}

.dropdown_responsive_sel_selected {
    font-weight: normal;
    font-size: 25px;
    margin-top: 7px;
    padding-left: 25px;
}

.dropdown_responsive_sel_daten {
    font-weight: normal;
    font-size: 25px;
    margin-bottom: unset;
}
.sel_icon_opt_arrow_down:before{
    font-family: "stiebel-icons";
    content: "\E04A";
    font-size: 13px;
    margin-top: 18px;
    margin-left: -25px;
    float: left;
}

.sel_icon_opt_arrow_up:before{
    font-family: "stiebel-icons";
    content:"\E049";
    font-size: 13px; 
    margin-top: 18px;  
    margin-left: -23px; 
    float: left;
}

.sel_opt{
    display: none;
    float: left;
	margin-top: 60px;
	position: absolute;
	width: 100%;
    box-sizing: border-box;
    font-weight:700;
    font-size:13px;
    max-height:225px;
    overflow-y:auto;
    z-index:3;
    animation: 0.3s fadeIn;
}

.opt{
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    outline: none;
    white-space: normal;
    float: none;
    cursor: pointer;
}

.opt_input {
    width: 50px;
    height: 36px;
    float: left;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
}

.opt_input_label {
    width: calc(100% - 50px);
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    outline: none;
    white-space: normal;
    float: left;
}

.icon-rahmen {
    height: 80px;
    width: 80px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    float: left;
    padding: 10px;
    position: relative;
    z-index: 2;
    margin-top: 5px;
}

.icon_system {
    height: 60px;
    width: 60px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    text-align: center;
    font-size: 35px;
    display: inline-block;
    speak: none;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    padding: 8px;
    float: left;
    cursor:pointer;
}

.icon_opt_arrow_down:before{
    font-family: "stiebel-icons";
    content: "\E04A";
    font-size: 13px;
    margin-top: 26px;
    margin-left: -25px;
    float: left;
}

.icon_opt_arrow_up:before{
    font-family: "stiebel-icons";
    content:"\E049";
    font-size: 13px; 
    margin-top: 26px;  
    margin-left: -23px; 
    float: left;
}

/*#############################################################################################################################*/
/*######################################## Input/Textfelder ###################################################################*/
/*#############################################################################################################################*/

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 16px;
    line-height: 16px;
    border: none;
    outline: 0;
    padding: 10px;
    font-family: inherit;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input[type="range"] {
    padding: initial;
    border: initial;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    display: inline-block;
    margin-bottom: 5px;
    /* font-family: STEInfoWebBold,Helvetica,Arial,sans-serif; */
}

/*#############################################################################################################################*/
/*########################################## Datepicker #######################################################################*/
/*#############################################################################################################################*/

input[type="date"]::-webkit-clear-button {display: none;}           /* Removes the clear button from date inputs (Datum Wiedervorlage/Enddatum) */
input[type="date"]::-webkit-inner-spin-button {display: none;}      /* Removes the spin button */

input[type="date"]{
    outline: none;
    /* font-weight: 700; */
    font-size: 15px;
}

input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field {
    /* font-weight: 700; */
    font-size: 15px;;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    font-size: 18px;
    font-family: "stiebel-icons";
    content: "\E04A";   
    float: left;
}

/*#############################################################################################################################*/
/*################################################ Checkbox ###################################################################*/
/*#############################################################################################################################*/

input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    display: none;
    margin: 4px 0 0;
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
}

/* before = Icon nicht gewählt */
input[type="checkbox"] + label:before {
    font-family: 'google_icons';
    content: 'check_box_outline_blank';
    position: absolute;
    font-size: 26px;
    left: 0px;
    top: 0px;
}

/* after = Icon gewählt */
input[type="checkbox"]:checked + label:after {
    font-family: 'google_icons';
    content: 'check_box';
    position: absolute;
    font-size: 26px;
    left: 0px;
    top: 0px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.checkbox-label{
    width: 90%;
    position: relative;
    padding-bottom: 10px;
    padding-left: 35px !important;
    margin: 8px 0px !important;
    height: 20px;
    cursor:pointer;
    font-size: 16px;
}

/*animierte Checkmarks bei den Kacheln */
.checkmark_circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 5px;
    stroke-miterlimit: 10;
    animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  .checkmark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    stroke-width: 4px;
    stroke-miterlimit: 10;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.4s ease-in-out 0.4s both;
    position: absolute;
    left: -17px;
    top: -17px;
  }
  
  .checkmark_check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
  }
  
  @keyframes stroke { 100% { stroke-dashoffset: 0; } }
  @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
  @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #fff; } }


/*#############################################################################################################################*/
/*###################################### Radio-Button #########################################################################*/
/*#############################################################################################################################*/

[type="radio"]:checked, [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label, [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}

[type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {
    content: 'radio_button_unchecked';
    font-family: 'google_icons';
    font-size: 24px;
    position: absolute;
    left: -3px;
    top: 0px;
}

[type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after {
    content: 'radio_button_checked';
    font-family: 'google_icons';
    font-size: 24px;
    position: absolute;
    top: 0px;
    left: -3px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/*#############################################################################################################################*/
/*############################################# Pill-Button ###################################################################*/
/*#############################################################################################################################*/

.rahmen_pill {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.switch_pill {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
    float: left;
}

.slider_pill {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider_pill:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider_pill:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

.label_pill {
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    margin-right: 25px;
    cursor:pointer;
}

/*#############################################################################################################################*/
/*############################################## Slider #######################################################################*/
/*#############################################################################################################################*/

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    outline: none;
    margin-top:1px;
    float:left;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

/*#############################################################################################################################*/
/*########################### Dropdown-Aktionsmenü Dokumente Produktdaten/Schaltpläne #########################################*/
/*#############################################################################################################################*/

.dropdown_aktionen_dokument_rahmen {
    display: none;
    position: absolute;
    z-index: 99;
    float: left;
    animation: 0.5s fadeIn;
    width: 150px;
}

.dropdown_aktionen_dokument_btn {
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 0px 15px;
    min-height: 40px;
    float: left;
}

.dropdown_aktionen_dokument_btn_label {
    margin-left: 10px;
    cursor: pointer;
}

/*#############################################################################################################################*/
/*########################################### Bullet-Points ###################################################################*/
/*#############################################################################################################################*/

ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
    padding: 0; 
}

li {
    padding: 4px 15px;
    position: relative;
}

li:before {
    content: '';
    position: absolute;
    left: 0;
    height: 5px;
    width: 5px;
    top: 10px;
}

/*#############################################################################################################################*/
/*############################################ Tabellen #######################################################################*/
/*#############################################################################################################################*/

.toolbox_tabelle_rahmen {
    float: left;
    font-size: 15px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.toolbox_tabelle_zeile_header {
    width: 100%;
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: black;
    border-bottom: 3px solid black;
}

.toolbox_tabelle_zeile {
    width: 100%;
    float: left;
    border-bottom: 1px solid lightgrey;
}

.toolbox_tabelle_element {
    float: left;
    font-size: 15px;
    padding: 15px 5px;
    text-align: left;
}

.toolbox_tabelle_fussnote {
    float: left;
    width: 100%;
    color: darkgrey;
    font-size: 12px;
    margin-top: 20px;
}

.system_tabelle_head {
    margin-top: 40px;
    padding-bottom: 8px;
    float: left;
    width: 100%;
}

.system_tabelle_body {
    margin-bottom: 50px;
    float: left;
    width: 100%;
    padding: 20px 50px;
}

.system_tabelle_zeile {
    float: left;
    width: 100%;
	padding: 12px 0px;
}

.system_tabelle_label {
    float: left;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    font-size: 17px;
}

.system_tabelle_value {
    float: right;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    font-size: 17px;
}

/*######################################################################################################################*/
/*########################################### Tabelle Techn. Daten #####################################################*/
/*######################################################################################################################*/

.tabelle_techn_daten_button_rahmen {
    width: 100%;
    float: left;
}

.tabelle_techn_daten_button {
    margin: 5px;
    padding: 15px 20px;
    float: left;
    cursor: pointer;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-size: 13px;
}

.tabelle_techn_daten_body {
    margin-bottom: 50px;
    float: left;
    width: 100%;
    /* max-width: 1300px; */
    padding: 20px;
}

.tabelle_techn_daten_headline {
    margin-top: 70px;
    margin-bottom: 25px;
    margin-left: 15px;
    padding-bottom: 7px;
    float: left;
    width: fit-content;
    border-bottom: 3px solid;
    font-size: 25px;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    line-height: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.tabelle_techn_daten_zeile {
    position: relative;
    border-bottom: solid 1px #dfdfdf;
    padding: 25px 15px;
    width: 100%;
    float: left;
}

.tabelle_techn_daten_zeile_label {
    float: left;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2.0px;
    font-weight: bold;
    padding-top: 6px;
}

.tabelle_techn_daten_zeile_value {
    float: right;
    text-align: right;
    font-size: 15px;
    border-radius: 5px;
    line-height: 30px;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
}

/*######################################################################################################################*/
/*########################################### Login-Fenster ############################################################*/
/*######################################################################################################################*/

#Homepage_Login_Iframe {
    height: 250px;
    width: calc(100% - 30px);
    margin: 15px;
    max-width: 800px;
}

#Homepage_Login_Loader {
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    display: none;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader_Login_Homepage {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
}

/*######################################################################################################################*/
/*########################################### Allgemeine Toolbox-Suche #################################################*/
/*######################################################################################################################*/

#Toolboxsuche_Rahmen {
    max-width: 1920px;
    float: left;
    padding: 10px;
    height: 95%;
    margin-left: calc(50% - 640px);
    width: 90%;
}

#Toolboxsuche_Suchfeld_Rahmen {
    float: left;
    width: 500px;
}

#Toolboxsuche_Suchfeld_Input {
    font-size: 28px;
    width: 450px;
    float: left;
    line-height: 1;	    /* sonst Plaxceholdertext auf iPad nicht vertikal mittig; */
}

.Toolboxsuche_btn_Kategorie {
    float: left;
    font-weight: bold;
    text-align: right;
    margin: 15px;
    padding-bottom: 2px;
	text-align: center;
    cursor: pointer;
}

#Toolboxsuche_Seite_Ergebnisse {
    float: left;
    width: 100%;
}

#Toolboxsuche_Suchbuttons_Rahmen {
	float: left;
    width: 100%;
	margin-top: 50px;
}

.Toolboxsuche_Rahmen_Kategorie {
    width: 100%;
    margin: 0 auto;
    float: left;
}

.Toolboxsuche_Zeile_Kacheln {
    display:flex;
}

.Toolboxsuche_Kachel {
    position: relative;
    width: calc(33.3333% - 20px);
    margin: 10px;
    float: left;
	padding: 20px;
	min-height: 360px;
    cursor: pointer;
}

.Toolboxsuche_Rahmen_Pic {
    width: 100%;
    float: left;
    height: 150px;
	margin-top: 15px;
    margin-bottom: 35px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.Toolboxsuche_Pic{
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0px 20px rgba(0,0,0,.15));
}

.Toolboxsuche_Icon {
    font-size: 90px !important;
    text-align: center;
    width: 100%;
	margin-top: 10px;
    margin-bottom: 30px;
}

.Toolboxsuche_Icon_2 {
    float: left;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 25px;
    left: 25px;
}

.Toolboxsuche_Icon_Systemhandbuch_Ein {
	float: left;
    margin-right: 20px;
    font-size: 25px;
    margin-top: 15px;
}

.Toolboxsuche_Icon_Systemhandbuch_Aus {
	float: left;
    margin-right: 20px;
    font-size: 25px;
    margin-top: 15px;
}

.Toolboxsuche_Icon_New {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 13px !important;
    padding: 3px 10px;
    border-radius: 20px;
}

.Toolboxsuche_Label_1 {
	width: 100%;
    float: left;
    font-size: 20px;
	text-align: center;
    min-height: 60px;
    line-height: 1.25;
    font-weight: bold;
	letter-spacing: 0.05em;
}

.Toolboxsuche_Label_2 {
    width: 100%;
    float: left;
    font-size: 15px;
	text-align: center;
    line-height: normal;
	letter-spacing: 0.05em;
    margin-bottom: 5px;
	overflow-wrap: break-word;
}

.toolboxsuche_suchverlauf_spalte {
    width: 33.333%;
    float: left;
    padding: 0px 20px;
}

.toolboxsuche_suchverlauf_headline {
    font-family: STEInfoWebBold,Helvetica,Arial,sans-serif;
    margin: 33px 0px 10px 0px;
    width: 100%;
    float: left;
    font-size: 18px;
}

.toolboxsuche_suchverlauf_subline {
    width: 100%;
    float: left;
    font-size: 16px;
    margin-bottom: 8px;
}

.toolboxsuche_suchverlauf_subline:hover {
    text-decoration: underline;
}

#Toolboxsuche_Label_Nichts_Gefunden {
	display: none;
    margin: 50px 20px;
    font-size: 18px;
}

.Toolboxsuche_btn_Alle_Anzeigen {
    width: 100%;
    float: left;
    font-size: 18px;
    margin: 30px 0px;
    padding-left: 25px;
    text-decoration: underline;
    cursor: pointer;
}

.suchfeld_rahmen {
    height: 40px;
    margin: 15px 0px;
    border-radius: 5px;
    padding-top: 1px;
}

.suchfeld_input {
    float: left;
	width: calc(100% - 35px);
    height: 34px;
    border-radius: 5px 0px 0px 5px;
    font-size: 15px !important;
    padding-left: 20px !important;
    padding-top: 10px !important;
	line-height: 3;
}

.suchfeld_icon {
    width: 35px;
    float: right;
    padding-top: 3px;
}

.suchfeld_suchergebnisse_objekt {
    width: 100%;
    margin-bottom: -5px;
    padding: 25px 10px;
    cursor: pointer;
}

.suchfeld_suchergebnisse_objekt:hover {
    font-weight: bold;
}

.suchfeld_suchergebnisse_label_1 {
    width: 85%;
    float: left;
    font-size: 30px;
    margin-bottom: 10px;
    line-height: normal;
}

.suchfeld_suchergebnisse_label_2_left {
    width: 70%;
    float: left;
    font-size: 16px;
    margin-top: 5px;
}

.suchfeld_suchergebnisse_label_2_right {
    width: 30%;
    float: left;
    text-align: right;
    font-size: 16px;
    margin-top: 5px;
}

.suchfeld_suchergebnisse_objekt_status_kachel {
    width: 15%;
    float: left;
    margin-top: 5px;
    text-align: right;
}

.suchfeld_suchergebnisse_objekt_status_label {
    float: right;
    margin-left: 5px;
    margin-top: 3px;
}

.suchen_layer_bitte_warten {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.suchen_layer_bitte_warten_label_1 {
    float: left;
    width: 100%;
    font-size: 20px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    margin-bottom: 5px;
    line-height: normal;
}

.suchen_layer_bitte_warten_label_2 {
    width: 100%;
    float: left;
    font-size: 15px;
}

.suchen_layer_bitte_warten_buttons {
    display: flex; 
    justify-content: center; 
    width: 100%;
    margin-top: 30px;
    float: left;
}

/*######################################################################################################################*/
/*###################################################### Stückliste ####################################################*/
/*######################################################################################################################*/

.stueckliste_tabelle_rahmen {
	width: 100%;
	float: left;
	margin-bottom: 30px;
    padding: 25px;
}

.stueckliste_tabelle_headline {
    width: 100%;
    float: left;
    padding-bottom: 20px;
    position: relative;
    font-size: 20px;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    font-weight: 400;
}

.stueckliste_tabelle_headline_label {
	width: fit-content;
	max-width: calc(100% - 50px);
    float: left;
    font-size: 26px !important;
    line-height: initial;
    word-break: break-word;
	padding: 5px;
}

.stueckliste_tabelle_headline_icon_edit {
    float: right;
    font-size: 28px !important;
	margin-top: 5px;
}

.stueckliste_tabelle_headline_ident{
    float: left;
    font-weight: bold;
    width: 12%;
    text-align: center;
    padding-top: 10px;
    height: 40px;
}

.stueckliste_tabelle_headline_name{
    float:left;
    font-weight: bold;
    width: 55%;
    text-align: left;
    padding-top: 10px;
    height: 40px;
}

.stueckliste_tabelle_headline_einzelpreis {
    float: left;
    font-weight: bold;
    width: 15%;
    text-align: right;
    padding-top: 10px;
    height: 40px;
}

.stueckliste_tabelle_headline_gesamtpreis{
    float: right;
    font-size: 15px;
    font-weight: bold;
    width: 18%;
    text-align: right;
    padding-right: 30px;
    padding-top: 10px;
    height: 40px;
}

.stueckliste_tabelle_zeile_rahmen {
    width: calc(100% - 20px);
    margin-left: 10px;
    padding: 10px 0px;
    position: relative;
    min-height: 90px;
    float: left;
    animation: 0.8s fadeIn;
}

.stueckliste_tabelle_zeile_rahmen_liste {
    width: calc(100% - 20px);
    margin-left: 10px;
    position: relative;
    min-height: 50px;
    float: left;
    padding-bottom: 10px;
    padding-top: 10px;
    animation: 0.8s fadeIn;
}

.stueckliste_tabelle_zeile_rahmen:hover, .stueckliste_tabelle_zeile_rahmen_liste:hover {
    cursor: pointer;
    font-weight:  bold;
    text-underline-position: auto;    
    position: relative;
}

.stueckliste_tabelle_zeile_pic_rahmen {
    float: left;
    width: 15%;
    height: 92px;
    padding: 14px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.stueckliste_tabelle_zeile_pic {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0px 15px rgba(0,0,0,0.25));
}

.stueckliste_tabelle_zeile_label_0 {
    position: absolute;
    left: 0px;
    top: 2px;
    font-size: 15px;
}

.stueckliste_tabelle_zeile_label_1 {
    float: left;
    min-height: 45px;
    width: 57%;
    margin-right: 2%;
    margin-left: 2%;
    padding-bottom: 14px;
    font-size: 15px;
    text-align: left;
}

.stueckliste_tabelle_zeile_label_2 {
    float: left;
    min-height: 45px;
    width: 57%;
    margin-left: 2%;
    margin-right: 2%;
    padding-top: 24px;
    font-size: 19px;
    text-align: left;
}

.stueckliste_tabelle_zeile_label_3 {
    float: left;
    min-height: 45px;
    width: 24%;
    padding-top: 24px;
	padding-right: 10px;
    font-size: 15px;
    text-align: right;
}

.stueckliste_tabelle_zeile_label_4 {
    float: left;
    min-height: 45px;
    width: 24%;
    font-size: 15px;
    text-align: right;
	padding-top: 3px;
	padding-right: 10px;
}

.stueckliste_tabelle_zeile_label_4_optional {
    margin-top: 7px;
    margin-right: 5px;
    height: 24px;
    border-radius: 20px;
    float: right;
    color: white;
    background-color: indianred;
    font-size: 11px;
    padding: 2px 10px;
    min-width: 90px;
    text-align: center;
}

.stueckliste_tabelle_zeile_label_4_optional_green {
    margin-top: 18px;
    margin-right: 5px;
    height: 24px;
    border-radius: 20px;
    float: right;
    color: white;
    background-color: mediumseagreen;
    font-size: 13px;
    padding: 2px 10px;
    min-width: 90px;
    text-align: center;
}

.stueckliste_tabelle_zeile_label_4_rabatt {
    margin-top: -60px;
    margin-right: 80px;
    border-radius: 20px;
    float: right;
    color: white;
    background-color: mediumseagreen;
    font-size: 16px;
    padding: 8px;
    min-width: 100px;
    text-align: center;
}

.stueckliste_tabelle_zeile_icon {
    float:right;
    font-size: 25px;
    margin-top: -55px;
    margin-right: 25px;
}

.stueckliste_tabelle_zeile_label_1_liste {
    float: left;
    width: 12%;
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;
}

.stueckliste_tabelle_zeile_label_2_liste {
    float: left;
    width: 55%;
    padding-left: 5px;
    text-align: left;
    margin-top: 5px;
}

.stueckliste_tabelle_zeile_label_3_liste {
    float: left;
    width: 15%;
    text-align: right;
    margin-top: 5px;
}

.stueckliste_tabelle_zeile_label_4_liste {
    float: left;
    width: 18%;
    text-align: right;
    padding-right: 20px;
    margin-top: 5px;
}

.stueckliste_tabelle_zeile_notiz_rahmen {
    width: calc(100% - 40px);
    margin: 20px;
    float: left;
}

.stueckliste_tabelle_zeile_notiz {
    font-size: 16px !important;
    width: 100%;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    float: left;
    height: 35px;
    padding: 16px !important;
    border: none;
    outline: 0;
}

.stueckliste_tabelle_summe_anzahl {
    font-size: 18px;
    text-align: center;    
    margin-left: 35px;
    margin-top: 20px;
    float: left;
}

.stueckliste_tabelle_summe_preis {
    font-size: 18px;
    text-align: right;
    margin-top: 20px;
    margin-right: 20px;
    width: calc(100%-150px);
    float: right;
}

.stueckliste_gesamtpreis_label_1 {
    width: calc(100% - 185px);
    float: right;
	text-align: right;
	font-size: 16px;
	margin-bottom: 5px;
}

.stueckliste_gesamtpreis_value_1 {
    width: 150px;
    float: right;
	text-align: right;
	font-size: 16px;
	margin-bottom: 5px;
    margin-right: 35px;
}

.stueckliste_gesamtpreis_label_2 {
    width: calc(100% - 185px);
    float: right;
	text-align: right;
	font-size: 22px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    margin-bottom: 20px;
    margin-top: 20px;
}

.stueckliste_gesamtpreis_value_2 {
    width: 150px;
    float: right;
	text-align: right;
	font-size: 22px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    margin-bottom: 20px;
    margin-top: 25px;
    margin-right: 35px;
}


#Stueckliste_Label_Hinweis_GH_Preise, #Stueckliste_Label_Hinweis_PV_Preise {
	font-size: 15px;
    float: right;
    line-height: 20px;
    width: 100%;
    text-align: justify;
    margin-bottom: 20px;
    text-align: right;
}

.stueckliste_edit_container{
    display: none;
    position: absolute;
    z-index: 99;
    float: left;
    animation: 0.5s fadeIn;
	max-width: 400px;
}

.stueckliste_edit_btn_option {
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
	min-height: 55px;
	float: left;
	width: 200px;
    cursor: pointer;
}

.stueckliste_edit_btn_option_label {
    margin-left: 10px;
}

#ArtikelEdit_Fenster_Schliessen, #ArtikelEdit_Kategorie_Fenster_Schliessen {
	text-align: center;
    min-height: 40px;
    width: 100%;
    float: left;
    padding: 10px;
    cursor: pointer;
}

.stueckliste_edit_suchliste_zeile{
    padding: 10px;
    min-height: 40px;
    font-size: 15px;
    cursor: pointer;
}

.stueckliste_edit_btn_anzahl{
    float: left;
    height: 45px;
    width: 44px;
    text-align: center;
    padding-top: 12px;
    font-size: 20px;
    cursor: pointer;
}

.stueckliste_edit_btn_anzahl_2{
    float: left;
    height: 40px;
    width: 55px;
    text-align: center;
    padding-top: 10px;
    font-size: 20px;
    cursor: pointer;
}

/*######################################################################################################################*/
/*############################################# Hydraulikplan #########################################################*/
/*######################################################################################################################*/

.schaltplan_kachel_100{
    width: 100%;
    text-align: left;
    position: relative;
    margin-bottom: 30px;
    padding:10px;
    display: inline-block;
    animation: 0.8s fadeIn;
    border-radius: 3px;
}

.schaltplan_kachel_33{
    float: left;
    width: calc(33.3333% - 20px);
    text-align: left;
    position: relative;
    animation: 0.8s fadeIn;
	margin: 10px;
    padding:5px;
    min-height: 200px;
}

.schaltplan_bild_zeile {
    width: calc(100% + 30px);
    float: left;
    display: flex;
    margin-left: -15px;
}

.schaltplan_bild_100 {
    width:70%;
    float: left;
    cursor: pointer;
} 

.schaltplan_bild_33 {
    width:100%;
    float: left;
    animation: 0.8s fadeIn;
    border-radius: 3px;
    cursor: pointer;
} 

.schaltplan_label_code_100 {
    font-weight: bold;
    margin-bottom: 30px;
    float: left;
    width: calc(30% - 50px);
    margin-left: 50px;
    margin-top: 25px;
    font-size: 18px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
}

.schaltplan_label_code_33 {
    margin-top: 15px;
    float: left;
    font-size: 18px;
    height: 20px;
    padding-left: 25px;
    cursor: pointer;
}

.schaltplan_btn_show_dropdown_33 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 30px !important;
}

.schaltplan_btn_show_dropdown_100 {
    position: absolute;
    bottom: 5px;
    left: 8px;
    font-size: 30px !important;
}

.schaltplan_label_rahmen {
    float: left;
    width: calc(30% - 50px);
    margin-left: 50px;
	margin-bottom: 20px;
}

.schaltplan_label_zeile {
    font-size: 16px;
    display: -webkit-box;
    height: 30px;
    margin-top: 5px;
}

.schaltplan_label_icon {
    margin-top: 0px;
    font-size: 25px;
}

.schaltplan_label_text {
    margin-left: 15px;
}

/*#############################################################################################################################*/
/*################################################ Artikeldetails #############################################################*/
/*#############################################################################################################################*/

.artikeldetails_rahmen {
    margin-bottom: 30px;
    padding-bottom: 20px;
    float: left;
    width: 100%;
    padding: 25px;
}

.artikeldetails_pic_rahmen {
    width: 200px;
    height: 200px;
    margin-right: 30px;
    margin-top: -25px;
    float: left;
    text-align: center;
    padding: 30px;	
    align-items: center;
    justify-content: center;
    display: flex;
}

.artikeldetails_pic {
	max-width: 100%;
    max-height: 100%;
}

.artikeldetails_headline {
	width: calc(100% - 230px) !important;
	float: left;
}

.artikeldetails_breadcrumb {
	width: calc(100% - 230px);
	float: left;
    font-size: 15px;
    margin-bottom: 20px;
}

.artikeldetails_label_1 {
	width: calc(100% - 230px);
	float: left;
    font-size: 18px;
    margin-bottom: 8px;
}

.artikeldetails_label_2 {
	width: 100%;
	float: left;
    text-align: left;
    font-size: 16px;
    margin-top: 40px;
}

.artikeldetails_bullets_kachel {
	width: 100% !important;
    float: left !important;
    min-height: 60px;
    padding: 25px;
    margin-bottom: -30px !important;
}

.artikeldetails_btn_produktdaten {
    float: right;
    margin-top: 25px;
}

.btn_techn_daten_artikel_rahmen{    
    margin: 5px;
    padding: 10px;
    float: left;
    border-radius: 5px;
    cursor: pointer;
}

.btn_techn_daten_artikel_pic{    
    float: left;
    height: 40px;
}

.btn_techn_daten_artikel_label{    
    float: left;
    font-size: 12px;
    height: 40px;
    margin-left: 15px;
    font-family: 'STEInfoWebBold';
}

/*################################################################################################################*/
/*##################################### Tabelle Webshop Bestellhistorie ##########################################*/
/*################################################################################################################*/

.kachel_webshop_rahmen {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 10px 0px;
    float: left;
    padding: 15px 20px;
    box-shadow: 0px 0px 4px 1px gainsboro;
    border-radius: 3px;
}

.kachel_webshop_headline_rahmen {
    width: 100%;
    float: left;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ededed;
}

.kachel_webshop_headline_label_1 {
    float: left;
    width: calc(100% - 170px);
    font-size: 20px;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    margin-bottom: 5px;
    line-height: normal;
}

.kachel_webshop_headline_label_2L {
    width: calc(100% - 45px);
    float: left;
    font-size: 15px;
}

.kachel_webshop_headline_label_2R {
    width: 90px;
    float: right;
    font-size: 15px;
    position: absolute;
    right: 20px;
    top: 45px;
    text-align: center;
}

.kachel_webshop_headline_label_3 {
    width: calc(100% - 35px);
    min-height: 20px;
    float: left;
    font-size: 16px;
    margin-top: 12px;
}

.kachel_webshop_headline_icon {
    float: left;
    font-size: 35px;
    width: 45px;
    margin-top: 2px;
    padding-right: 15px;
    filter: drop-shadow(0 0px 20px rgba(0,0,0,.15));
}

.kachel_webshop_headline_badge {
    position: absolute;
    right: 20px;
    top: 15px;
    height: 24px;
    border-radius: 20px;
    float: right;
    background-color: mediumseagreen;
    font-size: 11px;
    padding: 2px 10px;
    min-width: 90px;
    text-align: center;
}

.kachel_webshop_block_rahmen {
    width: 33.333%;
    float: left;
}

.kachel_webshop_block_icon {
    float: left;
    width: 45px;
    font-size: 30px;
    height: 45px;
    padding-top: 5px;
}

.kachel_webshop_block_label {
    width: calc(100% - 45px);
    min-height: 20px;
    float: left;
    font-size: 14px;
}

/*#############################################################################################################################*/
/*############################################# Reglereinstellungen ###########################################################*/
/*#############################################################################################################################*/

.reglereinstellungen_headline_1 {
    float: left;
    width: unset;
}

.reglereinstellungen_headline_2 {
    margin-right: 20px;
    font-size: 19px !important;
    width: unset;
}

.reglereinstellungen_zeile {
    float: left;
    width: 100%;
    padding: 25px 0px;
    animation: 0.5s fadeIn;
    position: relative;
}

.reglereinstellungen_breadcrumb {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    font-size: 17px;
}

.reglereinstellungen_label_1 {
    margin-right: 15px;
    margin-top: 6px;
    float: left;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-size: 13px;
    padding: 3px 12px;
    border-radius: 5px;
    width: fit-content;
}

.reglereinstellungen_label_2 {
    margin-right: 15px;
    margin-top: 6px;
    float: left;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 5px;
    width: fit-content;
}

.reglereinstellungen_info_icon {
    position: absolute;
    right: 0px;
    bottom: 5px;
    font-size: 22px !important;
}

.reglereinstellungen_info_rahmen {
    display: none;
    float: left;
    width: 100%;
    margin-top: 20px;
}

.reglereinstellungen_info_label {
    float: left;
    width: 100%;
    font-size: 15px;
}

.reglereinstellungen_info_link {
    float: left;
    margin-top: 15px;
    margin-right: 30px;
}

/*######################################################################################################################*/
/*############################################# Installationsvideos ####################################################*/
/*######################################################################################################################*/

.installationsvideo_rahmen {
    overflow: hidden;
    margin-bottom: 20px;
    margin-right: 20px;
    float: left;
    width: calc(33.333% - 20px);
	text-align: center;
}

.installationsvideo_rahmen:hover {
    transition: .4s ease;
    cursor: pointer;
}

.installationsvideo_thumbnail {
    max-width: 100%;
    max-height: 100%;
	min-height: 230px;
}

.installationsvideo_label {
    text-align: center;
    width: calc(100% - 20px);
    float: left;
    margin: 10px;
}

/*######################################################################################################################*/
/*################################################# Systemhandbuch #####################################################*/
/*######################################################################################################################*/

.System_ID {
    margin-right: 30px;
    float: left;
}

#Systeminfo_Rahmen_Kachel_Artikel {
    width: 100%;
    float:left;
    display: flex;
    /* justify-content: space-around; */
}

.Systeminfo_Plus_Zeichen {
    width: 70px !important;
    margin-top: 150px;
    text-align: center;
    font-size: 74px !important;
    float: left;
    color: grey;
    /* width: unset !important; */
}

.Systeminfo_Kachel_Artikel_100 {
    width: calc(100%);
    float: left;
    padding: 15px;
    position: relative;
    animation: 0.5s fadeIn;
    margin-bottom: 20px;
}

.Systeminfo_Kachel_Artikel_50 {
    width: calc(50% - 35px);
    float: left;
    padding: 15px;
    position: relative;
    animation: 0.5s fadeIn;
    margin-bottom: 20px;
}

.Systeminfo_Kachel_Artikel_33 {
    width: calc(33.333% - 43px);
    float: left;
    padding: 15px;
    position: relative;
    animation: 0.5s fadeIn;
    margin-bottom: 20px;
}

.Systeminfo_Kachel_Artikel_25 {
    width: calc(25% - 53px);
    float: left;
    padding: 15px;
    position: relative;
    animation: 0.5s fadeIn;
    margin-bottom: 20px;
}

.Systeminfo_Artikel_Name {
    width: 100%;
    float: left;
	margin-top: 10px;
    margin-bottom: 5px;
    text-align:center;
    font-size:20px;
    height: 100px;
}

.Systeminfo_Artikel_Rahmen_Pic {
    width: 100%;
    height: 150px;
    float: left;
    padding: 15px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.Systeminfo_Artikel_Pic {
    max-width:100%;
    max-height:100%;
    filter: drop-shadow(0 0px 20px rgba(0,0,0,.15));
}

.Systeminfo_Artikel_Video_Threesixty {
    width: 100%;
    height: 190px;
    float: left;
}

.Systeminfo_Artikel_Button_Threesixty {
    position: absolute;
    right: 30px;
    top: 220px;
    color: lightgrey;
    z-index: 2;
    cursor: pointer;
}

.Systeminfo_Artikel_Bullets_Rahmen {
    width: 100%;
    min-height: 60px;
    float: left;
    margin-top: 10px;
    padding: 15px 15px 5px 20px;
    margin-bottom: 0px;
    position: relative;
}

.Systeminfo_erp_Rechteck {
    width: 35px;
    height: 20px;
    background-color: #1b9e51;
    color: white;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    text-align: left;
    padding: 0px 8px;
    font-size: 10px;
    position: absolute;
    left: 15px;
}

.Systeminfo_erp_Dreieck {
    width: 0;
    height: 0;
    border-left: 10px solid #1b9e51;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    left: 50px;
}

/*######################################################################################################################*/
/*############################################ Kacheln Docs ############################################################*/
/*######################################################################################################################*/

.kachel_docs {
    width: 100%;
    margin-bottom: 20px;
    float: left;
}

.kachel_docs_rahmen_pic {
    width: 150px;
    float: left;
    height: 125px;
    padding: 15px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.kachel_docs_pic {
    max-width: 100%;
    max-height: 100%;
}

.kachel_docs_label_1 {
    font-size: 26px;
    line-height: normal;
    margin-top: 30px;
    margin-bottom: 7px;
    margin-left: 30px;
    padding-right: 10px;
    min-height: 20px;
    float: left;
    width: calc(100% - 180px);
}

.kachel_docs_label_2 {
    font-size: 16px;
    line-height: normal;
    width: calc(100% - 180px);
    margin-bottom: 15px;
    margin-left: 30px;
    padding-right: 10px;
    min-height: 20px;
    font-family: STEInfoWeb,Helvetica,Arial,sans-serif;
    float: left;
}

/*##########################################################################################################################*/
/*######################################### Ergebniskacheln FAQ ############################################################*/
/*##########################################################################################################################*/

.Block_Selects_FAQ {
    float: left;
    padding: 5px 10px 10px 10px;
    width: 100%;
    margin-bottom: 20px;
    animation: 0.8s fadeIn;
}

.sel_custom_faq {
    width: calc(25% - 20px);
    float: left;
    margin: 10px;
}

.faq_kachel {
    width: 100%;
    float: left;
    padding: 10px 25px;
    cursor: pointer;
    border-bottom: 1px solid lightgrey;
    padding: 10px 25px;
}

.faq_kachel_icon {
    width: 50px;
    float: right;
    padding: 10px;
    font-size: 40px;
}

.faq_question {
    width: calc(100% - 50px);
    font-size: 20px;
    float: left;
    margin: 20px 0px;
}

.faq_rahmen_answer {
    width: 100%;
    display: none;
    float: left;
}

.faq_answer {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}

.faq_answer_link {
    margin-bottom: 20px;
}

/*#############################################################################################################################*/
/*############################################ Tool-Tips ######################################################################*/
/*#############################################################################################################################*/

/*Unten*/
.tooltip_bottom { 
	position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip_bottom .tooltiptext {
	visibility: hidden;
    width: 222px;
    background-color: dimgrey;
    color: white;
    text-align: left;
	font-size: 15px;
    padding: 10px;
    position: absolute;
    z-index: 970;   /* Nur 'Bitte warten' Modal hat 999 */
    top: 150%;
    left: 50%;
    margin-left: -111px;
    word-wrap: break-word;
    top: unset;
    margin-top: 10px;
    text-align: left;
    display:none;
}

.tooltip_bottom:hover .tooltiptext {
    visibility: visible;
}

.tooltip_bottom .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent dimgrey transparent;
}

/*Top*/
.tooltip_top { 
	position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip_top .tooltiptext {
    visibility: hidden;
    width: 222px;
    background-color: dimgrey;
    color: white;
    text-align: left;
	font-size: 15px;
    padding: 10px;
    position: absolute;
    z-index: 970;   /* Nur 'Bitte warten' Modal hat 999 */
    bottom: 150%;
    left: 50%;
    margin-left: -111px;
    word-wrap: break-word;
    top:unset;
    margin-top:10px;
}
.tooltip_top:hover .tooltiptext {
    visibility: visible;
}

.tooltip_top .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: dimgrey transparent transparent transparent;
}

/*Rechts*/
.tooltip_right { 
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip_right .tooltiptext {
    visibility: hidden;
    width: 222px;
    background-color: dimgrey;
    color: white;
    text-align: left;
	font-size: 15px;
    padding: 10px;
    position: absolute;
    z-index: 970;   /* Nur 'Bitte warten' Modal hat 999 */
    top: -5px;
    left: 110%;
    word-wrap: break-word;
     margin-top:10px;
}

.tooltip_right:hover .tooltiptext {
    visibility: visible;
}

/*Links*/
.tooltip_left { 
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip_left .tooltiptext {
    visibility: hidden;
    width: 350px;
	background-color: grey;
    color: white;
    text-align: left;
	font-size: 15px;
    padding: 15px;
    position: absolute;
    border-radius: 5px;
    z-index: 99;
    top: 15px;
    right: 50%;
    word-wrap: break-word;
    margin-top:10px;
}

.tooltip_left:hover .tooltiptext {
    visibility: visible;
}

/*######################################################################################################################*/
/*######################################## Projektdaten ################################################################*/
/*######################################################################################################################*/

.projektdaten_labels {
    position: relative;
}

.projektdaten_headline{
	float: left;
	margin-top: 20px;
    cursor: pointer;
}

.projektdaten_headline_icon {
	float: left;
    margin-right: 10px;
    font-size: 24px;
}

.projektdaten_button {
    float: right;
    font-family: 'F2F-Regular';
    font-size: 12px;
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
}

.projektdaten_button_label {
	float: left;
    margin-left: 25px;
    font-family: 'F2F-Regular';
    font-size: 12px;
}

.projektdaten_button_icon {
	position: absolute;
    float: left;
    font-size: 20px;
}

.projektdaten_input {
	margin-top: 25px;
}

.button_drucken_fortschritt {
    width: 0%;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
}

.sel_projekt{
    margin-bottom: 5px!important;
    margin-top: -11px!important;
}

.sel_txt_projekt{
    width: 100%!important;
    margin-left: unset!important;
    padding-left: unset!important;
    font-family: F2F-Regular,Helvetica,Arial,sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.sel_opt_projekt{
	margin-left: 30px;
    margin-top: 30px!important;
    width: 300px;
    font-family: STEInfoWebBold,Helvetica,Arial,sans-serif;
    font-size: 15px;
	max-height: 300px;
}

#Banner_Alles_Gespeichert {
    display: none;
    position: fixed;
    z-index: 990;   /* Nur 'Bitte warten' Modal hat 999 */
    height: 50px;
    width: 100%;
    overflow-y: auto;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding-top: 17px;
    font-family: F2F-Regular, Helvetica, Arial, sans-serif;
}

#Layer_Bitte_Warten_Label{
    text-align: center; 
    width: 100%; 
    margin-top: 40px;
    display: none;
}
 
 .txtHinweisText {
    min-height: 250px;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid lightgrey;
}

.txtHinweistextinSuche{
    margin-left: 38px;
}

.btnHinweistexte:hover{
    cursor: pointer;
}

.iconHinweistext{
    float:left;
}

.modal-content-ExcelImport {
    position: relative;
    margin: auto;
    padding: 0;
    width: 80%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-bottom:solid;
    border-bottom-width:20px;
    border-right-width:20px;
    border-left-width:20px;
    max-width: 400px;
}

#InfoStartExcelImport {
    font-size: 17px;
}

.kachel_dublettencheck {
    width: calc(33.333% - 10px);
    margin: 5px;
    padding: 10px;
    cursor: pointer;  
}

.kachel_dublettencheck_label_1 {
    width: calc(100% - 70px); 
    float: left;
    font-weight: bold;
    margin-bottom: 5px;
}

.kachel_dublettencheck_label_2 {
    width: 70px;  
    float: left;
    font-size: 14px;
    text-align: right; 
}

.kachel_dublettencheck_label_3 {
    width: 100%;
    min-height: 20px;
    float: left;
    font-size: 14px;
}

/*#############################################################################################################################*/
/*########################################### Overlay #########################################################################*/
/*#############################################################################################################################*/

.overlay_rahmen {
    display: none;
    position: fixed;
    z-index: 980;   /* Nur 'Bitte warten' Modal hat 999 */
    padding: 60px 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: -webkit-center;
    text-align: -moz-center;
	overscroll-behavior: none;
}

.overlay_rahmen_level_5{
    z-index: 985;
}

.overlay_viewport {
    overflow: auto;
    width: 90%;
    max-width: 1800px;
    height: 100%;
    position: relative;
    text-align: left;
    background-color: white;
}

.overlay_header {
    width: 100%;
    height: 60px;
    float: left;
    padding: 20px;
}

.overlay_header_button_close {
    font-size: 35px;
    position: absolute;
    top: 7px;
    right: 6px;
    cursor:pointer;
}

.overlay_header_button_kategorie {
    float: left;
    margin-right: 30px;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.overlay_body {
    width: 100%;
    float: left;
    padding: 20px;
    height: calc(100% - 140px);
    overflow: auto;
}

.overlay_body_kategorie {
    display: none;
    float: left;
    width: 100%;
    height: 100%;
}

.overlay_footer {
    width: 100%;
    height: 80px;
    float: left;
    padding: 10px 15px;
    border-top: 1px solid lightgrey;
}

/*#############################################################################################################################*/
/*########################################### Modal (alt mal umbauen auf neues Overlay) & iFrames #############################*/
/*#############################################################################################################################*/

.modal {
    display: none;
    position: fixed;
    z-index: 980;   /* Nur 'Bitte warten' Modal hat 999 */
    padding: 60px 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: -webkit-center;
    text-align: -moz-center;
	overscroll-behavior: none;
}
.modal_important {  /*Fehlermedldungen muessen andere overlays ggf. ueberlagern*/
    display: none;
    position: fixed;
    z-index: 990;   /* Nur 'Bitte warten' Modal hat 999 */
    padding: 60px 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: -webkit-center;
    text-align: -moz-center;
	overscroll-behavior: none;
}

.modal-header {
	width: 100%;
	font-family: STEInfoWeb,Arial;
    font-size: 24px;
    margin-bottom: 25px;
    line-height: 28px;
}

.modal-body {
    padding: 30px;
    overflow: auto;
    width: 90%;
    animation-name: animatetop;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
	position: relative;
	text-align: left;
    max-height: 100%;
}

.modal-Label-Text {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}

.modal-body-small {
    max-width: 600px;
    margin-top: 10%;
    padding: 25px;
    overflow: auto;
    animation-name: animatetop;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    position: relative;
    text-align: left;
    border-radius: 5px;
}

.modal_Label_Text {
	font-size: 16px;
    margin-bottom: 25px;
    width: 100%;
}

.modal_Input_Text {
	float: left;
    font-size: 30px !important;
    padding-left: 15px !important;
}

.modal_Label_Einheit {
	float: left;
    margin-top: 20px;
    font-size: 24px;
    padding-left: 13px;
}

.modal_Input_Button { 
    float: right;
    padding: 10px 20px;
}

.iframe_Toolbox {
    width: 100%;
    height: calc(100% + 50px);
}

/*###########################################################################################################################################################*/
/*##################################################### ITML - Objekterstellung #############################################################################*/
/*###########################################################################################################################################################*/

.ITML_Objekt_Neu_Anhang_Datei_Dragover,.ITML_Objekt_Anhang_Datei_Dragover{
    border-style: dashed;
}

.ITML_Objekt_Neu_Anhang_Datei_Dragleave,.ITML_Objekt_Anhang_Datei_Dragleave{
    border-style: dashed;
}

.ITML_Objekt_Neu_Anhang_Datei_Dropped,.ITML_Objekt_Anhang_Datei_Dropped{
    border-style: solid;
}

.Thumbnail_ITML_Objekt_Neu_Anhang_Datei,.Thumbnail_ITML_Objekt_Anhang_Datei{
    max-width: 100%;
    max-height: 100%;
    padding: 3px;
}

.Thumbnail_ITML_Objekt_Neu_Anhang_Datei_Abbrechen,.Thumbnail_ITML_Objekt_Anhang_Datei_Abbrechen{
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 11px;
}

.block_input_itml{
    width: 100%;
    float: left;
    position: relative;
	padding: 25px 0px 10px 0px;
}

.block_input_left_itml{
	width: 50%;
    float: left;
    padding-right: 20px;
}

.block_input_right_itml{
	width: 50%;
    float: left;
    padding-left: 20px;
}

.sel_description_itml{
	margin-left: 0;
	margin-bottom: -15px
}

.sel_opt_itml{
    margin-top: 60px!important;
    max-height: 300px!important;
	display: block;
	width: 100%;
    cursor: pointer;
}

.sel_txt_itml {
    font-size: 15px!important;
    border: 1px solid lightgrey !important;
    border-radius: 3px;
}

.sel_txt_hinweis_itml {
    min-height: 180px;
    padding: 10px;
    float: left;
    width: 100%;
    margin-top: 15px;
    cursor: text;
}

.sel_drag_drop_area_itml {
	margin-right: 10px;
    height: 220px;
    width: calc(20% - 10px);
    margin-top: 20px;
    float: left;
    text-align: center;
    font-size: 65px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
}

#EingabeITMLObjekt{
    float:left;
    margin-bottom:30px;
    width:100%;
    padding-bottom: 23px
}

#selHeadlineAuftraggeber, #selHeadlineProjekt{
   height: 40px;
   margin-top:0px;
   margin-bottom:0px;
   font-size: 20px;
   border: none;
   width: 100%;
   outline: none;
}

/*#############################################################################################################################*/
/*####################################### Länderflaggen #######################################################################*/
/*#############################################################################################################################*/

.flag-icon-background{background-size:contain;background-position:50%;background-repeat:no-repeat}
.flag-icon{background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1em;line-height:1em}
.flag-icon:before{content:"\00a0"}

.flag-icon-de{background-image:url(../images/icons/flags/4x3/de.svg)}
.flag-icon-eu{background-image:url(../images/icons/flags/4x3/eu.svg)}
.flag-icon-at{background-image:url(../images/icons/flags/4x3/at.svg)}
.flag-icon-ch{background-image:url(../images/icons/flags/4x3/ch.svg)}
.flag-icon-gb{background-image:url(../images/icons/flags/4x3/gb.svg)}
.flag-icon-ie{background-image:url(../images/icons/flags/4x3/ie.svg)}
.flag-icon-fr{background-image:url(../images/icons/flags/4x3/fr.svg)}
.flag-icon-nl{background-image:url(../images/icons/flags/4x3/nl.svg)}
.flag-icon-fi{background-image:url(../images/icons/flags/4x3/fi.svg)}
.flag-icon-be{background-image:url(../images/icons/flags/4x3/be.svg)}
.flag-icon-bg{background-image:url(../images/icons/flags/4x3/bg.svg)}
.flag-icon-it{background-image:url(../images/icons/flags/4x3/it.svg)}
.flag-icon-au{background-image:url(../images/icons/flags/4x3/au.svg)}
.flag-icon-nz{background-image:url(../images/icons/flags/4x3/nz.svg)}
.flag-icon-us{background-image:url(../images/icons/flags/4x3/us.svg)}
.flag-icon-sk{background-image:url(../images/icons/flags/4x3/sk.svg)}
.flag-icon-cz{background-image:url(../images/icons/flags/4x3/cz.svg)}
.flag-icon-hu{background-image:url(../images/icons/flags/4x3/hu.svg)}
.flag-icon-hr{background-image:url(../images/icons/flags/4x3/hr.svg)}
.flag-icon-pl{background-image:url(../images/icons/flags/4x3/pl.svg)}
.flag-icon-ru{background-image:url(../images/icons/flags/4x3/ru.svg)}
.flag-icon-ro{background-image:url(../images/icons/flags/4x3/ro.svg)}
.flag-icon-in{background-image:url(../images/icons/flags/4x3/in.svg)}
.flag-icon-cn{background-image:url(../images/icons/flags/4x3/cn.svg)}
.flag-icon-th{background-image:url(../images/icons/flags/4x3/th.svg)}
.flag-icon-za{background-image:url(../images/icons/flags/4x3/za.svg)}
.flag-icon-es{background-image:url(../images/icons/flags/4x3/es.svg)}
.flag-icon-se{background-image:url(../images/icons/flags/4x3/se.svg)}
.flag-icon-dk{background-image:url(../images/icons/flags/4x3/dk.svg)}
.flag-icon-si{background-image:url(../images/icons/flags/4x3/si.svg)}
.flag-icon-lt{background-image:url(../images/icons/flags/4x3/lt.svg)}
.flag-icon-lv{background-image:url(../images/icons/flags/4x3/lv.svg)}
.flag-icon-ae{background-image:url(../images/icons/flags/4x3/ae.svg)}
.flag-icon-kr{background-image:url(../images/icons/flags/4x3/kr.svg)}
.flag-icon-gr{background-image:url(../images/icons/flags/4x3/gr.svg)}
.flag-icon-mk{background-image:url(../images/icons/flags/4x3/mk.svg)}
.flag-icon-il{background-image:url(../images/icons/flags/4x3/il.svg)}
.flag-icon-vn{background-image:url(../images/icons/flags/4x3/vn.svg)}
.flag-icon-ee{background-image:url(../images/icons/flags/4x3/ee.svg)}
.flag-icon-al{background-image:url(../images/icons/flags/4x3/al.svg)}

/* Bei neuen Länderversionen Länderkürzel aus Icon-Ordner raussuchen und hier hizufügen */

/*#############################################################################################################################*/
/*####################################### Seitenzahlanzeige ###################################################################*/
/*#############################################################################################################################*/

.files_pagination{ display: inline-block; width: 100%; }
.files_pagination_item{ float: left; margin: 3px; }


/*############################################################################################################################*/
/*########################################### Formular #######################################################################*/
/*############################################################################################################################*/

.formular_body{
    padding: 30px;
    overflow: auto;
    width: 90%;
    animation-name: animatetop;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
	position: relative;
	text-align: left;
    background-color: white;
}

.formular_modal_block_headline {
    margin-top: 70px;
    margin-bottom: 25px;
    margin-left: 5px;
    padding-bottom: 7px;
    float: left;
    width: fit-content;
    border-bottom: 3px solid;
    font-size: 25px;
    font-family: STEInfoWeb, Helvetica, Arial, sans-serif;
    line-height: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.formular_modal_headline_pfeil {
	font-size: 12px;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}

.formular_modal_block {
    width: 100%;
	position: relative;
	float: left;
}

.formular_modal_block_links {
    width: 50%;
    float: left;
    position: relative;
    padding-right: 2%;
}

.formular_modal_block_rechts {
    width: 50%;
    float: left;
    position: relative;
    padding-left: 2%;
}

.formular_modal_block_100 {
    width: 100%;
    float: left;
    position: relative;
}

.formular_modal_header {
    width: 100%;
	font-family: STEInfoWeb,Arial;
    font-size: 24px;
    margin-bottom: 25px;
    line-height: 28px;
}

.formular_modal_zeile {
    position: relative;
    padding: 10px 15px;
    width: 100%;
    min-height: 63px;
    float: left;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: 5px;
}

.formular_modal_label {
    width: 100%;
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: left;
    margin-top: -5px;
    margin-bottom: 5px;
}

.formular_modal_input_text {
    width: 100%;
    float: left;
    font-size: 20px;
    padding: 0px;
    background-color: unset;
}

.formular_modal_input_datum {
    width: 100%;
    float: left;
    font-size: 20px !important;
    padding: 0px;
    margin-top: -2px;
    margin-bottom: -4px;
}

.formular_modal_input_radio {
    float: left;
    margin-right: 30px;
    margin-bottom: -5px;
}

.formular_modal_input_radio_icon {
    float: left;
}

.formular_modal_input_radio_label {
    float: left;
    font-size: 20px;
}

.formular_modal_input_select {
    width: calc(100% - 40px);
    float: left;
    font-size: 20px;
    cursor: pointer;
}

.formular_input_select_box {
    width: 100%;
    cursor: pointer;
    float: left;
}

.formular_modal_box_input {    
    width: 100%;
    float: left;
}

.formular_dokument {
    width: calc(25% - 10px);
    border-radius: unset;
    border: solid 1px #dfdfdf;
}

.formular_pill{
    float: left;
    margin-left: 150px;
    width: calc(100% - 150px);
}

.formular_sel{
    display: inline-block;
    width:100%;
    margin: 8px 0px;
	position: relative;
    cursor:pointer;
    font-size: 15px!important;
    border: 1px solid lightgrey !important;
    border-radius: 3px;
}

.formular_sel_opt{
    display: none;
    float: left;
    margin-top: 48px;
    position: absolute;
    width: calc(100% - 30px);
    box-sizing: border-box;
    max-height: 225px;
    overflow-y: auto;
    z-index: 3;
    animation: 0.3s fadeIn;
    color: black;
    background-color: white;
    border: 1px solid lightgrey !important;
}

.formular_icon_opt_arrow_down{
    font-size: 30px;
    margin-top: -12px;
    float: right;
}

.formular_icon_opt_arrow_up{
    font-size: 30px;
    margin-top: -12px;
    float: right;
}

.formular_hinweistext {
    font-size: 15px !important;
    min-height: 190px;
    padding: 10px 0px;
    float: left;
    width: 100%;
    cursor: text;
    outline: 0px solid transparent;
}

.formular_select_box {
    width: 100%; 
    float:left; 
    margin-bottom: 30px;
    padding: 15px;
}

/*#############################################################################################################################*/
/*###################################### Anpassungen Responsive ###############################################################*/
/*#############################################################################################################################*/

@media (min-width:768px) {
    body { font-size: 14px; }

    .main-content {
        position: relative;
        -moz-transition: left .4s ease;
        -o-transition: left .4s ease;
        -webkit-transition: left .4s ease;
        /* transition: left .4s ease; das left uert zu einem greuen zwischeneffekt beim ausfahren der Sidebar Jan 10.04.24 */
        transition: .4s ease;
        left: 0;
    }
}

@media (min-width:1024px) {
    body { font-size: 16px; }
}

@media screen and (max-width: 1920px) {
    #Toolboxsuche_Rahmen {width: 90% !important; margin-left: 5% !important}
}

@media screen and (max-width: 1024px)  {
	.modal-body { margin-top: 40px !important; width: 80% !important;}
}

@media screen and (max-width: 900px) {
	.block_eingabe_links { width: 100% !important; margin: 0%; padding-bottom: 0px; padding-right: 4%}
	.block_eingabe_rechts { width: 100% !important; margin: 0%; padding-top: 0px; padding-left: 4%}

    .formular_modal_block_links{ width: 100%;  padding-right: unset }
    .formular_modal_block_rechts{ width: 100%; padding-left: unset }
	.block_eingabe_breite_100 { margin: 0%;}
    .Toolboxsuche_Kachel {width: calc(50% - 20px) !important;}
}

@media screen and (max-width: 768px) {

    .schaltplan_bild_zeile { display: block; }
    .schaltplan_kachel_33{ width: calc(100% - 20px) !important; }
    .schaltplan_label_code_100 { width: 100% !important; margin-bottom: 0px !important; margin-top:2px !important;}
	.schaltplan_label_rahmen { display: none !important; }
    .schaltplan_bild_100 { width: 100% !important;}
    .modal-body { margin-top: 0px !important; width: 90% !important; min-height: 600px;}
    .sel_custom_faq { width: calc(100% - 20px) !important;}
    .sel_opt_custom_faq { max-height: 334px;}
    #Block_Systemdaten_Rahmen_Button { display: none }

    #Systeminfo_Rahmen_Kachel_Artikel {display: block !important; margin-top: 50px;}
    .Systeminfo_Kachel_Artikel_50 {width: 100% !important;}
    .Systeminfo_Kachel_Artikel_33 {width: 100% !important;}
    .Systeminfo_Kachel_Artikel_25 {width: 100% !important;}
    .Systeminfo_Plus_Zeichen {width: 100% !important; margin-top: unset !important;  margin-bottom: 20px !important}

    .button_primary { width: 100%; margin: 10px 0px !important; padding: 15px; text-align: center; float: left !important;}
    .button_secondary { width: 100%; margin: 10px 0px !important; padding: 15px; text-align: center; float: left !important;}
    .button_funktion { width: 100%; margin: 10px 0px !important; padding: 15px; text-align: center; float: left !important;}
    .button_funktion_menu_rahmen { width: 100% !important;}

    .tabelle_techn_daten_button { width: 100%; text-align: center; }
    .tabelle_techn_daten_zeile_label { width: 100%; margin-bottom: 10px;}
    .tabelle_techn_daten_zeile_value { width: 100%;}
}

@media screen and (max-width: 670px) {

    #Header_Toolbox_Zeile_Top_Mobile { display: block !important; }
    #Header_Toolbox_Zeile_Top { display: none; }
    #Header_Toolbox_Sidebar { margin-left: 100%; width: 100% !important; height: 100%; }
    #Header_Logo_Sidebar { display: none !important;}
    #Header_Toolbox_Sidebar_Mobile_Close { display: block !important; }
    #Header_Toolbox_Sidebar_Buttons_Expand { display: none !important; }
    #Header_Toolbox_Sidebar_Block_Buttons_Top { width: 100% !important;}
    .header_toolbox_sidebar_kachel { justify-content: unset;}
    .header_toolbox_sidebar_label { font-size: 20px; display: block !important; }
    #Rahmen_Footer_Toolbox { width: 100% !important; left: 0px !important; }

	#Header_Leiste_Breadcrumb {display: none !important;}
	#Header_Rahmen_Icon_Angemeldet {display:none !important;}
    #Header_Rahmen_Icon_Home {display: block !important;}
    /* #Header_Rahmen_Icon_Projekte {display: none !important;} */
    #Header_Rahmen_Icon_News {display: none !important;}
    #Header_Rahmen_Icon_Favoriten {display: none !important;}
	#Header_Leiste_Buttons {width: unset;}
    #Header_Label_Anmelden {display: none !important;}
    #Container_Header_Navigation {max-width: 300px; padding-left: 20px; top: 0px; max-height: 82vh;}
    #Header_Navigation_Close {margin-left: -10px}
    #Header_Navigation_Tools {width: calc(100% - 40px); margin-bottom: 30px;}
    #Header_Navigation_Dokumente {width: calc(100% - 40px); margin-bottom: 30px;}
    #Header_Navigation_Persoenlich {width: calc(100% - 40px);}
    .header_toolbox_menu_rahmen { width: 100% !important; right: 0px; top: 60px !important; bottom: 0px;}
	.Toolboxsuche_btn_Kategorie { width: calc(100% - 40px); }
	.Toolboxsuche_Zeile_Kacheln {display:block !important;}
    .toolboxsuche_suchverlauf_spalte { width: 100%; }
    #Header_Profilbild_Angemeldet { margin-left: calc(50% - 13px); }

	.header_icon_zeile_1 { font-size: 33px !important; margin-top: -5px;}

	#Header_Seite_Navigation {top: 135px !important; z-index: 998 !important;}  /* Nur 'Bitte warten' Modal hat 999 */
	.nav_leiste_label_ergebnis {display: none !important }
    .system_tabelle_body {padding: 20px !important;}
    .artikeldetails_pic_rahmen { width: 100% !important; padding: 10px !important;}
    .artikeldetails_headline {width: 100% !important; text-align:center !important;}
    .artikeldetails_breadcrumb {width: 100% !important; text-align:center !important;}
    .artikeldetails_label_1 {display: none !important;}
    .installationsvideo_rahmen { width: 100% !important; margin-bottom: 40px !important; }

    .stueckliste_edit_container { left: 0px !important; width: 100% !important; }
    .stueckliste_tabelle_zeile_rahmen { width: 100%; margin-left: 0px; }
    .stueckliste_tabelle_zeile_pic_rahmen { width: 100% !important; height: 120px !important}
    .stueckliste_tabelle_zeile_label_1 {width: 100% !important; text-align:center !important;}
    .stueckliste_tabelle_zeile_label_2 {width: 100% !important; text-align:center !important;}
    .stueckliste_tabelle_zeile_label_3 {display: none;}
    .stueckliste_tabelle_zeile_label_4 {width: 100%!important; text-align:center !important; padding: 0px !important;}
    .stueckliste_tabelle_zeile_label_4_optional {margin-top: -10px; margin-bottom: 15px;}
    .stueckliste_tabelle_summe_anzahl {display: none;}
    .stueckliste_tabelle_headline_icon_thumbnail {display: none;}
    .kachel_docs_rahmen_pic { width: 100% !important;}
    .kachel_docs_label_1 {width: 100% !important; text-align:center !important; margin: 0px !important; padding: 10px !important}
    .kachel_docs_label_2 {width: 100% !important; text-align:center !important; margin: 0px !important; padding: 10px !important}
    .Toolboxsuche_Kachel {width: calc(100% - 20px) !important;}
    .Menu_Apps_Rahmen {width: 100%; margin: 0px; text-align: left; padding: 15px 30px; height: fit-content;}
    .Icon-Laenderauswahl {float: left; margin-top: 5px}
    .Menu_Apps_Name {margin-top: 7px; margin-left: 50px; font-size: 22px;}
    #Header_Seite_Navigation {display: none !important; width: 100%; margin-left: 0px; margin-top: -75px; padding: 15px; box-shadow: 0px 3px 4px 1px gainsboro; }
	.NavLeiste {width: 100%; padding-top: 20px !important; height: 60px; text-align: center; font-size: 20px;}
    /* #Nav_Buttons_Navigation_Rahmen {display: none;} */
	#NavLeisteSchritt {width: 100%; padding: 0px !important;}
	.nav_leiste_markierung_gewaehlt {border-bottom: 1px solid transparent !important;}
    #Homepage_Login_Iframe {width: 100%; height: 500px; margin-left: 15px;}
    .button_auswahl_kategorie {width: calc(100% - 26px) !important; padding: 25px !important; margin: 0px !important; float: left; display: block !important;}
    .sel_drag_drop_area_itml { width: 100%; margin-bottom: 20px; }
    .Systeminfo_Artikel_Bullets_Rahmen { display: none; }
    .kachel_dublettencheck { width: calc(100% - 10px) }
    .toolbox_dashboard_button { float: left !important; font-size: 20px; width: calc(100% - 80px); margin: 10px 40px; border: none; }

    .main-content { padding-bottom: 350px; padding-top: 100px; padding-left: 10px; padding-right: 10px; margin: 0px; width: 100%; }
    .footer_button {width: 100%; margin: 0px; padding: 8px; text-align: center; font-size: 17px; height: 30px;}
	#Footer_Icon_Land{display: none;}
	.icon_footer_social_media { font-size: 26px; width: calc(25% - 30px); text-align: center;  margin: 15px; }
    .button_mit_icon_rahmen {margin: 5px 0px;}
    .button_mit_icon_rahmen_large {margin: 5px 0px !important;}
    .button_mit_icon_icon {display: none !important;}
    .button_mit_icon_label { float: unset; padding: 0px; }

    .kachel_webshop_headline_rahmen { margin-top: 30px; }
    .kachel_webshop_headline_icon { width: 120px; padding: 10px; text-align: center;}
    .kachel_webshop_headline_label_1 { width: calc(100% - 120px); text-align: center; padding: 20px 10px; }
    .kachel_webshop_headline_label_2L {width: 100%; text-align: center; margin-top: 20px; }
    .kachel_webshop_block_rahmen {width: 100%; margin-bottom: 25px; }
    .stueckliste_tabelle_zeile_label_4_optional_green { display: none; }

    .overlay_rahmen { padding: 0px; }
    .overlay_viewport { width: 100%; }
}