@charset "UTF-8"; /* Author: Samuel Drechsel / dredesign.de Version: 1.2 */ /* BASE - Base styles, variables, mixins, etc */ /* ======= Main Font Styles ======= */ /* fonts */ /*@font-face { font-family: 'Flareserif821BT-Light'; src: url('../fonts/flareserif821/2481E3_0_0.eot'); src: url('../fonts/flareserif821/2481E3_0_0.eot?#iefix') format('embedded-opentype'), url('../fonts/flareserif821/2481E3_0_0.woff') format('woff'), url('../fonts/flareserif821/2481E3_0_0.ttf') format('truetype'); } */ @font-face { font-family: "RobotoSlab"; src: url("../fonts/roboto-slab/RobotoSlab-VariableFont_wght.ttf"); } /* === Family1 === */ /* wird für , und

verwendet */ /* === Family2 === */ /* bei Sonderschrift: diese Zeile auskommentieren /* oder: Sonderfont */ /* $base-font-family2:"Flareserif821BT-Light", sans-serif; */ /* hier ggf. Sonderschrift für H1-h4 einfügen */ /* ======= Main Background Styles ======= */ /* dredesign-blue: #1dbbea */ /* #888888 grau */ /* dunkel-grau */ /* #763b3d #304173 dunkel-grau => see: "layouts/nav.scss" => .navbar-dark */ /* green (

ist auskommentiert) */ /* weiß */ /* orange */ /* weiß */ /* Mixins */ h1, h2, h3, h4, h5 { margin-top: 0; } .page-header { margin-top: 30px; } .no-pad { padding: 0; } .no-pad-top { padding-top: 0; } .extra-pad { padding-top: 40px; padding-bottom: 40px; } .extra-margin-bottom { margin-bottom: 25px; } .extra-margin-top-bottom { margin-top: 25px; margin-bottom: 25px; } .top-inner { padding: 90px 0 30px 0; } /* Image Sizes */ .img-xsm { width: 100px; } .img-sm { width: 200px; } .img-md { width: 300px; } .img-lg { width: 400px; } .img-xlg { width: 700px; } .clearfix { clear: both; } .label { font-weight: normal; } body { font-family: "RobotoSlab", "Open Sans"; font-size: 18px; line-height: 22px; color: #666666; padding: 0 0 0 0; margin: 11rem 0 0 0; background-color: white; } audio { background-color: #8C7C4D; } .bg-info { background-color: #A69E8F !important; } iframe { border: 0; margin: 0; padding: 0; margin-bottom: -4px; /* Korrektur "whitespacing" (unterhalb) */ } .dev-note { background-color: pink; padding: 10px; margin-top: 50px; } p, ul, ol, li, form, input, select, textarea, table { font-family: "Open Sans", sans-serif !important; line-height: 26px; } a { color: #651135; text-decoration: none; } a:hover { color: #7b1540; text-decoration: none; } hr { margin: 25px 0; /* Space out the Bootstrap

more */ border: 0; border-bottom: 5px dotted #666666; clear: both; } input, textarea, button { border-radius: 0px; } /* h1-hx */ h1 { font-size: 32px; line-height: 38px; margin: 0 0 20px 0; color: #651135; font-weight: bold; /*text-transform:capitalize;*/ } h2 { font-size: 30px; line-height: 28px; margin: 40px 0 25px 0; color: #651135; } h3 { font-size: 28px; line-height: 28px; margin: 30px 0 20px 0; color: #651135; } h4 { font-size: 26px; line-height: 28px; margin: 20px 0 15px 0; color: #651135; } /* Aufzaehlungspunkte */ .content { margin: 0 0 30px 0; } .content ul { list-style-type: square; } .content ul li { line-height: 28px; } .content table td { vertical-align: top; } /* Lists */ .list, .list-feature { margin-bottom: 30px; } .list-feature { margin: 0; padding: 0; width: 80%; } .list-feature li { line-height: 3.6em; border-bottom: 1px solid #cccccc; overflow: auto; } .list-feature li:last-child { border: 0; } .list-feature span { vertical-align: top; padding-top: 9px; font-size: 120%; } .list-feature i { margin-top: -9px; margin-right: 5px; } .list-comments { margin: 0; padding: 0; } .list-comments li { padding: 10px 0 5px 0; border-bottom: 1px solid #cccccc; overflow: auto !important; } .list-comments li:last-child { border: 0; } .list-comments img { width: 100px; } /* Icons */ .fa-1 { font-size: 16px; } .fa-2 { font-size: 18px; } .fa-3 { font-size: 24px; } .fa-4 { font-size: 27px; } .fa-5 { font-size: 35px; } .fa-6 { font-size: 40px; } .fa-primary { color: #651135; } .fa-border { border: 1px solid #651135; border-radius: 5px; padding: 13px 15px; width: 70px; margin-bottom: 10px; } /* Headings */ .heading-primary, .heading-primary-a { color: #651135; } .heading-primary h1, .heading-primary-a h1 { font-size: 24px; line-height: 24px; } .heading-primary-a { border-bottom: 3px solid #651135; } .heading-primary-a span { float: right; display: block; } .heading-secondary, .heading-secondary-a { color: #8C7C4D; } .heading-secondary-a { border-bottom: 3px solid #8C7C4D; } .heading-light, .heading-light-a { color: white; } .heading-light-a { border-bottom: 3px solid white; } .heading-dark, .heading-dark-a { color: orange; } .heading-dark-a { border-bottom: 3px solid orange; } /* COMPONENTS - BS4 components */ /*@import 'components/_blocks.scss';*/ /* Buttons */ .btn { font-family: "Open Sans", sans-serif; } .btn-primary { background-color: #7b1540; /*@include add-background($primary-color);*/ border: 2px solid #a61c57; } .btn-primary:hover { background-color: #841645; border: 2px solid #4f0d2a; } .btn-default { border: 2px solid #eeeeee; margin-right: 5px; } .btn-default span { color: #888888 !important; } .btn-default:hover { border: 2px solid #e1e1e1; } /* pagination */ .pagination .page-item { list-style: none; } .page-item .page-link { z-index: 1; color: #666666; background-color: #ffffff; border-color: #cccccc; } .page-item.active .page-link { z-index: 1; color: #666666; background-color: #a61c57; border-color: #cccccc; } /*@import 'components/_sections.scss'; @import 'components/_components.scss';*/ /* Forms */ .form-control { font-family: "RobotoSlab", "Open Sans"; } .form-row .col { margin-bottom: 15px; } /* processbar */ /* INSERTS */ /* Insert: Aktionen */ .drecms-insert-aktionen { background-color: #eeeeee; border: 2px solid #dddddd; padding: 15px 15px 3px 15px; } /* Insert: Events */ /* Insert: Leistungen */ .drecms-insert-leistungen .col-lg-4 { margin-bottom: 1.5rem; text-align: center; } .drecms-insert-leistungen .col-lg-4 p { margin-right: 0.75rem; margin-left: 0.75rem; } .drecms-insert-leistungen span, .drecms-insert-leistungen i { /* icons */ /*color:red;*/ } .drecms-insert-leistungen h2 { font-weight: 400; } /* Insert: Map */ /* Insert: News */ /* Insert: Aktuelles Carousel */ .drecms-insert-aktuelles-carousel span { color: #666666; } .drecms-insert-aktuelles-carousel .carousel { /*margin-top:-3rem;*/ /*margin-bottom: 4rem;*/ border: 0; } .drecms-insert-aktuelles-carousel .carousel-caption { top: 50%; -webkit-transform: translateY(-85%); transform: translateY(-85%); text-align: left; bottom: 0rem; color: #666666; } .drecms-insert-aktuelles-carousel .carousel-caption h2 { margin-top: 0; } .drecms-insert-aktuelles-carousel .carousel-caption img { margin-right: 20px; margin-bottom: 20px; } .drecms-insert-aktuelles-carousel .carousel-item { height: 15rem; } .drecms-insert-aktuelles-carousel .carousel-item > img { position: relative; top: 0; left: 0; min-width: 100%; height: 15rem; } @media (max-width: 480px) { .drecms-insert-aktuelles-carousel .carousel-item { /*background-color:red;*/ /*border-color:pink;*/ height: 50rem; } .drecms-insert-aktuelles-carousel .carousel-caption { font-size: 0.7em; } } @media (max-width: 768px) { .drecms-insert-aktuelles-carousel .carousel-item { -webkit-transform: translateY(-10%); transform: translateY(-10%); /*background-color:pink;*/ /*border-color:pink;*/ height: 22rem; } .drecms-insert-aktuelles-carousel .carousel-caption { font-size: 0.8em; text-align: center; } .drecms-insert-aktuelles-carousel .carousel-caption img { display: none; } } /* Insert: Slider */ .drecms-insert-slider { z-index: 10; margin-top: -2rem; } .drecms-insert-slider .carousel-inner { margin: auto; text-align: center; } .drecms-insert-slider .carousel-inner img { margin: auto; } .drecms-insert-slider .carousel-inner .carousel-caption h1 { color: white; background-color: rgba(0, 0, 0, 0.7) !important; display: table; padding: 5px 20px 5px 20px; } .drecms-insert-slider .carousel-inner .carousel-caption p { background-color: rgba(0, 0, 0, 0.7) !important; display: table; padding: 5px 20px 5px 20px; font-size: x-large; } /* Insert: Statements */ /* Insert: Testimonal-Carousel */ .drecms-insert-testimonial span { color: #666666; } .drecms-insert-testimonial .carousel { /*margin-top:-3rem;*/ /*margin-bottom: 4rem;*/ border: 0; } .drecms-insert-testimonial .carousel-caption { top: 50%; -webkit-transform: translateY(-70%); transform: translateY(-70%); text-align: left; bottom: 0rem; z-index: 10; color: #666666; } .drecms-insert-testimonial .carousel-caption h2 { margin-top: 0; } .drecms-insert-testimonial .carousel-caption img { margin-left: 20px; margin-bottom: 20px; } .drecms-insert-testimonial .carousel-item { height: 15rem; } .drecms-insert-testimonial .carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 15rem; } @media (max-width: 480px) { .drecms-insert-testimonial .carousel-item { /*background-color:red;*/ /*border-color:pink;*/ height: 50rem; } .drecms-insert-testimonial .carousel-caption { font-size: 0.7em; } } @media (max-width: 768px) { .drecms-insert-testimonial .carousel-item { -webkit-transform: translateY(-10%); transform: translateY(-10%); /*background-color:pink;*/ /*border-color:pink;*/ height: 22rem; } .drecms-insert-testimonial .carousel-caption { font-size: 0.8em; text-align: center; } .drecms-insert-testimonial .carousel-caption img { display: none; } } /* Insert: Testimonal */ /* Insert: What-we-do */ .drecms-insert-what-we-do hr { /*border-color:$primary-color;*/ } /* Insert: Leistungen */ /* Insert: Spendenbedarf */ .drecms-insert-spendenbedarf .progress-bar { background-color: #651135 !important; } .drecms-insert-spendenbedarf .massive-font { font-size: 20px; } /* Insert: Verbinden */ .drecms-insert-verbinden p.lead { color: #FFFFFF; } /* Insert: Zielgruppen */ .drecms-insert-zielgruppen { /* Based on FlorinCornea - https://codepen.io/FlorinCornea/pen/vMRKXp*/ } .drecms-insert-zielgruppen .btn { margin-right: 5px; margin-bottom: 5px; } .drecms-insert-zielgruppen .card-wrapper { margin-bottom: 20px; } .drecms-insert-zielgruppen .card-image .card .card-img-wrapper { height: 100%; } .drecms-insert-zielgruppen .card-image .card .card-body { display: none; } .drecms-insert-zielgruppen .card-image-title-description .card .card-img-wrapper { max-height: 160px; } .drecms-insert-zielgruppen .card-image-title-description .card { position: relative; min-height: 300px; } .drecms-insert-zielgruppen .card-image-title-description .card .card-body { height: auto; position: relative; top: 0; margin-bottom: -70px; } .drecms-insert-zielgruppen .card-image-title-description .card:hover .card-body { top: -70px; /*-70*/ } .drecms-insert-zielgruppen .card-image-title-description .card .card-body .card-title { margin-bottom: 0.75rem; } .drecms-insert-zielgruppen .card { display: inline-block; position: relative; overflow: hidden; min-height: 300px; height: 100%; } .drecms-insert-zielgruppen .card:hover { /*box-shadow: 8px 12px 31px -10px #ab98ab;*/ } .drecms-insert-zielgruppen .card-img-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50%; /*50%*/ overflow: hidden; -webkit-transition: 1s ease; transition: 1s ease; } .drecms-insert-zielgruppen .card:hover .card-img-wrapper { /* class hinzugefuegt */ height: 100%; /*50%*/ -webkit-transition: 1s ease; transition: 1s ease; } .drecms-insert-zielgruppen .card-img-wrapper img { -webkit-transition: 1s ease; transition: 1s ease; } .drecms-insert-zielgruppen .card:hover .card-img-wrapper img { -webkit-transform: scale(1.15); transform: scale(1.15); } .drecms-insert-zielgruppen .card-body .card-title { margin-bottom: calc(50% + 20px); /*50%*/ -webkit-transition: 1s ease; transition: 1s ease; } .drecms-insert-zielgruppen .card:hover .card-body .card-title { margin-bottom: 0.75rem; } .drecms-insert-zielgruppen .card-body { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; /*50%*/ background-color: rgba(255, 255, 255, 0.9); -webkit-transition: 1s ease; transition: 1s ease; } .drecms-insert-zielgruppen .card-content { left: 0; right: 0; overflow: hidden; width: 100%; height: auto; -webkit-transition: 1s ease; transition: 1s ease; } .drecms-insert-zielgruppen .card:hover .card-body { height: 80%; } .drecms-insert-zielgruppen .card:hover .card-content { bottom: 0; } /* MODULES - Individual site components */ /* Modul: Lexikon */ .drecms-lexikon-wrapper { /*background-color:pink;*/ } .drecms-lexikon-wrapper .drecms-lexikon-liste .accordion-button { background-color: none; color: #666666; font-size: 18px; } .drecms-lexikon-wrapper .drecms-lexikon-liste .btn-link { color: #666666; /* bringt Fragelink auf gleiche Y-Pos. wie die Antwort */ padding-left: 0; } .drecms-lexikon-wrapper .drecms-lexikon-liste h2 { font-family: "Open Sans", sans-serif; margin-top: 0; font-weight: bold; font-size: 18px; border: 0 !important; } /* Modul: FAQ */ #drecms-faq-liste .btn-link { color: #666666; /* bringt Fragelink auf gleiche Y-Pos. wie die Antwort */ padding-left: 0; } #drecms-faq-liste h2 { font-family: "Open Sans", sans-serif; margin-top: 0; font-weight: bold; font-size: 18px; border: 0 !important; } #drecms-faq-liste .accordion button { border: 0 !important; } #drecms-faq-liste .accordion button .accordion-button { background-color: none; border: 0 !important; } #drecms-faq-liste .accordion-button { background-color: none; color: #666666; font-size: 18px; } #drecms-faq-filter ul .active { background-color: #f7f7f7; border-color: #eeeeee; } .drecms-faq-wrapper { margin-top: 30px; } /* Modul: Aktuelles */ /* Modul: Ansprechpartner */ /* Modul: Sprechzeiten */ /* Modul: Material (Downloads) */ .drecms-material-wrapper .drecms-material-filterbox { background-color: #a61c57; padding: 10px; margin: 0 0 25px 0; } .drecms-material-wrapper .drecms-material-filterbox form { margin: 0; padding: 0; } /* Modul: Predigten */ .drecms-predigten-wrapper .drecms-predigten-table { margin-top: 35px; } .drecms-predigten-wrapper .drecms-predigten-table audio { margin-top: 7px; width: 100%; } .drecms-predigten-wrapper .drecms-predigten-table .btn { margin-top: 7px; width: 150px; } /* Modul: Team */ .drecms-team-wrapper .ansprechpartner_linke_spalte { float: left; } /* Modul: Bildergalerie */ .drecms-bildergalerie-wrapper .imghover { /* now a container for the image */ display: inline-block; /* shrink wrap to image */ overflow: hidden; /* hide the excess */ } .drecms-bildergalerie-wrapper .imghover img { display: block; /* no whitespace */ -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .drecms-bildergalerie-wrapper .imghover:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } /* Modul: Termine */ .drecms-termine-wrapper { /* .img-wrapper { max-height:200px; position: relative; overflow: hidden; } .img-wrapper:after { content: ''; display: block; padding-top: 100%; } .img-wrapper img { width: auto; height: 100%; max-width: none; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } */ } .drecms-termine-wrapper .card-img-top { width: 100%; height: 230px; -o-object-fit: cover; object-fit: cover; /* oder "contain" */ } .drecms-termine-wrapper h2 { margin-top: 20px; } .drecms-termine-wrapper .card-body img { margin-bottom: 20px; margin-left: 20px; } .drecms-termine-wrapper .facts { text-align: center; width: 30px; color: #bbad84; } /* Modul: Links */ .drecms-links-wrapper { background-color: pink; } /* Modul: FAQ */ #drecms-filial-liste .btn-link { color: #666666; /* bringt Fragelink auf gleiche Y-Pos. wie die Antwort */ padding-left: 0; } #drecms-filial-liste h2 { font-family: "Open Sans", sans-serif; margin-top: 0; font-weight: bold; font-size: 18px; border: 0 !important; } #drecms-filial-liste .accordion-button { background-color: none; color: #666666; font-size: 18px; } #drecms-filial-liste .accordion-body { font-family: "Open Sans", sans-serif; } #drecms-filial-filter ul .active { background-color: #f7f7f7; border-color: #eeeeee; } .drecms-filial-wrapper { margin-top: 30px; } /* Modul: Dienstleistungen */ .drecms-dienstleistungen-wrapper { /*background-color:pink;*/ } .drecms-dienstleistungen-wrapper .card-customicon { /* Bild-Icons von Kunden (halb ueber das Bild gesetzt) */ width: 75px; margin-top: -80px; margin-bottom: -15px; } .drecms-dienstleistungen-wrapper .card-img-top { width: 100%; height: 230px; -o-object-fit: cover; object-fit: cover; /* oder "contain" */ } /* Modul: Angebote */ .drecms-angebote-wrapper { /*background-color:pink;*/ } .drecms-angebote-wrapper .card-customicon { /* Bild-Icons von Kunden (halb ueber das Bild gesetzt) */ width: 75px; margin-top: -80px; margin-bottom: -15px; } .drecms-angebote-wrapper .card-img-top { width: 100%; height: 230px; -o-object-fit: cover; object-fit: cover; /* oder "contain" */ } /* Modul: Geschichte (Timeline) */ .drecms-geschichte-wrapper i { padding: 5px; /* fa-icon spacing */ } .drecms-geschichte-wrapper .border-right { border-right-style: dotted !important; border-right-width: 4px !important; } .drecms-geschichte-wrapper span.bg-light { background-color: #651135 !important; } .drecms-geschichte-wrapper span > i { color: #FFFFFF; } /* Modul: Ueber uns */ .drecms-ueberuns-wrapper .nav-pills .nav-link { border: 1px solid #dddddd; color: #666666; } .drecms-ueberuns-wrapper .nav-pills .active { color: white; } .drecms-ueberuns-wrapper img { margin-bottom: 20px; margin-left: 20px; } /* LAYOUTS - Page layout styles */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .nav-item { list-style-type: none; margin-right: 8px; } .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item:hover .nav-link { color: white; } /* NEU - mehrzeiliger name in brand (eingerueckt) */ .brand-flex { /*https://stackoverflow.com/questions/57120167/how-to-align-two-line-text-inside-navbar-brand-with-image*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .brand-block { /* wrapper for multiline name */ /*https://stackoverflow.com/questions/57120167/how-to-align-two-line-text-inside-navbar-brand-with-image*/ display: block; -webkit-box-align: end; -ms-flex-align: end; align-items: end; margin-left: 5px; } .name-parts { /* every line */ display: block !important; color: white; font-size: 24px; line-height: 28px; } .navbar-dark { background-color: #651135 !important; background-image: url("/img/nav-bg.png"); background-repeat: no-repeat; background-position: center; } .navbar-dark .navbar-nav .nav-link { color: white; font-family: "RobotoSlab"; font-size: 20px; } .navbar-dark .navbar-nav .nav-link span { font-size: 20px; } .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link { color: white; border-bottom: 2px solid white; } /* left-nav in content-area - "second-navi.php" */ .nav .nav-item .active { background-color: white; } header-main { margin: 0; } header { margin-top: 96px; /* Abstand oben, wenn Navi 'fixed' ist */ /*border-bottom:1px solid $primary-color;*/ background-color: green !important; -webkit-box-shadow: 10px 10px 25px #888888; box-shadow: 10px 10px 25px #888888; /*background-image:url("../img/bg.jpg");*/ /*a:hover { color:lighten($primary-color,60%); }*/ } header a { font-size: 22px; } header .logo { margin-top: 10px; } header .logo img { width: 200px; height: 200px; margin-top: -10px; margin-right: 10px; } /* Footer */ .bg-secondary { /* footer-bg-class */ background-color: #474747 !important; } footer { font-family: "RobotoSlab", "Open Sans" !important; margin-top: 0; padding-top: 0; } footer p.lead { font-family: "RobotoSlab", "Open Sans" !important; font-size: 24px; } footer a.text-muted { color: #666666 !important; } footer a { color: white !important; } footer a:hover { color: #dddddd !important; } footer .list-group-flush { margin-bottom: 25px; } footer .list-group .list-group-item { background-color: #474747; border-color: #888888; } /* Blog */ /* mobile */ .navbar-toggler { /*border:1px solid orange;*/ } div { /*border:1px solid #eeeeee;*/ }