/*************************************************************************************************** *** General Styles ***************************************************************************************************/ /*** Fonts ***/ @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-v20-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-v20-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /*** System-Änderungen ***/ :root { --bs-body-font-size: 18px; } ::selection { background: var(--bs-primary); color: rgb(255, 255, 255); text-shadow: none; } :active, :focus, :focus-within { outline: none !important; } ::marker { font-weight: 700; } input::placeholder { font-size: 1rem; } a[type=button] { appearance: none; } /* Link mit button-Attribut nicht als System-Element rendern */ a { font-weight: 400; transition: all 0.2s ease; } b, strong { font-weight: 500; } * p:last-child { margin-bottom: 0; } /* Letzten Absatz OHNE margin-bottom */ /*** Bootstrap-Ergänzungen ***/ .bg-primary *:not(.bg-white) { color: rgb(255, 255, 255); } /***.bg-primary-1 { background-color: rgba(222, 225, 230, 1); } .bg-primary-2 { background-color: rgba(var(--bs-primary-rgb), 0.3); font-weight: 400; } .bg-secondary-1 { background-color: rgba(var(--bs-secondary-rgb), 0.10); } .bg-secondary-2 { background-color: rgba(var(--bs-secondary-rgb), 0.5); } .bg-lighter { background-color: rgba(255, 255, 255, 0.5); } .bg-darker { background-color: rgba(0, 0, 0, 0.1); } .dropdown-toggle::after { vertical-align: top; content: "\25BE"; border: none; font-family: 'Ubuntu'; margin: 0 0 0 0.25rem; line-height: 0; vertical-align: unset; } ***/ /* Dropdown-Caret ändern */ /*** Container-Verengungen => nur für Desktop ***/ @media(min-width: 992px){ .narrow-50 { max-width: 50%; margin: 0 auto; } .narrow-66 { max-width: 66%; margin: 0 auto; } .narrow-75 { max-width: 75%; margin: 0 auto; } .narrow-90 { max-width: 90%; margin: 0 auto; } } /*** Checkbox + Radio Switch ***/ .form-check-group { margin-bottom: 3rem; } .form-check-group label.control-label, span.control-label:has(+ .form-check-group) { font-size: 1rem; font-weight: 500; color: rgb(255, 255, 255); margin-bottom: 1rem; } span.control-label + .form-check-group > label.control-label { font-weight: 400; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); } .form-check-group .checkbox, .form-check-group .radio { --switch-size: 10px; --switch-width: calc(var(--switch-size) * 3.5); --switch-height: calc(var(--switch-size) * 2); display: block; width: 100%; } .form-check-group .checkbox input[type="checkbox"], .form-check-group .radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .form-check-group .checkbox label, .form-check-group .radio label { position: relative; display: grid; grid-template-columns: var(--switch-width) minmax(0, 1fr); column-gap: 0.75rem; align-items: start; width: 100%; max-width: 100%; height: auto; cursor: pointer; margin-bottom: 0.5rem; color: rgb(255, 255, 255); } .form-check-group .checkbox .form-helper, .form-check-group .radio .form-helper { position: relative; display: block; width: var(--switch-width); height: var(--switch-height); background-color: #fff; border: 1px solid #adb5bd; border-radius: 999px; transition: 0.4s; grid-column: 1; grid-row: 1; margin-top: 4px; } .form-check-group .checkbox .form-helper::before, .form-check-group .radio .form-helper::before { position: absolute; content: ""; width: calc(var(--switch-size) * 1.4); height: calc(var(--switch-size) * 1.4); left: calc(var(--switch-size) * 0.27); bottom: calc(var(--switch-size) * 0.2); border-radius: 999px; background-color: #adb5bd; transition: 0.4s;} .form-check-group .checkbox .checkbox-text, .form-check-group .radio .radio-text { grid-column: 2; grid-row: 1; display: block; min-width: 0; max-width: none; line-height: 1.35; } .form-check-group .checkbox input:checked + .form-helper, .form-check-group .radio input:checked + .form-helper { background-color: rgb(var(--bs-success-rgb)); border-color: rgb(var(--bs-success-rgb)); } .form-check-group .checkbox input:focus-visible + .form-helper, .form-check-group .radio input:focus-visible + .form-helper { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .form-check-group .checkbox input:checked + .form-helper::before, .form-check-group .radio input:checked + .form-helper::before { transform: translateX(calc(var(--switch-size) * 1.4)); background-color: #fff; } /*************************************************************************************************** *** Allgemeine Elemente ***************************************************************************************************/ html, body { width: 100%; margin: 0; padding: 0; scroll-behavior: smooth; overscroll-behavior-y: none; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); scroll-padding-top: 87px; /* height of fixed header */ } body { position: relative; height: 100%; -ms-word-wrap: break-word; word-wrap: break-word; } .alert ul { list-style-type: none; margin: 0; padding: 1rem 2rem; text-align: center; } .alert ul li { margin: 0 !important; padding: 0; font-weight: 500; } /*** Aufflackern der Mobile-Navigation beim Pageload vermeiden... ***/ #mobile-menu:not(.mm-menu) { display: none; } /*** Link-Buttons ***/ a.btn { font-weight: 500; box-shadow: 0.25rem 0.25rem rgb(var(--bs-primary-rgb)); } a.btn.bg-primary { background-color: rgb(var(--bs-primary-rgb)); color: rgb(255, 255, 255); box-shadow: 0.25rem 0.25rem rgb(var(--bs-tertiary-rgb)); } a.btn.bg-secondary { background-color: rgb(var(--bs-primary-rgb)); color: rgb(255, 255, 255); box-shadow: 0.25rem 0.25rem rgb(var(--bs-primary-rgb)); } /*** Link-Buttons => Icon ***/ a.btn img.icon { height: 1.1em; margin-right: 0.375rem; vertical-align: sub; } a.btn.bg-primary img.icon { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg) brightness(108%) contrast(102%); } a.btn.bg-secondary img.icon { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg) brightness(108%) contrast(102%); } /*** Link-Buttons => Anpassungen für Hintergrundfarben **/ .bg-primary a.btn { box-shadow: 0.25rem 0.25rem rgb(255, 255, 255); } .bg-primary a.btn.bg-tertiary { color: rgb(0, 0, 0); } .bg-primary a.btn.bg-white { color: rgb(0, 0, 0); box-shadow: 0.25rem 0.25rem rgb(var(--bs-tertiary-rgb)); } .bg-primary a.btn img.icon { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg) brightness(108%) contrast(102%); } .bg-primary a.btn.bg-tertiary img.icon {filter: none; } .bg-primary a.btn.bg-white img.icon {filter: none; } /*** Sprechblasen ***/ .bubble { position: absolute; top: -65px; right: 2.5%; width: 50vw; perspective: 75px; } .box-text { background-color: rgba(255, 255, 255, 0.8); font-size: 1.5rem; font-weight: 400; padding: 4rem; } @media(min-width: 576px){ .bubble { width: 40vw; top: -7.5%; } } @media(min-width: 768px){ .bubble { width: 30vw; top: -7.5%; } } @media(min-width: 1200px){ .bubble { width: 15vw; top: -7.5%; } } .bubble img { transform: rotateY(-2.5deg) skewY(-2.5deg); transform-style: preserve-3d; } footer .bubble { top: -200px; /*left: 95%;*/ width: 180px; z-index: 2;} #osm_map { z-index: 1; } /* wichtig, damit Footer-Sprechblase auf Startseite darüber liegt */ /*** Liste mit vorangestellten und individuellen Icons ***/ ul.icons { list-style-type: none; padding: 0; font-size: 1.25rem; font-weight: 700; } ul.icons li { position: relative; padding-bottom: 1.5rem; } ul.icons li div.textlines { line-height: 1.2; } ul.icons li div.subline { font-size: 1rem; font-weight: 400; color: rgba(0, 0, 0, 0.5); line-height: 1; margin-top: 0.5rem; } .bg-primary ul.icons li div.subline { color: rgba(255, 255, 255, 0.5); } @media(min-width: 768px){ ul.icons li div.subline { font-size: 1.25rem; } } @media(min-width: 1200px){ ul.icons li div.textlines { line-height: 40px; } ul.icons li div.subline { line-height: 1.5; margin-top: 0; } } @media(min-width: 576px){ ul.icons { font-size: 1.5rem; } } @media(min-width: 9999px){ ul.icons { font-size: 1.75rem; } } ul.icons img { filter: invert(22%) sepia(27%) saturate(5253%) hue-rotate(192deg) brightness(92%) contrast(101%); padding-right: 1rem; vertical-align: text-bottom; align-self: center; width: 100px; height: auto; } @media(min-width: 576px){ ul.icons img { width: unset; height: 40px; } } .bg-primary ul.icons img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg) brightness(108%) contrast(102%); } ul.icons li::after { content: ''; position: absolute; bottom: 0.5rem; left: 0; width: 100%; border-top: 1px solid var(--bs-secondary); } ul.icons li:last-child:after { border: 0; } /*** Abstände Überschriften nach Absätzen oder Listen ***/ p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6, ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 { margin-top: 3rem; } /*** Abstände Absätze oder Listen nach Überschriften ***/ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul, h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol { margin-top: 3rem; } /*************************************************************************************************** *** Fragment: section.phpµ ***************************************************************************************************/ section:last-child:not(.px-0), section:last-child:not(.osm, .px-0){ margin-bottom: 6rem; } section ul, section ol { padding-left: 1.5rem; } section ul li, section ol li { margin-bottom: 0.5rem; } section ul li:last-child, section ol li:last-child { margin-bottom: 2rem; } .ptzero { padding-top: 0 !important; } .ptsm { padding-top: 2rem !important; } .pt { padding-top: 4rem !important; } .ptxl { padding-top: 6rem !important; } .pbzero { padding-bottom: 0 !important; } .pbsm { padding-bottom: 2rem !important; } .pb { padding-bottom: 4rem !important; } .pbxl { padding-bottom: 6rem !important; } .mtzero { margin-top: 0 !important; } .mtsm { margin-top: 2rem !important; } .mt { margin-top: 4rem !important; } .mtxl { margin-top: 6rem !important; } .mbzero { margin-bottom: 0 !important; } .mbsm { margin-bottom: 2rem !important; } .mb { margin-bottom: 4rem !important; } .mbxl { margin-bottom: 6rem !important; } @media(min-width: 576px){ .ptzero { padding-top: 0 !important; } .ptsm { padding-top: 2rem !important; } .pt { padding-top: 4rem !important; } .ptxl { padding-top: 6rem !important; } .pbzero { padding-bottom: 0 !important; } .pbsm { padding-bottom: 2rem !important; } .pb { padding-bottom: 4rem !important; } .pbxl { padding-bottom: 6rem !important; } .mtzero { margin-top: 0 !important; } .mtsm { margin-top: 2rem !important; } .mt { margin-top: 4rem !important; } .mtxl { margin-top: 6rem !important; } .mbzero { margin-bottom: 0 !important; } .mbsm { margin-bottom: 2rem !important; } .mb { margin-bottom: 4rem !important; } .mbxl { margin-bottom: 6rem !important; } .parallaxe.ptxl { padding-top: 12rem !important; } .parallaxe.pbxl { padding-bottom: 12rem !important; } } /*** Section-Hintergrundbild (Parallaxe) ***/ .parallaxe { position: relative; background-attachment: fixed; z-index: 0; } /*.parallaxe::before { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: multiply; background-color: rgba(255, 255, 255, 0.75); z-index: -1; }*/ .parallaxe[class*=bg-primary]::before { background-color: rgb(var(--bs-primary-rgb)); } .parallaxe[class*=bg-secondary]::before { background-color: rgb(var(--bs-secondary-rgb)); } .parallaxe[class*=bg-tertiary]::before { mix-blend-mode: color; background-color: rgb(var(--bs-tertiary-rgb)); } .parallaxe.bg-primary *:not(.bg-white), .parallaxe.bg-tertiary *:not(.bg-white) { color: rgb(255, 255, 255); } /*.jarallax-img { filter: grayscale(100%); }*/ /*************************************************************************************************** *** Header inkl. Navigation ***************************************************************************************************/ header { width: 90%; left: 50%; transform: translateX(-50%); top: 1.5rem; z-index: 999; border-bottom: 0.75rem solid rgb(var(--bs-primary-rgb)); transition: all 0.2s ease; } header nav { height: 100px; text-transform: uppercase; } header nav a.navbar-brand { padding: 1rem 0; } header nav a.navbar-brand img { width: 150px; } @media(min-width: 360px){ header nav a.navbar-brand img { width: 200px; } } @media(min-width: 768px){ header nav a.navbar-brand img { width: 250px; } } header nav #main-menu { margin: 0; list-style-type: none; height: 100%; } header nav #main-menu .nav-link { font-size: 1.125rem; font-weight: 700; color: rgb(var(--bs-primary-rgb)); } /* header nav #main-menu + a.bg-primary { margin-right: 2rem ; } Button "Angebot anfragen" => korrespondierend zu padding in header nav a.navbar-brand */ /*** Aktivanzeige ***/ header nav #main-menu .nav-item.active { position: relative; background-color: rgba(var(--bs-tertiary-rgb), 0.15); } header nav #main-menu .nav-item.active .nav-link::after { content: ''; position: absolute; left: 0; bottom: -0.75rem; width: 100%; border-bottom: 0.75rem solid rgb(var(--bs-tertiary-rgb)); } /*** Button: Angebot anfragen ***/ header .request-offer { display: none; } @media(min-width: 640px){ header .request-offer { display: block; margin-right: 5rem; } } @media(min-width: 1600px){ header .request-offer { margin-right: 0; } } /*** Navigation (mobil) ***/ header .main-menu-toggler { width: 50px; height: 50px; top: 25px; right: 0; border: 0; border-radius: 0; font-size: 1.25rem; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6ICQkJC9HZW5lcmFsU3RyLzE5Nj1BZG9iZSBJbGx1c3RyYXRvciAyNy42LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIgoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzAwNTA5Njt9Cgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjkuNzk4NDtzdHJva2UtbGluZWNhcDpzcXVhcmU7c3Ryb2tlLW1pdGVybGltaXQ6MTAyLjQ7fQo8L3N0eWxlPgo8cmVjdCBjbGFzcz0ic3QwIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTA4LjUsMTc0LjFoMjk1IE0xMDguNSwyNTZoMjk1IE0xMDguNSwzMzcuOWgyOTUiLz4KPC9zdmc+Cg=="); background-repeat: no-repeat; margin-right: 0.75rem; } .mm-menu { --mm-color-background: var(--bs-primary); --mm-color-text: rgb(255, 255, 255); --mm-color-button: rgb(255, 255, 255); --mm-color-text-dimmed: rgb(255, 255, 255); --mm-color-border: rgba(255, 255, 255, 0.5); } .mm-navbars .mm-navbar:first-child { background: rgb(255, 255, 255); color: rgb(var(--bs-primary-rgb)); padding: 1.5rem 0; font-family: 'Alekto'; font-size: 2rem; letter-spacing: 0.125rem; } .mm-navbars .mm-navbar:first-child .spaced { letter-spacing: 0.5rem; } .mm-navbar { font-weight: bold; justify-content: end; min-height: 35px; } .mm-btn--close { font-size: 150%; } .mm-panel { background: rgba(255, 255, 255, 0.2); } .mm-wrapper__blocker { background: rgba(0, 0, 0, 0.8); } .mm-wrapper--opened .mm-wrapper__blocker { opacity: 1; --mm-blocker-opacity-delay: 0.1s; } /*** Scrolled
***/ header.header-scrolled { width: 100%; padding: 0 5%; top: 0; border-color: rgb(var(--bs-primary-rgb)); box-shadow: 0px 5px 100px var(--bs-tertiary); } header.header-scrolled nav { height: 75px; } header.header-scrolled .main-menu-toggler { top: 12.5px; } /*************************************************************************************************** *** Footer ***************************************************************************************************/ footer #footer-menu { list-style-type: none; padding: 0; margin: 0; text-transform: uppercase; } footer #footer-menu a { font-size: 1.25rem; font-weight: 500; text-decoration: none; } footer a { font-weight: 500; text-decoration: none; } footer span { font-size: 1.125rem; } .sub-footer { font-size: 1rem; } /*************************************************************************************************** *** Fragment: media.php ***************************************************************************************************/ img.object-fit-cover.object-left { object-position: left; } img.object-fit-cover.object-right { object-position: right; } /*************************************************************************************************** *** Fragment: titelbanner.php ***************************************************************************************************/ section.titelbanner { padding: 0; pointer-events: none; } section.titelbanner h1 { position: absolute; width: 100%; bottom: 20%; left: 50%; transform: translateX(-50%); margin: 0; font-size: 7vw; line-height: 2; text-align: center; } section.titelbanner h1 span { background-color: rgb(255, 255, 255); border-bottom: 0.5vw solid rgb(var(--bs-primary-rgb)); padding: 0.5vw 1vw; box-decoration-break: clone; -webkit-box-decoration-break: clone; } section.titelbanner img { max-width: 100%; object-fit: cover; } @media(min-width: 576px){ section.titelbanner h1 { font-size: 6vw; } } @media(min-width: 768px){ section.titelbanner h1 { font-size: 5vw; } } @media(min-width: 1200px){ section.titelbanner h1 { font-size: 3vw; } } @media(min-width: 1600px){ section.titelbanner h1 { bottom: 25%; font-size: 2.5vw; } } /*************************************************************************************************** *** Fragment: editor-media-50-50.php ***************************************************************************************************/ .editor-plus-media-50-50 video { align-self: center; max-width: 100%; } /* Wenn das Bild rechts ist => Bubble links oben positionieren (Standard: rechts oben) und Perspektive anpassen */ .editor-plus-media-50-50 .col + .col-image .bubble { right: unset; left: 2.5%; } .editor-plus-media-50-50 .col + .col-image .bubble img { transform: rotateY(2.5deg) skewY(2.5deg); } @media(min-width: 1200px){ .editor-plus-media-50-50 .container-half { width: calc(100% - 5vw); margin-left: auto; margin-right: 0; } /* Bild rechts */ .editor-plus-media-50-50 .col-image + .col .container-half { margin-left: 0; margin-right: auto; } /* Bild links */ } /*************************************************************************************************** *** Fragment: editor-formular-50-50.php ***************************************************************************************************/ .editor-plus-formular-50-50 video { align-self: center; max-width: 100%; } @media(min-width: 1200px){ .editor-plus-formular-50-50 .container-half { width: calc(100% - 5vw); margin-left: auto; margin-right: 0; } /* Bild rechts */ .editor-plus-formular-50-50 .col-image + .col .container-half { margin-left: 0; margin-right: auto; } /* Bild links */ } /*************************************************************************************************** *** Fragment: call-to-action.php ***************************************************************************************************/ .call-to-action.bg-primary strong, .call-to-action.bg-primary h1, .call-to-action.bg-primary h2, .call-to-action.bg-primary h3, .call-to-action.bg-primary h4, .call-to-action.bg-primary h5, .call-to-action.bg-primary h6 { font-weight: 500; } .call-to-action a.btn + a.btn { margin-left: 1rem; } @media(min-width: 576px){ .call-to-action a.btn + a.btn { margin-left: 2rem; } } .text-highlight { text-shadow: 1px 1px 1px sold black; font-size: 2rem; font-weight: 700; background-color: rgb(var(--bs-tertiary-rgb)); padding: 0.25rem 0.5rem; } /*************************************************************************************************** *** Fragment: mitarbeiter.php ***************************************************************************************************/ .mitarbeiter .portrait { width: 250px; } .mitarbeiter span.funktion { font-size: 1.25rem; vertical-align: super; } .mitarbeiter a { font-size: 1.25rem; text-decoration: none; } /*************************************************************************************************** *** Fragment: formular.php ***************************************************************************************************/ form .form-group label, form .form-group input::placeholder { font-size: 1rem; } form .form-group label { position: relative; color: rgb(var(--bs-primary-rgb)); padding-left: 2rem; margin-bottom: 0.25rem; } .bg-primary form .form-group label, .bg-secondary form .form-group label { color: rgb(255, 255, 255); } .bg-tertiary form .form-group label { color: rgb(0, 0, 0); } .form-wrapper.bg-tertiary { position: relative; background-image: url('/theme/public/assets/images/background-karton.jpg'); background-size: cover; z-index: 0; } .form-wrapper.bg-tertiary::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(var(--bs-tertiary-rgb)); opacity: 0.75; z-index: -1; pointer-events: none; } form .form-group input::placeholder { color: rgba(0, 0, 0, 0.3); } form .form-group input, form .form-group textarea { margin-bottom: 1.5rem; box-shadow: 0.25rem 0.25rem rgb(var(--bs-primary-rgb)); border: 0; } form .form-group input:focus, form .form-group textarea:focus { box-shadow: -0.25rem 0.25rem rgb(var(--bs-primary-rgb)); } .bg-primary form .form-group input, .bg-primary form .form-group textarea { box-shadow: 0.25rem 0.25rem rgb(var(--bs-tertiary-rgb)); } form .form-group label::before { content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 24px; } .formular a { font-weight: 700; text-decoration: none; } .formular h3 + h4 { margin-top: 1rem; } /* Alert-Box */ form .alert { border: 0; background-color: rgb(var(--bs-danger-rgb)); color: rgb(255, 255, 255); margin-bottom: 3rem; } form .alert ul { list-style-type: none; margin: 0; padding: 0; font-weight: 500; } form .alert ul li { margin: 0; } /* Icons */ form .row div:nth-child(1) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } form .row div:nth-child(2) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } form .row div:nth-child(3) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } form .row div:nth-child(4) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } form .row div:nth-child(5) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-primary form .row div:nth-child(1) label::before, .bg-secondary form .row div:nth-child(1) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-primary form .row div:nth-child(2) label::before, .bg-secondary form .row div:nth-child(2) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-primary form .row div:nth-child(3) label::before, .bg-secondary form .row div:nth-child(3) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-primary form .row div:nth-child(4) label::before, .bg-secondary form .row div:nth-child(4) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-primary form .row div:nth-child(5) label::before, .bg-secondary form .row div:nth-child(5) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-tertiary form .row div:nth-child(1) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-tertiary form .row div:nth-child(2) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-tertiary form .row div:nth-child(3) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-tertiary form .row div:nth-child(4) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } .bg-tertiary form .row div:nth-child(5) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } #table-pwpack_login .row div:nth-child(1) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } #table-pwpack_login .row div:nth-child(2) label::before { background-image: url("data:image/svg+xml;utf8,"); background-position: top left; background-repeat: no-repeat; } /**************************************************************************************************** *** Angebot anfragen: Multi-Step-Formular ****************************************************************************************************/ #pwpack_angebot { text-align: center; } #pwpack_angebot .radio, #pwpack_angebot .form-check-group label.control-label { text-align: center; } #pwpack_angebot label.control-label { width: 100%; font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: rgb(var(--bs-primary-rgb)); } #pwpack_angebot .form-check-group, #pwpack_angebot .form-group { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2rem; margin-bottom: 4rem; justify-content: center } #pwpack_angebot .radio input[type="radio"] { display: none; } #pwpack_angebot .radio label { display: inline-block; padding: 0.75rem 1.5rem; min-width: 250px; text-align: center; background-color: rgb(var(--bs-primary-rgb)); color: rgb(255, 255, 255); cursor: pointer; transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.2s; } #pwpack_angebot .radio input[type="radio"]:checked+i+label, #pwpack_angebot label:has(input:checked) { background-color: rgb(var(--bs-success-rgb)); } #pwpack_angebot .radio label:hover { background-color: rgb(var(--bs-secondary-rgb)); } #pwpack_angebot output { display: block; margin-bottom: 1rem; font-size: 2rem; } #pwpack_angebot .range_slider input { width: 55%; max-width: 550px; margin-bottom: 5rem; } #pwpack_angebot input[name=plz] { width: 100px; margin: 0 auto; text-align: center; } #pwpack_angebot input[name=fullname], #pwpack_angebot input[name=email], #pwpack_angebot input[name=telefon] { width: 400px; margin: 0 auto; text-align: center; } #pwpack_angebot #yform-weiba_wertgutachten-email { margin: 2rem 0; } #pwpack_angebot #yform-weiba_wertgutachten-fullname { margin-bottom: 2rem; } #pwpack_angebot #yform-weiba_wertgutachten-email label, #pwpack_angebot #yform-weiba_wertgutachten-telefon label { display: none; } #pwpack_angebot button[type=submit]:not(#back_button) { display: none; }