:root { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-black: #000; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-primary-rgb: 13, 110, 253; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-white-rgb: 255, 255, 255; --bs-black-rgb: 0, 0, 0; --bs-body-color-rgb: 33, 37, 41; --bs-body-bg-rgb: 255, 255, 255; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1.2rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #212529; --bs-body-bg: #ffffff; --bs5-phos-footer-bg: #333333; --bs-border-width: 1px; --bs-border-style: solid; /*--bs-border-color: #dee2e6;*/ --bs-border-color: #627785; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-2xl: 2rem; --bs-border-radius-pill: 50rem; --bs-heading-color: ; --bs-link-color: #0d6efd; --bs-link-hover-color: #0a58ca; --bs-code-color: #d63384; --bs-highlight-bg: #fff3cd; /* Rot-Ton: RGB 254, 124, 124 Hex: #fe7c7c; */ --bs-phos-farbe-rot: #fe7c7c; --bs-phos-farbe_hg1: #ADABA2; --bs-phos-farbe_hg2: #C8CFC7; --bs-phos-farbe_hg3: #DADEBD; /* --bs-phos-farbe_hg4: #627785; */ --bs-phos-farbe_hg4: #222529; --bs-phos-farbe_hg5: #a5b2b9; --bs-phos-farbe_hg6: #b9b594; --bs-phos-farbe_hg7: #d9d7c5; /* rgba(214,212,214,1); Hellgaru*/ --phos-bordercolor: rgba(184,183,186,1); /* Accordeon */ } .dropdown-menu { --bs-dropdown-min-width: 10rem; --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0.5rem; --bs-dropdown-spacer: 0.125rem; --bs-dropdown-font-size: 1rem; --bs-dropdown-color: #212529; --bs-dropdown-bg: #fff; --bs-dropdown-border-color: var(--bs-border-color-translucent); --bs-dropdown-border-radius: 0rem; --bs-dropdown-border-width: 1px; --bs-dropdown-inner-border-radius: calc(0.375rem - 1px); --bs-dropdown-divider-bg: var(--bs-border-color-translucent); --bs-dropdown-divider-margin-y: 0.5rem; --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-dropdown-link-color: #212529; --bs-dropdown-link-hover-color: #1e2125; --bs-dropdown-link-hover-bg: #e9ecef; --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: #0d6efd; --bs-dropdown-link-disabled-color: #adb5bd; --bs-dropdown-item-padding-x: 1rem; --bs-dropdown-item-padding-y: 0.25rem; --bs-dropdown-header-color: #6c757d; --bs-dropdown-header-padding-x: 1rem; --bs-dropdown-header-padding-y: 0.5rem; position: absolute; z-index: 1000; display: none; min-width: var(--bs-dropdown-min-width); padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); margin: 0; font-size: var(--bs-dropdown-font-size); color: var(--bs-dropdown-color); text-align: left; list-style: none; background-color: var(--bs-dropdown-bg); background-clip: padding-box; border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color); border-radius: var(--bs-dropdown-border-radius); } .tooltip { --bs-tooltip-zindex: 1080; --bs-tooltip-max-width: 200px; --bs-tooltip-padding-x: 0.5rem; --bs-tooltip-padding-y: 0.25rem; --bs-tooltip-margin: ; --bs-tooltip-font-size: 0.875rem; --bs-tooltip-color: #fff; --bs-tooltip-bg: #333; --bs-tooltip-border-radius: 0.375rem; --bs-tooltip-opacity: 0.9; --bs-tooltip-arrow-width: 0.8rem; --bs-tooltip-arrow-height: 0.4rem; z-index: var(--bs-tooltip-zindex); display: block; padding: var(--bs-tooltip-arrow-height); margin: var(--bs-tooltip-margin); font-family: var(--bs-font-sans-serif); font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; white-space: normal; word-spacing: normal; line-break: auto; font-size: var(--bs-tooltip-font-size); word-wrap: break-word; opacity: 0; } .accordion { --bs-accordion-color: var(--bs-body-color); --bs-accordion-bg: var(--bs-body-bg); --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease; --bs-accordion-border-color: var(--bs-border-color); --bs-accordion-border-width: var(--bs-border-width); --bs-accordion-border-radius: var(--bs-border-radius); --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); --bs-accordion-btn-padding-x: 1.25rem; --bs-accordion-btn-padding-y: 1rem; --bs-accordion-btn-color: var(--bs-body-color); --bs-accordion-btn-bg: var(--bs-accordion-bg); --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-icon-width: 1.25rem; --bs-accordion-btn-icon-transform: rotate(-180deg); --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out; --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a58ca'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-focus-border-color:#FFFFFF; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-body-padding-x: 1.25rem; --bs-accordion-body-padding-y: 1rem; --bs-accordion-active-color: var(--bs-primary-text); --bs-accordion-active-bg: #FFFFFF; } body{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: var(--bs-body-font-size); font-weight: 400; line-height: 1.5; color: #212529; text-align: left; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: var(--bs-phos-farbe_hg4); } .phos-img-h1, span.headline-bild{ font-size: 9vw; font-weight: 400; } @media (min-width: 576px) { .phos-img-h1, span.headline-bild{ font-size: 8vw; font-weight: 400; } } @media (min-width: 768px) { .phos-img-h1, span.headline-bild{ font-size: 8vw; font-weight: 400; } } @media (min-width: 992px) { .phos-img-h1, span.headline-bild{ font-size: 7vw; font-weight: 400; } } @media (min-width: 1200px) { .phos-img-h1, span.headline-bild{ font-size: 6vw; font-weight: 400; } } @media (min-width: 1400px) { .phos-img-h1, span.headline-bild{ font-size: 5vw; font-weight: 400; } } .startDisplayList a{ font-size: 1.6rem; text-decoration: none; border-bottom: solid 1px #FFF; padding-bottom: 4px; margin-right: 20px; } .masthead { height: 100vh; min-height: 500px; background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080'); background-size: cover; background-position: center; background-repeat: no-repeat; } .btn-phos-outline-01 { --bs-btn-color: #333333; --bs-btn-border-color: #333333; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #000000; --bs-btn-focus-shadow-rgb: 108, 117, 125; --bs-btn-active-color: #fff; --bs-btn-active-bg: #000000; --bs-btn-active-border-color: #000000; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #000000; --bs-btn-disabled-bg: transparent; --bs-gradient: none; margin-top: 10px; } .hg-txt-grey{color:#333333; background-color: rgb(214,212,214);} .hg-txt-creme{color:#000000; background-color: rgb(237,235,239);} .text-bg_phos_farbe01 { color: #000 !important; background-color: var(--bs-phos-farbe_hg2) !important; } .text-bg_phos_farbe02 { color: #000 !important; background-color: var(--bs-phos-farbe_hg6) !important; } .text-bg_phos_farbe03 { color: #000 !important; background-color: var(--bs-phos-farbe_hg3) !important; } .text-bg_phos_farbe04 { color: #000 !important; background-color: var(--bs-phos-farbe_hg5) !important; } .text-bg_phos_farbe05 { color: #000 !important; background-color: var(--bs-phos-farbe_hg4) !important; } .text-bg_phos_farbe06 { color: #000 !important; background-color: var(--bs-phos-farbe_hg1) !important; } .phos-border { border: var(--bs-border-width) var(--bs-border-style) var(--phos-bordercolor) !important; } a { color: var(--bs-gray); } a.a-white { color: var(--bs-white); } a.a-black { color: var(--bs-black); } a:hover, a:hover.a-white { color: var(--bs-phos-farbe-rot); } .phos-bg-rot{ background-color: var(--bs-phos-farbe-rot); } .phos-txt-rot{ color: var(--bs-phos-farbe-rot); } .dropdown-item.active, .dropdown-item:active { color: var(--bs-dropdown-link-active-color); text-decoration: none; background-color: var(--bs-phos-farbe-rot); } /* IMG GRAUSTUVE */ .imggruastufe { filter: grayscale(100%); /* Standard */ -webkit-filter: grayscale(100%); /* Webkit */ filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Old WebKit */ } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { } /* X-Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { } /* XX-Large devices (larger desktops, 1400px and up) */ @media (min-width: 1400px) { } /* PRODUKTE -- PRODUKTE */ .produkt-hgimg-1 {background-image: url("../COVER/Duschvorhangstange_geklebt_Handtuchhalter_Bad_Edelstahl-PHOS_gr02.jpg"); min-height: 70%; background-position: center; filter: brightness(80%); } .produkt-hgimg-2 {background-image: url("../COVER/Duschvorhangstange_Gerade_Nische_Rohr_Edelstahl_PHOS_DSRN20_kld01.jpg"); min-height: 400px; } .produkt-hgimg-3 {background-image: url("../COVER/Schreibtisch_Melamin_Weiss_Karlsruher-Tisch_PHOS_KATI-S1-140x60-MW_G17-800_kld01.jpg"); min-height: 400px; } .produkt-hgimg-4 {background-image: url("../VORHANGSTANGE/dtd_durchschleudertraeger_edelstahl_kld.jpg"); min-height: 400px; } .produkt-hgimg-5 {background-image: url("../COVER/Bridal_Boutique_Baden-Baden_Garderobe_Rollwagen_Edelstahl_Phos_4.jpg"); min-height: 400px; } .produkt-hgimg-6 {background-image: url("../COVER/Garderobe_Oeffentlich_Eingangsbereich_Toiletten_Edelstahl-PHOS_01-1.jpg"); min-height: 400px; } /* FOOTER ------------------------------- */ #sitefooter{background: #FFFFFF;} #sitefooter h2 {font-size: 20px;} #sitefooter, #sitefooter li, #sitefooter h1, #sitefooter h2, #sitefooter h3, #sitefooter p, #sitefooter table td { } .Footer_1_BlockLinks, .Footer_1_BlockMitte, .Footer_1_BlockRechts, .Footer_2_BlockLinks, .Footer_2_BlockMitte, .Footer_2_BlockRechts{border-right: none;} @media (min-width:992px){ .Footer_1_BlockLinks{border-right:solid 1px #666;} .Footer_1_BlockMitte{border-right: none;} .Footer_1_BlockRechts{border-right:solid 1px #666;} .Footer_2_BlockLinks{border-right: none;} .Footer_2_BlockMitte{border-right:solid 1px #666;} .Footer_2_BlockRechts{border-right: none;} } @media (min-width:1200px){ .Footer_1_BlockLinks{border-right:solid 1px #666;} .Footer_1_BlockMitte{border-right:solid 1px #666;} .Footer_1_BlockRechts{border-right: none;} .Footer_2_BlockLinks{border-right:solid 1px #666;} .Footer_2_BlockMitte{border-right:solid 1px #666;} .Footer_2_BlockRechts{border-right: none;} } /* tiny slider */ .tiny-slider-container { position: relative; margin-top: 3%; } .control { list-style: none; } .control li { position: absolute; z-index: 99; top: 50%; color: white; padding: 20px 20px; cursor: pointer; filter: invert(1) grayscale(100); } .control li:hover { opacity: 0.5; } .control li.prev { left: -10px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .control li.next { right: -10px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .tns-nav { text-align: center; margin-top: 15px; margin-bottom: 15px; } .tns-nav button { height: 13px; width: 8px; background-color: #a5a5a5; border: none; margin-left: 7px; border-radius: 50%; } .img-zoom{ -ms-transform:scale(1.5); /* IE 9 */ -moz-transform:scale(1.5); /* Firefox */ -webkit-transform:scale(1.5); /* Safari and Chrome */ -o-transform:scale(1.5); /* Opera */ transform:scale(1.5); } .figure-caption { font-size: .9em; color: var(--bs-gray-700); padding-top: 0.5rem; } .figure-caption + a.btn{ margin-top: 10px; } .card-title{ margin-top: -12px; color: var(--bs-gray-700); } /* +++++ dynamic Tab +++++ */ #tabService li { margin-right: 30px; } #tabService a.nav-link { color: #333333; padding-right: 0px; } #tabService a.nav-link.active{ color: #fe7c7c; text-decoration: none; border-bottom: 1px solid #fe7c7c!important; padding-bottom: 5px; } .tab-content div.tab-pane{ padding: 50px 0px; } .phos-img-filter{ /*filter: sepia(30%);*/ /*filter: saturate(50%);*/ filter: grayscale(60%); } #btn-back-to-top { position: fixed; bottom: 20px; right: 20px; display: none; } /* collaps-Text */ .klapp-link{display: inline;} .klapp-container .klapp-text .remaining-text {display: none; } .klapp-container .klapp-link {color: var(--bs-phos-farbe-rot); cursor: pointer; } .klapp-txt p.lead {margin-bottom: 0rem; } /* Katalog-Cover */ .katalogcover{ width:155px !important; height:220px !important; border: 1px solid #EEE; } /* Kontakt über Footer - color change */ .color-change{ background-color: #79726a; color: #FFFFFF; transition: background-color 1s; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .color-change h2{color: #FFFFFF;} .color-change.active{ background-color: #FFFFFF; color: #000000; } .color-change.active h2{color: #000000;} .wabberbutton{ outline: 0.1rem solid #fff; padding: 0.45rem 1.2rem; border-radius: 0.2rem; color: #FFFFFF; text-decoration: none; font-size: 2rem; font-weight: 300; padding: 0.45rem 1.2rem; transition: 0.2s ease-in-out; animation: smooth 1s ease infinite; } @keyframes smooth { 0% { outline-offset: 0rem; } 50% { outline-offset: 0.2rem; } 100% { outline-offset: 0rem; } } /* Flexbox 5 Bilder in Reihe */ .custom-flex-container { display: flex; flex-wrap: wrap; gap: 0; margin-left: -15px; margin-right: -15px; overflow: hidden; } .custom-flex-item { flex: 0 0 auto; padding: 0; box-sizing: border-box; position: relative; } .custom-flex-item img { width: 100%; height: auto; object-fit: cover; } .image-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 15%; background-color: rgba(255, 255, 255, 0.5); padding: 10px; box-sizing: border-box; display: flex; align-items: flex-end; } .image-overlay .image-title { color: #000; font-weight: bold; margin-bottom: 5px; } .headline-bild { transition: background-color 1.5s ease; } .modal-dialog.fullhigt { height: 90%; } .modal-content.fullhigt { height: 100%; } iframe { margin: 0; padding: 0; border: none; overflow: hidden; width: 100%; height: 100%; } .form-label { margin-bottom: 0.5rem; margin-top: 1rem; } .navbar{ --bs-navbar-brand-padding-y: 0; } nav.navbar-top { padding: 0px; background-color: rgba(255,255,255,0.8); } ul.navbar-nav { padding-bottom: 10px; } @media (max-width: 992px) { nav.navbar-top { background-color: rgba(255,255,255,1); } } @media (max-width: 768px) { .card.phos-prod-list .card-title{ font-size: 1.1rem; } .startDisplayList .phos-prod-list{ font-size: 1.1rem; } } .card.phos-prod-list .card-body{ padding: var(--bs-card-spacer-y) 0px; } /* Kundenmeinung Slider */ .carousel-indicators.kundenslider{ bottom: -30px; } /* fs-Lightbox caption */ .fslightboxci { font-size: 1.2rem !important; } .carousel-control-prev.outside-prev, .carousel-control-next.outside-next { width: auto; position: absolute; top: 50%; transform: translateY(-50%); } .carousel-control-prev.outside-prev { left: -10%; } .carousel-control-next.outside-next { right: -10%; } .media_img{ width: 100%; height: auto; object-fit: cover; } .sprungmarke-anker{ margin-top: -90px; } .video_icon { position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .video_icon img{ width: 5rem; opacity: 1; transition: all 0.3s ease; } .video_icon img:hover { opacity: 0.8; scale: 1.05; } .lupe_icon { position: absolute; top: 5px; left: 5px; width: 10%; height: 10%; background-repeat: no-repeat; background-size: contain; } .lupe_weiss { background-image: url("/img/lupe_weiss.png"); } .lupe_schwarz { background-image: url("/img/lupe_schwarz.png"); } .img_container { position: relative; width: 100%; height: 100%; } .img-max-200{ max-width: 200px; } .phos-linkliste a.list-group-item{ color: var(--bs-gray-600); border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-left: 0px !important; /* font-size: 1rem; */ } .phos-linkliste a.list-group-item:hover{ color: var(--bs-gray-900); } a span.produktinfo::before{ content: url('../img/bootstrap-icons/file-earmark-text.svg'); } a:hover span.produktinfo::before, a:active span.produktinfo::before{ content: url('../img/bootstrap-icons/file-earmark-text-w.svg'); }