/* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- VARIABLEN ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ :root { /* Farben Hex */ /* Bootstrap */ --white: #fff; --gray: #666666; --gray-dark: #343a40; --primary:#e7000e; --primary-dark:#cb0424; --secondary: #000000; --success: #98e59d; --success-hover: #8cd390; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #F4F4F4; --medium: #d3d3d3; --dark: #000000; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; /* Eigene*/ --bs-body-color:#000000; /* Links */ --link: #000000; --linkhover: #c61439; /*primary*/ /* Hauptnavigation */ --mainnavlightlink: #000000; --mainnavdarklink: #ffffff; --mainnavactivelink: #000000; --mainnavstickycolor: 255,255,255; /* Footer */ --footercontent:#ffffff; --footerbackground:#000000; --footerlink: #ffffff; --footerlinkhover: #c61439; /* Farben RGB */ /* Bootstrap */ --white-rgb: 255,255,255; --primary-rgb: 231,0,42; --secondary-rgb: 96,27,76; --light-rgb: 244,244,244; --dark-rgb: 29,53,95; /* Swiper Card Elemente */ --swiper-theme-color:#c61439; --swiper-pagination-color:#c61439; --swiper-navigation-color:#d9d9d9; --swiper-navigation-size:25px; /* Carousel Colors */ --carousel-pagination-color:#c61439; --carousel-navigation-color:#ffffff; /* Abstände */ --abstand-ganzklein:10px; --abstand-klein:15px; --abstand-normal:30px; --abstand-mittel:40px; --abstand-gross:60px; --abstand-ganzgross:80px; --card-padding:30px; --card-padding-gross:40px; --section-bigdesktop-padding:100px; --section-desktop-padding:100px; --section-tablet-padding:80px; --section-phone-padding:40px; --container-fluid-left-right-big:7%; --container-fluid-left-right-small:5%; /* Border Radius Elemente wie Card, Accordeon */ --border-radius:0px; --border-radius-button:0px; /* Transparenzen */ --overlay-standard:0.6; /* Linkicons */ /* Font Sofia */ --link-back-icon:"\2190"; --link-more-icon:"\2192"; --link-extern-icon:"\2197"; --accordion-icon-normal:"\2193"; --accordion-icon-active:"\2190"; /* Font Awesome */ --link-extern-icon:"\2197"; --link-mail-icon: "\f0e0"; --link-download-icon:"\f1c1"; --close-button:"\f057"; --home-button:"\f015"; --plus-button:"\f055"; --link-youtube-icon:"\f167"; --link-audio-icon:"\f6a8"; --link-video-icon:"\f167"; --link-totop-icon:"\f062"; --link-plus-icon:"\2b"; --link-fax-icon:"\f1ac"; --link-phone-icon:"\f095"; --link-ort-icon:"\f3c5"; --link-datum-icon:"\f073"; --link-uhrzeit-icon:"\f017"; --link-information-icon:"\f05a"; /* Schriften und Schriftgrössen */ --font-size-extrasmall:0.6em; --font-size-small:0.8em; --font-size-middle:0.9em; --font-size-link:1em; --bs-font-sans-serif:'Sofia Sans Semi Condensed'; --bs-font-headline:'Khand'; --font-awesome-regular:'Font Awesome 5 Pro Regular'; --font-awesome-brands:'Font Awesome 5 Pro Brands'; /*--bs-body-font-size:1.125em;*/ --bs-body-font-size:1.2em; --bs-body-font-size-plus:1.5em; --bs-body-line-height: 1.45em; /* Höhen und Breiten verschiedener Elemente */ --jumbotronheight-desktop:500px; --jumbotronheight-tablet:350px; --jumbotronheight-phone:230px; --navigationheight-desktop:150px; --navigationheight-tablet:150px; --navigationheight-phone:120px; --navigationheight-sticky-desktop:105px; --navigationheight-sticky-tablet:55px; --navigationheight-sticky-phone:50px; --meta-nav-height:35px; --nav-abstand-phone:35px; --nav-abstand-tablet:15px; --nav-abstand-desktop:15px; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SCHRIFTEN LADEN ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ Grundschrift ------------------------ */ @font-face { font-family: 'Sofia Sans Semi Condensed'; src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Bold.eot'); src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Bold.woff2') format('woff2'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Bold.woff') format('woff'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Bold.ttf') format('truetype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Bold.svg#SofiaSansSemiCondensed-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Sofia Sans Semi Condensed'; src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BoldItalic.eot'); src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BoldItalic.woff2') format('woff2'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BoldItalic.woff') format('woff'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BoldItalic.ttf') format('truetype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BoldItalic.svg#SofiaSansSemiCondensed-BoldItalic') format('svg'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Sofia Sans Semi Condensed'; src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Light.eot'); src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Light.woff2') format('woff2'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Light.woff') format('woff'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Light.ttf') format('truetype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Light.svg#SofiaSansSemiCondensed-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Sofia Sans Semi Condensed'; src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-LightItalic.eot'); src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-LightItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-LightItalic.woff2') format('woff2'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-LightItalic.woff') format('woff'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-LightItalic.ttf') format('truetype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-LightItalic.svg#SofiaSansSemiCondensed-LightItalic') format('svg'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Sofia Sans Semi Condensed'; src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Black.eot'); src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Black.woff2') format('woff2'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Black.woff') format('woff'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Black.ttf') format('truetype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-Black.svg#SofiaSansSemiCondensed-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Sofia Sans Semi Condensed'; src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BlackItalic.eot'); src: url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BlackItalic.woff2') format('woff2'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BlackItalic.woff') format('woff'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BlackItalic.ttf') format('truetype'), url('../fonts/SofiaSansSemiCondensed/SofiaSansSemiCondensed-BlackItalic.svg#SofiaSansSemiCondensed-BlackItalic') format('svg'); font-weight: 900; font-style: italic; font-display: swap; } /* ------------------------ Headline Schrift ------------------------ */ @font-face { font-family: 'Khand'; src: url('../fonts/Khand/Khand-Bold.eot'); src: url('../fonts/Khand/Khand-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Khand/Khand-Bold.woff2') format('woff2'), url('../fonts/Khand/Khand-Bold.woff') format('woff'), url('../fonts/Khand/Khand-Bold.ttf') format('truetype'), url('../fonts/Khand/Khand-Bold.svg#Khand-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Khand'; src: url('../fonts/Khand/Khand-Regular.eot'); src: url('../fonts/Khand/Khand-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Khand/Khand-Regular.woff2') format('woff2'), url('../fonts/Khand/Khand-Regular.woff') format('woff'), url('../fonts/Khand/Khand-Regular.ttf') format('truetype'), url('../fonts/Khand/Khand-Regular.svg#Khand-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } /* ------------------------ Font Awesome - Icons ------------------------ */ @font-face { font-family: 'Font Awesome 5 Pro Regular'; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/Font_Awesome/fa-light-300.eot"); src: url("../fonts/Font_Awesome/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../fonts/Font_Awesome/fa-light-300.woff2") format("woff2"), url("../fonts/Font_Awesome/fa-light-300.woff") format("woff"), url("../fonts/Font_Awesome/fa-light-300.ttf") format("truetype"), url("../fonts/Font_Awesome/fa-light-300.svg#fontawesome") format("svg"); } @font-face { font-family: 'Font Awesome 5 Pro Brands'; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/Font_Awesome/fa-brands-400.eot"); src: url("../fonts/Font_Awesome/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../fonts/Font_Awesome/fa-brands-400.woff2") format("woff2"), url("../fonts/Font_Awesome/fa-brands-400.woff") format("woff"), url("../fonts/Font_Awesome/fa-brands-400.ttf") format("truetype"), url("../fonts/Font_Awesome/fa-brands-400.svg#fontawesome") format("svg"); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SCHRIFTARTEN ZUWEISEN ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ Grundschift regular ------------------------ */ body, .sans-serif { font-family: var(--bs-font-sans-serif); font-weight: normal; font-style: normal; font-display: swap; hyphens:manual; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-style: normal; } /* ------------------------ Grundschrift italic ------------------------ */ i,.zitat, blockquote, main a:not(.btn):not(.btn-lg){ font-family: var(--bs-font-sans-serif); font-weight: normal; font-style: italic; font-display: swap; } main a{ font-style: italic; } /* ------------------------ Grundschrift black ------------------------ */ .highlight, .navbar-nav a[class*="level1"], .btn, .btn-lg, .frame-type-menu_subpages ul li a, .frame-type-menu_section ul li a, h3, h4, h5, h6,.toolbar-content .cookie-set, strong, .strong, b, .kategorie, .quelle, .mainnavigation .navbar-nav > .nav-item > .dropdown-menu a, .date, .fb-teaser .col-lg-8 .lead, .lead.strong, .aufriss, .kreis.li.frage, .kreis.li.ausruf, .kreis.li.pfeil, .accordion button.card-link, .toolbar-content a, header .navbar-nav .nav-item > a, .owl-carousel.newsslider .owl-nav button.owl-prev:before, main .owl-carousel.content-item .owl-nav button.owl-prev:before, .owl-carousel.newsslider .owl-nav button.owl-next:before, main .owl-carousel.content-item .owl-nav button.owl-next:before { font-family: var(--bs-font-sans-serif); font-weight: 900; font-style: normal; } .frame-type-menu_subpages li a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: 900 !important; font-style: normal !important; } /* ------------------------ Achtung - Pfeile aus der Grundschrift, nicht aus Font-Awesome ------------------------ */ .more:after, .extern:after, a[href*="http"]:after, header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item a:before, .no-gutters.bildmenue div > .kategorie:after, .btn.btn-more:after, .btn.btn-extern:after, .btn.btn-back:before, .frame-type-menu_section ul li a:after, .frame-type-menu_subpages ul li a:after, .back:before, .accordion .card-header button.card-link.collapsed:after, .accordion .card-header button.card-link:after{ font-family:var(--bs-font-sans-serif); } header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item a:before { font-weight:bold; } /* ------------------------ Headline Schrift Khand bold ------------------------ */ h1, h2, .headline, .startseite #hero .grid-slider .owl-item .ce-bodytext .lead, .head.strong { font-family: var(--bs-font-headline); font-weight: bold; font-style: normal; font-display: swap; } main h1 a, main h2 a, main h3 a, main h4 a, main h5 a, main h6 a, footer h1 a, footer h2 a, footer h3 a, footer h4 a, footer h5 a, footer h6 a { font-style:normal; } /* ------------------------ Headline Schrift Khand normal ------------------------ */ .head.normal, .subheader, h2.subheader, h3.subheader, h4.subheader { font-family: var(--bs-font-headline); font-weight: normal; font-style: normal; font-display: swap; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- STILVORLAGEN ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ body { color:var(--bs-body-color); font-size:var(--bs-body-font-size); line-height:var(--bs-body-line-height); min-height:480px; } /* Body nicht scrollbar wenn Navi aufgeklappt */ body.overflow-hidden { overflow:hidden; } body, html { height: 100%; margin: 0px auto; padding: 0px auto; } #wrapper { height: auto; min-height: 100%; margin: 0px auto; padding: 0px auto; position:relative; } .border { border: 1px solid var(--bs-body-color) !important; } p { margin-bottom:var(--abstand-klein); } .card p { margin-bottom:var(--abstand-ganzklein); } p:last-child, .ce-body ul:last-child, .ce-body ul:last-child li:last-child { margin-bottom:0em !important; } .small, small { font-size: var(--font-size-small); font-weight: 400; line-height:1.2em; } .fussnote { font-size: var(--font-size-small); margin-bottom:10px; line-height:1.2em; } .text-center { width:100%; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; } .badge, .quelle, .tx-indexedsearch-res.result-list-item .kategorie { text-transform:uppercase; line-height:1em; font-size:var(--font-size-small); } .aufriss { color:var(--white); } .aufriss, .quelle, .tx-indexedsearch-res.result-list-item .kategorie { margin-bottom:var(--abstand-ganzklein) !important; } .aufriss, .badge, .tx-indexedsearch-res.result-list-item .kategorie { padding:2px 4px 2px 4px; display:inline-block; border-radius:0px; line-height:1em; } .badge + .badge { margin-left:5px; } .aufriss { background-color:var(--primary); } /* Auf Schwarzem Grund */ .bg-secondary .aufrisse { background-color:var(--white); color:var(--secondary); } @media (min-width: 768px) and (max-width:991px) { .aufriss, .quelle { font-size:calc(var(--font-size-middle)*0.875); } } .highlight { background-color:var(--primary); color:var(--white); padding:0px 3px 0px 3px; box-decoration-break: clone; } p.highlight { display:inline-block; } .border-bottom, .border-top { border-color:var(--bs-body-color) !important; } div:not(.card):not(.facts).border-bottom { padding-bottom:var(--abstand-normal); } div:not(.card):not(.facts).border-top { padding-top:var(--abstand-normal); } /* Aufzählungen */ ul { padding-left:1em; } dl li, ol li, ul li { margin-bottom:5px; } /* Linie */ hr {border-top:1px solid black !important;} /* Border */ .border { border:1px solid black; } /* Wenn Header einziges Element in Col dann Subheader kein Abstand nach unten */ .frame-type-header:only-child > header > .subheader { margin-bottom:0em; } /* ------------ H1 ------------ */ .h1, h1{ letter-spacing: -0.015em; line-height:1.1em; display:block; color:var(--primary); } /* Phone */ @media (min-width: 0px) and (max-width:767px) { .h1, h1, .lead.bigger{ font-size:2.5em; margin-bottom:22px; } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .h1, h1, .lead.bigger{ font-size:3.45em; margin-bottom:30px; } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { .h1, h1, .lead.bigger{ font-size:5.3em; margin-bottom:40px; } } /* Desktop gross */ @media (min-width: 1200px) { .h1, h1, .lead.bigger{ font-size:5.3em; margin-bottom:40px; } } /* ------------ H2 ------------ */ .h2, h2, .zahlen { line-height:1.1em; } .ce-bodytext h2:last-child { margin-bottom:0em; } .card h2 { margin-bottom:15px; } /* Phone */ @media (min-width: 0px) and (max-width:767px) { .h2, h2, .zahlen, h3.subheader, .lead.head, .lead.big { font-size:1.75em; } .h2, h2 { margin-bottom:10px; } /* Abstand wenn h2 direkt auf h1 folgt */ h1 + h2, h1 + h2.subheader { margin-top:-10px; } h1 + h2 { margin-bottom:40px; } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .h2, h2, .zahlen, h3.subheader, .lead.head, .lead.big { font-size:2.25em; } .h2, h2 { margin-bottom:13px; } /* Abstand wenn h2 direkt auf h1 folgt */ h1 + h2, h1 + h2.subheader { margin-top:-15px; } h1 + h2 { margin-bottom:80px; } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { .h2, h2, .zahlen, h3.subheader, .lead.head, .lead.big { font-size:3.1em; } .h2, h2 { margin-bottom:17px; } /* Abstand wenn h2 direkt auf h1 folgt */ h1 + h2, h1 + h2.subheader { margin-top:-20px; } h1 + h2 { margin-bottom:100px; } } /* Desktop gross */ @media (min-width: 1200px) { .h2, h2, .zahlen, h3.subheader, .lead.head, .lead.big { font-size:3.1em; } .h2, h2 { margin-bottom:17px; } /* Abstand wenn h2 direkt auf h1 folgt */ h1 + h2, h1 + h2.subheader { margin-top:-20px; } h1 + h2 { margin-bottom:100px; } } /* ------------ H3 ------------ */ .h3, h3 { line-height:1.1em; } .card h3 { margin-bottom:10px; } /* Phone */ @media (min-width: 0px) and (max-width:767px) { .h3, h3, h4.subheader, .lead, .zitat, blockquote { font-size:1.15em; } .h3, h3 { margin-bottom:12px; } /* Abstand wenn h2 direkt auf h1 folgt */ h2 + h3, h2 + h3.subheader { margin-top:-8px; } .content > .container-fluid > .container-header:first-child h3, .content > .container-fluid .container-fluid > .container-header:first-child h3, .news-related.news-related-files h3{ margin-bottom:30px; } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .h3, h3, h4.subheader, .lead, .zitat, blockquote { font-size:1.35em; } .h3, h3 { margin-bottom:13px; } /* Abstand wenn h2 direkt auf h1 folgt */ h2 + h3, h2 + h3.subheader { margin-top:-10px; } .content > .container-fluid > .container-header:first-child h3, .content > .container-fluid .container-fluid > .container-header:first-child h3, .news-related.news-related-files h3{ margin-bottom:50px; } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { .h3, h3, h4.subheader, .lead, .zitat, blockquote { font-size:1.5em; } .h3, h3 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h2 + h3, h2 + h3.subheader { margin-top:-13px; } .content > .container-fluid > .container-header:first-child h3, .content > .container-fluid .container-fluid > .container-header:first-child h3, .news-related.news-related-files h3{ margin-bottom:50px; } } /* Desktop gross */ @media (min-width: 1200px) { .h3, h3, h4.subheader, .lead, .zitat, blockquote{ font-size:1.5em; } .h3, h3 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h2 + h3, h2 + h3.subheader { margin-top:-13px; } .content > .container-fluid > .container-header:first-child h3, .content > .container-fluid .container-fluid > .container-header:first-child h3, .news-related.news-related-files h3{ margin-bottom:50px; } } /* Einleitende h3 mit Linie in einem Container */ .content > .container-fluid > .container-header:first-child h3, .content > .container-fluid .container-fluid > .container-header:first-child h3, .news-related.news-related-files h3{ padding-bottom:8px; border-bottom:3px solid var(--bs-body-color); } /* ------------ H4 ------------ */ .h4, h4 { line-height:1.1em; margin-bottom:10px; } p + h4 { margin-top:30px; } /* Phone */ @media (min-width: 0px) and (max-width:767px) { .h4, h4 { font-size:1.3em; } .h4, h4 { margin-bottom:10px; } /* Abstand wenn h2 direkt auf h1 folgt */ h3 + h4, h3 + h4.subheader { margin-top:-7px; } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .news-list-item.veranstaltung .date, .news-list-item.veranstaltung .ort{ font-size:0.85em; } .h4, h4 { hyphens:auto; } .h4, h4 { margin-bottom:12px; } /* Abstand wenn h2 direkt auf h1 folgt */ h3 + h4, h3 + h4.subheader { margin-top:-8px; } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { .h4, h4 { font-size:1.35em; } .h4, h4 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h3 + h4, h3 + h4.subheader { margin-top:-10px; } } /* Desktop gross */ @media (min-width: 1200px) { .h4, h4 { font-size: 1.5rem; } .h4, h4 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h3 + h4, h3 + h4.subheader { margin-top:-10px; } } /* ------------ H5 ------------ */ .h5, h5 { line-height:1.1em; } /* Phone */ @media (min-width: 0px) and (max-width:767px) { .h5, h5 { font-size:1.1em; } .h5, h5 { margin-bottom:7px; } /* Abstand wenn h2 direkt auf h1 folgt */ h4 + h5, h4 + h5.subheader { margin-top:-6px; } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .h5, h5 { font-size:1.1em; } .h5, h5 { margin-bottom:8px; } /* Abstand wenn h2 direkt auf h1 folgt */ h4 + h5, h4 + h5.subheader { margin-top:-8px; } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { .h5, h5 { font-size:1.1em; } .h5, h5 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h4 + h5, h4 + h5.subheader { margin-top:-10px; } } /* Desktop gross */ @media (min-width: 1200px) { .h5, h5 { font-size:1.15em; } .h5, h5 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h4 + h5, h4 + h5.subheader { margin-top:-10px; } } /* ------------ H6 ------------ */ .h6, h6 { line-height:1.1em; } /* Phone */ @media (min-width: 0px) and (max-width:767px) { .h6, h6 { font-size:1em; } .h6, h6 { margin-bottom:6px; } /* Abstand wenn h2 direkt auf h1 folgt */ h5 + h6, h5 + h6.subheader { margin-top:-6px; } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .h6, h6 { font-size:1em; } .h6, h6 { margin-bottom:8px; } /* Abstand wenn h2 direkt auf h1 folgt */ h5 + h6, h5 + h6.subheader { margin-top:-8px; } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { .h6, h6 { font-size:1em; } .h6, h6 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h5 + h6, h5 + h6.subheader { margin-top:-10px; } } /* Desktop gross */ @media (min-width: 1200px) { .h6, h6 { font-size:1em; } .h6, h6 { margin-bottom:15px; } /* Abstand wenn h2 direkt auf h1 folgt */ h5 + h6, h5 + h6.subheader { margin-top:-10px; } } /* h5 Subheader */ .news-list-view h5.subheader{ font-size:1em; } /* ------------ LEAD ------------ */ .lead, .zitat, blockquote{ line-height:1.15em; } .lead.highlight { line-height:1.3; } /* Lead --> siehe Stilvorlage h3 */ /* Lead gross --> siehe Stilvolrage h2 */ /* Phone */ @media (min-width: 0px) and (max-width:767px) { .zitat.gross { font-size:calc(var(--bs-body-font-size-plus)*1.15); } } /* Tablet klein */ @media (min-width: 768px) and (max-width:991px) { .zitat.gross { font-size:calc(var(--bs-body-font-size-plus)*1.25); } } /* Desktop klein */ @media (min-width: 992px) and (max-width:1199px) { p.lead { margin-bottom:20px; } .zitat.gross { font-size:calc(var(--bs-body-font-size-plus)*1.75); } } /* Desktop gross */ @media (min-width: 1200px) { p.lead { margin-bottom:20px; } .zitat.gross { font-size:calc(var(--bs-body-font-size-plus)*1.75); } } .zitat-gross { font-size:calc(var(--bs-body-font-size-plus)*1.2); line-height:1.1em; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- LINKS ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ TEXTLINKS ------------------------ */ main a:not(.btn):not(.btn-lg), header a:not(.btn):not(.btn-lg), .sprachauswahl a:not(.btn):not(.btn-lg){ color:var(--link); } /* Link auf rotem und schwarzem Hintergrund */ .bg-primary a:not(.btn):not(.btn-lg), .bg-secondary a:not(.btn):not(.btn-lg), .bg-comic a:not(.btn):not(.btn-lg){ color:var(--white); } main a:not(.btn):not(.btn-lg):hover, header a:not(.btn):not(.btn-lg):hover, .sprachauswahl a:not(.btn):not(.btn-lg):hover{ color:var(--linkhover); text-decoration:none; } :focus-visible { outline-color: none; outline-style: none; outline-width: 0px; } main .flipper .back-side a:hover { color:var(--link); } .bg-primary a:not(.btn) { color:var(--bs-body-color); } .bg-primary a:hover { color:var(--bs-body-color); } .bg-dark a:not(.btn), .bg-dark a:hover, .scrollToTop:hover { color:var(--white); } .bg-primary .bg-white a:hover, .bg-primary .bg-light a:hover, .bg-primary .bg-secondary a:hover { color:var(--linkhover); text-decoration:none; } /* ------------------------ mit Icons ------------------------ */ .more, .back, .extern, a[href*="http"], .mail, a[href*="mailto"]{ display:inline-block; position:relative; } .more:hover, .back:hover, .extern:hover, a[href*="http"];giver .mail:hover, a[href*="mailto"]:hover { text-decoration:none !important; } /* more */ .more:after{ content:var(--link-more-icon); display:inline-block; margin-left:5px; } /* back */ .back:before{ content:var(--link-back-icon); display:inline-block; margin-right:5px; } /* extern */ .extern:after, a[href*="http"]:after{ content:var(--link-extern-icon); display:inline-block; margin-left:5px; } a.socialmedia-icon:after { content:none !important; margin-left:0 !important; } /* ------------------------ PDF ------------------------ */ a.download:before, a.pdf:before, a[href*=".pdf"]:before { content:var(--link-download-icon); font-family:var(--font-awesome-regular); font-weight: 400; font-style:normal; display:inline-block; margin-right:5px; } /* ------------------------ Video ------------------------ */ main a.video:before, main a.youtube:before, main a[href*="www.youtube"]:before { content:var(--link-youtube-icon); font-family: 'Font Awesome 5 Pro Brands'; font-weight: 400; font-style:normal; display:inline-block; margin-right:5px; color:red; } a.btn-primary.video:before { color:white; } a.btn-outline-dark.video:before { color:black; } /* ------------------------ E-Mail ------------------------ */ a.mail:before, a[href*="mailto"], a.email:before, a[href*="mailto"]:before { content:var(--link-mail-icon); font-family:var(--font-awesome-regular); font-weight: 400; font-style:normal; display:inline-block; margin-right:5px; } p.email { margin-bottom:0em; } /* ------------------------ Telefon ------------------------ */ .content a:not(.btn):not(.btn-lg).tel:before, .content a:not(.btn):not(.btn-lg)[href*="+49"]:before { content:var(--link-phone-icon); font-family:var(--font-awesome-regular); font-weight: 400; font-style:normal; display:inline-block; margin-right:5px; } p.phone { margin-bottom:0em; } /* andere Spans mit Icon */ .tel:before, .fax:before, .ort:before, .datum:before, .uhrzeit:before, .information:before{ margin-right:5px; font-family:var(--font-awesome-regular); font-weight: 400; font-style:normal; display:inline-block; margin-right:5px; } .tel:before { content:var(--link-phone-icon); } .fax:before { content:var(--link-fax-icon); } .ort:before { content:var(--link-ort-icon); } .datum:before { content:var(--link-datum-icon); } .uhrzeit:before { content:var(--link-uhrzeit-icon); } .information:before { content:var(--link-information-icon); } /* ------------------------ Google Link Footer ------------------------ */ footer .pin { padding-left:30px; display:block; position:relative; } footer .pin:before { content:var(--link-ort-icon); margin-right:15px; position:absolute; top:2px; left:0px; } /* ------------------------ BUTTONS ------------------------ */ @media (min-width:0px) and (max-width:767px) { .btn:not(:last-child) { margin-bottom:10px; } } .btn, .frame-type-menu_section ul li a, .frame-type-menu_subpages ul li a{ padding: 10px 15px 10px 15px; border-radius:0px; display:inline-block; border:1px solid; } .btn-lg { padding: 13px 20px 13px 20px; border-radius:0px; display:inline-block; border:1px solid; } .btn, .btn-lg { position:relative; } .btn:hover, .btn-lg:hover { text-decoration:none; } /* More */ .btn.btn-more:after, .frame-type-menu_section ul li a:after, .frame-type-menu_subpages ul li a:after{ content:var(--link-more-icon); display:inline-block; margin-left:5px; } /* Extern */ .btn.btn-extern:after{ content:var(--link-extern-icon); display:inline-block; margin-left:5px; } /* Back */ .btn.btn-back:before { content:var(--link-back-icon); display:inline-block; margin-right:5px; } /* ---------- Button Primary ---------- */ .btn-primary { color: var(--white); background-color: var(--primary); border-color: var(--primary); } .bg-primary .btn-primary, .bg-comic .btn-primary{ color: var(--bs-body-color) !important; background-color: var(--white); border-color: var(--white); } .btn-primary:hover, .bg-primary .btn-primary:hover, .bg-primary .btn-primary:focus, .bg-primary .btn-primary:focus, .bg-primary .btn-primary.focus, .bg-comic .btn-primary:hover, .bg-comic .btn-primary:focus, .bg-comic .btn-primary:focus, .bg-comic .btn-primary.focus{ color: var(--white) !important; background-color: var(--primary); border-color: var(--bs-body-color); } .bg-secondary .btn-primary:hover, .bg-secondary .btn-primary:focus, .bg-secondary .btn-primary:focus, .bg-secondary .btn-primary.focus { color: var(--white) !important; background-color: var(--primary); border-color: var(--white); } .btn-primary.focus, .btn-primary:focus { color: var(--white); background-color: var(--bs-body-color); border-color: var(--bs-body-color); box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5) } .btn-primary.disabled, .btn-primary:disabled { color: var(--white); background-color: var(--bs-body-color); border-color: var(--bs-body-color); } /* Icon */ .btn-primary.btn-more:after, .btn-primary.btn-extern:after, .btn-primary.btn-back:before{ color:var(--white); } .btn-primary.btn-more:hover:after, .btn-primary.btn-extern:hover:after, .btn-primary.btn-back:hover:before{ color:var(--white); } /* ---------- Button Outline Dark ---------- */ .btn-outline-dark, .frame-type-menu_section ul li a, .frame-type-menu_subpages ul li a{ color: var(--bs-body-color); background-color: white; border:1px solid var(--bs-body-color); } .btn-outline-dark:hover, .frame-type-menu_section ul li a:hover, .frame-type-menu_subpages ul li a:hover { color: var(--white) !important; background-color: var(--primary); border:1px solid var(--bs-body-color); } .bg-secondary .btn-outline-dark { color: var(--white) !important; background-color: var(--bs-body-color); border-color: var(--white); } .bg-secondary .btn-outline-dark:hover, .bg-secondary .btn-outline-dark:focus, .bg-secondary .btn-outline-dark:focus, .bg-secondary .btn-outline-dark.focus{ color: var(--white) !important; background-color: var(--primary-dark); border-color: var(--primary-dark); } /* Icon */ .btn-outline-dark.btn-more:after, .btn-outline-dark.btn-extern::after, .btn-outline-dark.btn-back::before, .frame-type-menu_section ul li a:after, .frame-type-menu_subpages ul li a:after{ color:var(--primary); } .btn-outline-dark.btn-more:hover:after, .btn-outline-dark.btn-extern:hover:after, .btn-outline-dark.btn-back:hover:before, .frame-type-menu_section ul li:hover a:after, .frame-type-menu_subpages ul li:hover a:after { color:var(--white); } .btn-success { color: #fff; background-color: var(--success); border-color: var(--success) } .btn-success:hover { color: #fff; background-color: var(--success-hover); border-color: var(--success-hover); } .btn-success.focus, .btn-success:focus { color: #fff; background-color: var(--success-hover); border-color: var(--success-hover); box-shadow: 0 0 0 .2rem rgba(72, 180, 97, .5) } .btn-success.disabled, .btn-success:disabled { color: #fff; background-color: var(--success); border-color: var(--success); } .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: #1e7e34; border-color: #1c7430 } .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(72, 180, 97, .5) } /* ------------------------ Datei-Uploads-Liste ------------------------ */ @media (min-width:992px) { .ce-uploads { width:100%; column-count: 2; column-gap: 30px; } } .ce-uploads li { margin: 0em 0em var(--abstand-ganzklein) 0em; } .ce-uploads li a:before { position:absolute; } .ce-uploads span, .news-related-files-link span{ display: inline-block; margin-left: 25px; } .ce-uploads .ce-uploads-filesize, .news-related-files-size{ font-size:var(--font-size-small); display:block; margin-top:2px; color:var(--gray); } .ce-uploads .ce-uploads-filesize:before, .news-related-files-size:before{ content:"Dateigröße: "; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- FARBEN ZUWEISEN ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .bg-primary{ background-color:var(--primary) !important; color:var(--white); } .text-primary { color:var(--primary) !important; } .bg-secondary { background-color:var(--secondary) !important; color:var(--white); } .text-secondary { color:var(--secondary) !important; } .bg-primary .text-secondary, .bg-secondary .text-secondary, .bg-primary-multi, .bg-primary .text-primary{ color:var(--white) !important; } .bg-light { background-color:var(--light) !important; color:var(--bs-body-color); } /* wenn auf grau dann nicht grau */ .container-fluid:not(.bg-white):not(.style-1)[class*="bg-"] .card.bg-light{ background-color:var(--white) !important; color:var(--bs-body-color); } .text-light { color:var(--light) !important; } .bg-dark:not(.style-1):not(.style-2) { background-color:var(--dark) !important; color:var(--white); } .text-dark { color:var(--dark) !important; } .bg-primary .text-dark, .bg-secondary .text-dark{ color:var(--white) !important; } .bg-comic { background-image:url(../../../redaktion/images/backgrounds/Hintergrund-Comic-rot.svg); background-size:cover; background-repeat:no-repeat; background-position:center center; color:var(--white); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- ABSTÄNDE ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width:767px) { main .content > .container-fluid, main .content > .frame-type-shortcut > .ce-body > .container-fluid, #hero > .container-fluid:not(.fullheight) { padding-top:var(--section-phone-padding); padding-bottom:var(--section-phone-padding); } main .content > .container-fluid:not([class*="bg"]) + .container-fluid[class*="bg"][class*="style-1"], main .content > .container-fluid[class*="bg"][class*="style-1"] + .container-fluid:not([class*="bg"]){ margin-top:-40px; } main .news-related.news-related-files { margin-top:var(--section-phone-padding) !important; margin-bottom:var(--section-phone-padding) !important; } main .news-list-view.templatelayout-20 .news-list-item, main .news-list-view.templatelayout-30 .news-list-item, main .news-list-view.templatelayout-40 .news-list-item, main .frame-type-menu_abstract .flip-container, main .frame-type-menu_section { margin-bottom:var(--abstand-normal); } main div[class*="col-"]:not(.d-sm-none) + div[class*="col-"], main .col-md-4:not(.d-sm-none) + .col-md-4, main .news.news-single .col-md-8 + .col-md-4, main .content > .container-fluid > .container > div + div, main .container > div + div, main .col-lg-4:not([class*="-md-"]):not(:first-child), main .col-lg-6:not([class*="-md-"]):not(:first-child), main .grid-2col:not(:first-child), footer .row > div + div { margin-top:var(--abstand-normal); } main .templatelayout-30 .newstext .col-md-10 { margin-top:0em !important; } main .news-search-result.templatelayout-30 .news-list-item, main div[class*="col-"] > div:not(:last-child), main .news-list-view.templatelayout- .news-list-item { margin-bottom:var(--abstand-klein); } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px){ main .content > .container-fluid, main .content > .frame-type-shortcut > .ce-body > .container-fluid, #hero > .container-fluid:not(.fullheight) { padding-top:var(--section-tablet-padding); padding-bottom:var(--section-tablet-padding); } main .content > .container-fluid:not([class*="bg"]) + .container-fluid[class*="bg"][class*="style-1"], main .content > .container-fluid[class*="bg"][class*="style-1"] + .container-fluid:not([class*="bg"]){ margin-top:-60px; } main .news-related.news-related-files { margin-top:var(--section-tablet-padding) !important; margin-bottom:var(--section-tablet-padding) !important; } /*.col-md-6 > div + div,*/ main .content > .container-fluid > .container > div:not(.d-md-none) + div, main .container > div:not(.d-md-none) + div, main .col-md-12:not(.vcard):not(.d-md-none) + .col-md-12:not(.vcard), main div[class*="grid-"]:not([class*="backgroundimage-"]):not([class*="bg-"]) + div[class*="grid-"]:not([class*="backgroundimage-"]):not([class*="bg-"]), .col-lg-3.col-md-6:nth-child(3), .col-lg-3.col-md-6:nth-child(4), .col-lg-4.col-md-12:not(:first-child), .col-md-6 > div:not(.d-md-none) + div, .col-md-12 > div:not(.d-md-none) + div, main .col-lg-4:not([class*="-md-"]):not(:first-child), main .col-lg-6:not([class*="-md-"]):not(:first-child), main .grid-2col:not(:first-child) { margin-top:var(--abstand-normal); } main .news-list-view.templatelayout-40 .news-list-item, main .news-search-result.templatelayout-30 .news-list-item, main .frame-type-menu_abstract .flip-container, main .col-lg-4.d-md-none, main .news-list-view.templatelayout- .news-list-item, main div[class*="col-"] > .card:not(:last-child) main .col-lg-4:not([class*="-md-"]), main div[class*="col-"] > div:not(:last-child) { margin-bottom:var(--abstand-normal); } main .news-list-view.templatelayout-20 .news-list-item, main .news-list-view.templatelayout-30 .news-list-item { margin-bottom:var(--abstand-gross); } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .frame-space-before-extra-small { margin-top:var(--abstand-ganzklein); } .frame-space-after-extra-small { margin-bottom:var(--abstand-ganzklein); } .frame-space-before-small { margin-top:var(--abstand-klein); } .frame-space-after-small { margin-bottom:var(--abstand-klein); } .frame-space-before-medium { margin-top:var(--abstand-mittel); } .frame-space-after-medium { margin-bottom:var(--abstand-mittel); } .frame-space-before-large { margin-top:var(--abstand-gross); } .frame-space-after-large { margin-bottom:var(--abstand-gross); } .frame-space-before-extra-large { margin-top:var(--abstand-ganzgross); } .frame-space-after-extra-large { margin-bottom:var(--abstand-ganzgross); } main .content > .container-fluid > .container > div:not([class*="frame-space"]) + div:not([class*="frame-space"]), main .container > div:not([class*="frame-space"]) + div:not([class*="frame-space"]){ margin-top:var(--abstand-ganzgross); } main .col-lg-12:not(.d-lg-none) + .col-lg-12 { margin-top:var(--abstand-normal); } main .news-list-view.templatelayout-20 .news-list-item, main .news-list-view.templatelayout-30 .news-list-item, main .news-list-view.templatelayout-40 .news-list-item, main .news-search-result.templatelayout-30 .news-list-item{ margin-bottom:var(--abstand-gross); } main .news-list-view.templatelayout- .news-list-item, main div[class*="col-"] > .card:not(:last-child), main div[class*="col-"] > div:not(:last-child), main .frame-type-menu_abstract .card, main .frame-type-menu_abstract .flip-container{ margin-bottom:var(--abstand-normal); } main .content > .container-fluid, main .content > .frame-type-shortcut > .ce-body > .container-fluid, #hero > .container-fluid:not(.fullheight) { padding-top:var(--section-desktop-padding); padding-bottom:var(--section-desktop-padding); } main .content > .container-fluid:not([class*="bg"]) + .container-fluid[class*="bg"][class*="style-1"], main .content > .container-fluid[class*="bg"][class*="style-1"] + .container-fluid:not([class*="bg"]){ margin-top:-90px; } main .news-related.news-related-files { margin-top:var(--section-desktop-padding) !important; margin-bottom:var(--section-desktop-padding) !important; } } /* X-Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { main .content > .container-fluid, main .content > .frame-type-shortcut > .ce-body > .container-fluid, #hero > .container-fluid:not(.fullheight) { padding-top:var(--section-bigdesktop-padding); padding-bottom:var(--section-bigdesktop-padding); } main .content > .container-fluid:not([class*="bg"]) + .container-fluid[class*="bg"][class*="style-1"], main .content > .container-fluid[class*="bg"][class*="style-1"] + .container-fluid:not([class*="bg"]){ margin-top:-90px; } main .news-related.news-related-files { margin-top:var(--section-bigdesktop-padding) !important; margin-bottom:var(--section-bigdesktop-padding) !important; } main .news-list-view.templatelayout-20 .news-list-item, main .news-list-view.templatelayout-30 .news-list-item, main .news-list-view.templatelayout-40 .news-list-item, main .news-search-result.templatelayout-30 .news-list-item { margin-bottom:var(--abstand-ganzgross); } } /* Wenn zwei transparente Container aufeinander folgen */ main .content > .container-fluid:not([class*="bg"]) + .container-fluid:not([class*="bg"]) { padding-top:0em; } /* Wenn zwei Container mit Style-Angabe aufeinander folgen */ @media (min-width:0px) and (max-width:991px) { main .content > .container-fluid[class*="bg-"].style-1 + .container-fluid[class*="bg-"].style-1 { padding-top:0em; } } main .content > .container-fluid .container-fluid > .container-header:first-child { padding-left:0em !important; padding-right:0em !important; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- FLEX LAYOUT ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ div[class*="col-"].d-flex, div[class*="col-"].d-flex[class*="justify-"] > div, div[class*="col-"].d-flex[class*="align-"] > div, div[class*="col-"].d-flex[class*="ms-flex-"] > div, .grid-container[class*="justify"] > .container, .grid-container[class*="align"] > .container { /* Iris hat hier important bei ausgeblendet */ display: -ms-flexbox; display: flex; flex-direction:column; } div[class*="col-"].d-flex[class*="justify-"], div[class*="col-"].d-flex[class*="align-"], div[class*="col-"].d-flex[class*="ms-flex-"], .mouseover.bg-primary-multi.align-items-start .card-body, .mouseover.bg-primary-multi.align-items-center .card-body, .mouseover.bg-primary-multi.align-items-end .card-body { display: -ms-flexbox; display: flex; /*flex-direction:row;*/ flex-direction:column; } @media (min-width:0px) and (max-width:575px) { .d-flex.d-none.d-sm-block, .d-flex.d-none.d-md-block, .d-flex.d-none.d-lg-block, .d-flex.d-none.d-xl-block, .d-flex.d-none.d-xxl-block, .d-flex.d-xs-none{ display:none !important; } } @media (min-width:576px) and (max-width:767px) { div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="sm-block"] > div{ display:flex !important; } .d-flex.d-sm-none{ display:none !important; } } @media (min-width:768px) and (max-width:991px) { div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="md-block"] > div{ display:flex !important; } .d-flex.d-md-none{ display:none !important; } } @media (min-width:992px) and (max-width:1199px) { div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="lg-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="lg-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="lg-block"] > div{ display:flex !important; } .d-flex.d-lg-none{ display:none !important; } } @media (min-width:1200px){ div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="sm-block"] > div, div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="md-block"] > div, div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="lg-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="lg-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="lg-block"] > div, div[class*="col-"].d-flex[class*="justify-"][class*="d-none-"][class*="xl-block"] > div, div[class*="col-"].d-flex[class*="align-"][class*="d-none-"][class*="xl-block"] > div, div[class*="col-"].d-flex[class*="ms-flex-"][class*="d-none-"][class*="xl-block"] > div{ display:flex !important; } .d-flex.d-xl-none{ display:none !important; } } div[class*="col-"].d-flex[class*="justify-"] > div:last-child, div[class*="col-"].d-flex[class*="align-"] > div:last-child, div[class*="col-"].d-flex[class*="ms-flex-"] > div:last-child { flex-direction:column; } div[class*="col-"].d-flex[class*="justify-"] > .frame-type-image:last-child, div[class*="col-"].d-flex[class*="align-"] > .frame-type-image:last-child, div[class*="col-"].d-flex[class*="ms-flex-"] > .frame-type-image:last-child{ flex-direction:column; flex-wrap:wrap; } /* :not(.align-content-center) hinzugefügt bei allen punkten */ div[class*="col-"].d-flex:not(.align-content-center) > div:only-child:not(.flip-container):not(.quadrat), main div[class*="col-"].d-flex:not(.align-content-center) .frame-type-list, div[class*="col-"].d-flex:not(.align-content-center) .frame-type-list .ce-body, div[class*="col-"].d-flex:not(.align-content-center) .frame-type-list .ce-body .tx-ttaddress, div[class*="col-"].d-flex:not(.align-content-center) .frame-type-list .ce-body .tx-ttaddress .tt_address_list, div[class*="col-"].d-flex:not(.align-content-center) .frame-type-list .ce-body .tx-ttaddress .tt_address_list .row, div[class*="col-"].d-flex:not(.align-content-center) > .frame-type-html > .ce-body, div[class*="col-"].d-flex:not(.align-content-center) > .frame-type-html > .ce-body > .card, div[class*="col-"].d-flex:not(.align-content-center) > .frame-type-shortcut > .ce-body, div[class*="col-"].d-flex:not(.align-content-center) > .frame-type-shortcut > .ce-body > .card, div[class*="col-"].d-flex:not(.align-content-center) > .news-list-item.veranstaltung .card .ce-body, div[class*="col-"] > div[class*="grid-"] > div[class*="bg-"] { height:100%; } /* Card Content gestreckt auf 100% und Inhalt Space between */ .menu-item-abstract.card.bg-light .ce-body, div[class*="col-"].d-flex > .card.imgorient-7 .ce-body .ce-textpic .ce-textcontent .ce-bodytext, .tt_address_list .vcard .card-body, div[class*="col-"].d-flex > .news-list-item.veranstaltung .card .ce-body, div[class*="col-"].d-flex > .frame-type-shortcut > .ce-body > .card.imgorient-7 .ce-body .ce-textpic .ce-textcontent .ce-bodytext{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } div[class*="col-"].d-flex.align-items-start > div, div[class*="col-"].d-flex.align-items-start > .frame-type-image .ce-body, .mouseover.align-items-start .card-body, .mouseover.bg-primary-multi.align-items-start .card-body, .frame-type-menu_subpages.align-items-start > div > ul, .grid-container.align-items-start > .container { -ms-flex-align: flex-start !important; align-items: flex-start !important; } div[class*="col-"].d-flex.align-items-center > div, div[class*="col-"].d-flex.align-items-center > .frame-type-image .ce-body, .mouseover.align-items-center .card-body, .mouseover.bg-primary-multi.align-items-center .card-body, .frame-type-menu_subpages.align-items-center > div > ul, .grid-container.align-items-center > .container { -ms-flex-align: center !important; align-items: center !important; } div[class*="col-"].d-flex.align-items-end > div, div[class*="col-"].d-flex.align-items-end > .frame-type-image .ce-body, .mouseover.align-items-end .card-body, .mouseover.bg-primary-multi.align-items-end .card-body, .frame-type-menu_subpages.align-items-end > div > ul, .grid-container.align-items-end > .container { -ms-flex-align: flex-end !important; align-items: flex-end !important; } div[class*="col-"].d-flex.align-content-start > div, div[class*="col-"].d-flex.align-content-start > .frame-type-image .ce-body, .mouseover.align-content-start .card-body, .mouseover.bg-primary-multi.align-content-start .card-body, .frame-type-menu_subpages.align-content-start > div > ul, .grid-container.align-content-start > .container { -ms-flex-line-pack: flex-start !important; align-content: flex-start !important; } div[class*="col-"].d-flex.align-content-center > div, div[class*="col-"].d-flex.align-content-center > .frame-type-image .ce-body, .mouseover.align-content-center .card-body, .mouseover.bg-primary-multi.align-content-center .card-body, .frame-type-menu_subpages.align-content-center > div > ul, .grid-container.align-content-center > .container { -ms-flex-line-pack: center !important; align-content: center !important; } div[class*="col-"].d-flex.align-content-end > div, div[class*="col-"].d-flex.align-content-end > .frame-type-image .ce-body, .mouseover.align-content-end .card-body, .mouseover.bg-primary-multi.align-content-end .card-body, .frame-type-menu_subpages.align-content-end > div > ul, .grid-container.align-content-end > .container { -ms-flex-line-pack: flex-end !important; align-content: flex-end !important; } div[class*="col-"].d-flex.justify-items-start > div, div[class*="col-"].d-flex.justify-items-start > .frame-type-image .ce-body, .mouseover.justify-items-start .card-body, .mouseover.bg-primary-multi.justify-items-start .card-body, .frame-type-menu_subpages.justify-items-start > div > ul, .grid-container.justify-items-start > .container { -ms-flex-justify: flex-start !important; justify-items: flex-start !important; } div[class*="col-"].d-flex.justify-items-center > div, div[class*="col-"].d-flex.justify-items-center > .frame-type-image .ce-body, .mouseover.justify-items-center .card-body, .mouseover.bg-primary-multi.justify-items-center .card-body, .frame-type-menu_subpages.justify-items-center > div > ul, .grid-container.justify-items-center > .container { -ms-flex-justify: center !important; justify-items: center !important; } div[class*="col-"].d-flex.justify-items-end > div, div[class*="col-"].d-flex.justify-items-end > .frame-type-image .ce-body, .mouseover.justify-items-end .card-body, .mouseover.bg-primary-multi.justify-items-end .card-body, .frame-type-menu_subpages.justify-items-end > div > ul, .grid-container.justify-items-end > .container { -ms-flex-justify: flex-end !important; justify-items: flex-end !important; } div[class*="col-"].d-flex.justify-content-start > div, div[class*="col-"].d-flex.justify-content-start > .frame-type-image .ce-body, .mouseover.justify-content-start .card-body, .mouseover.bg-primary-multi.justify-content-start .card-body, .frame-type-menu_subpages.justify-content-start > div > ul, .grid-container.justify-content-start > .container { -ms-flex-pack: flex-start !important; justify-content: flex-start !important; } div[class*="col-"].d-flex.justify-content-center > div, div[class*="col-"].d-flex.justify-content-center > .frame-type-image .ce-body, .mouseover.justify-content-center .card-body, .mouseover.bg-primary-multi.justify-comntent-center .card-body, .frame-type-menu_subpages.justify-content-center > div > ul, .grid-container.justify-content-center > .container { -ms-flex-pack: center !important; justify-content: center !important; } div[class*="col-"].d-flex.justify-content-end > div, div[class*="col-"].d-flex.justify-content-end > .frame-type-image .ce-body, .mouseover.justify-content-end .card-body, .mouseover.bg-primary-multi.justify-content-end .card-body, .frame-type-menu_subpages.justify-content-end > div > ul, .grid-container.justify-content-end > .container { -ms-flex-pack: flex-end !important; justify-content: flex-end !important; } /* Wenn etwas rechtsbündig angeordnet ist wird es bei 100% Breite linksbündig */ @media (min-width:0px) and (max-width:991px) { div[class*="col-md-12"].d-flex.justify-content-end > div, div[class*="col-md-12"].d-flex.justify-content-end > .frame-type-image .ce-body { -ms-flex-pack: flex-start !important; justify-content: flex-start !important; } } /* ------------------------ Spalten ausblenden ------------------------ */ @media (min-width:0px) and (max-width:575px) { .d-flex.d-none.d-sm-block, .d-flex.d-none.d-md-block, .d-flex.d-none.d-lg-block, .d-flex.d-none.d-xl-block, .d-flex.d-none.d-xxl-block{ display:none !important; } } @media (min-width:576px) and (max-width:767px) { .d-flex.d-none.d-md-block, .d-flex.d-none.d-lg-block, .d-flex.d-none.d-xl-block, .d-flex.d-none.d-xxl-block{ display:none !important; } .d-flex.d-none.d-sm-block { display:flex !important; } } @media (min-width:768px) and (max-width:991px) { .d-flex.d-none.d-lg-block, .d-flex.d-none.d-xl-block, .d-flex.d-none.d-xxl-block{ display:none !important; } .d-flex.d-none.d-sm-block, .d-flex.d-none.d-md-block{ display:flex !important; } } @media (min-width:992px) and (max-width:1199px) { .d-flex.d-none.d-xl-block, .d-flex.d-none.d-xxl-block{ display:none !important; } .d-flex.d-none.d-sm-block, .d-flex.d-none.d-md-block, .d-flex.d-none.d-lg-block { display:flex !important; } } @media (min-width:1200px){ .d-flex.d-none.d-xxl-block { display:none !important; } .d-flex.d-none.d-sm-block, .d-flex.d-none.d-md-block, .d-flex.d-none.d-lg-block, .d-flex.d-none.d-xl-block { display:flex !important; } } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- LAYOUT ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ Header ------------------------ */ .header .container-fluid, .header .container-fluid .container, .header .container-fluid .container .headercontent { height:100%; } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) { header.header { height:calc(var(--navigationheight-phone) + var(--meta-nav-height)); padding-top:15px; padding-bottom:15px; display: flex; justify-content: center; flex-direction: column; } header.header.sticky { height:calc(var(--navigationheight-sticky-phone) + var(--meta-nav-height)); background-color:#ffffff; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { header.header { height:calc(var(--navigationheight-tablet) + var(--meta-nav-height)); padding-top:15px; padding-bottom:15px; justify-content: flex-start; } header.header.sticky { height:calc(var(--navigationheight-sticky-tablet) + var(--meta-nav-height)); } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { header.header { height:calc(var(--navigationheight-desktop) + var(--meta-nav-height)); } header.header.sticky { height:calc(var(--navigationheight-sticky-desktop) + var(--meta-nav-height)); } } /* ------------------------ Logo ------------------------ */ header.header .signet { display:none; } header.header .logo { display:block; } header.header.sticky .signet { display:block; } header.header.sticky .logo { display:none; } @media (min-width: 0px) { header.header .logo-content img { /* Nach der Höhe ausrichten*/ /* height:calc((var(--navigationheight-phone) + var(--meta-nav-height)) - var(--nav-abstand-phone)*2); width:auto; */ width:180px; height:auto; } header.header.sticky .logo-content img { /* Nach der Höhe ausrichten*/ /* height:calc((var(--navigationheight-sticky-phone) + var(--meta-nav-height)) - var(--nav-abstand-phone)*2); width:auto; */ width:180px; height:auto; } header.header .signet { display:none; } } @media (min-width: 768px) { header.header .logo-content { display:flex; align-items:end; } header.header .logo-content img { /* Nach der Höhe ausrichten*/ /* height:calc((var(--navigationheight-tablet) + var(--meta-nav-height)) - var(--nav-abstand-tablet)*2); width:auto; */ width:220px; height:auto; } header.header.sticky .logo-content img { /* Nach der Höhe ausrichten*/ /* height:calc((var(--navigationheight-sticky-tablet) + var(--meta-nav-height)) - var(--nav-abstand-tablet)*2); width:auto; */ width:220px; height:auto; } } @media (min-width: 992px) { header.header .logo-content img { /* Nach der Höhe ausrichten*/ /* height:calc((var(--navigationheight-desktop) + var(--meta-nav-height)) - var(--nav-abstand-desktop)*2); width:auto; */ width:220px; height:auto; } header.header.sticky .logo-content img { /* Nach der Höhe ausrichten*/ /* height:calc((var(--navigationheight-sticky-desktop) + var(--meta-nav-height)) - var(--nav-abstand-desktop)*2); width:auto; */ width:220px; height:auto; } } /* ------------------------ Header sticky ------------------------ */ header.header { position:absolute; top:0; left:0; width:100%; background-color:white; } /* The sticky class is added to the header with JS when it reaches its scroll position */ header.header.sticky { position: fixed; top: 0; width: 100%; z-index:5; -webkit-appearance: none; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) { header + main, header + #hero { padding-top:calc(var(--navigationheight-phone) + var(--meta-nav-height)); } header.sticky + main, header.sticky + #hero { padding-top:calc(var(--navigationheight-sticky-phone) + var(--meta-nav-height)); } /* auf Suchergebnisseite anderes Padding, da Suche ausgeblendt */ #uid71 header + main, #uid71 header + #hero { padding-top:calc(var(--navigationheight-phone) + var(--meta-nav-height)); } #uid71 header.sticky + main, #uid71 header.sticky + #hero { padding-top:calc(var(--navigationheight-sticky-phone) + var(--meta-nav-height)); } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { header + main, header + #hero { padding-top:calc(var(--navigationheight-tablet) + var(--meta-nav-height)); } header.sticky + main, header.sticky + #hero { padding-top:calc(var(--navigationheight-sticky-tablet) + var(--meta-nav-height)); } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { header + main, header + #hero { padding-top:calc(var(--navigationheight-desktop) + var(--meta-nav-height)); } header.sticky + main, header.sticky + #hero { padding-top:calc(var(--navigationheight-sticky-desktop) + var(--meta-nav-height)); } } /* ------------------------ Hero ------------------------ */ @media (min-width:992px) { /* fullheight*/ #hero .fullheight.container-fluid { height:calc(100vh - var(--navigationheight-desktop)); overflow:hidden; } } #hero .fullheight.container-fluid .container{ height:100%; } #hero .fullheight.container-fluid .container { display:flex; flex-direction: column; justify-content: center; } #hero .grid-container[class*="backgroundimage"] h1, #hero .grid-container[class*="backgroundimage"] h2 { color:var(--white); } /* fullwidth */ #hero .fullwidth.container-fluid { padding-right: 0px; padding-left: 0px; overflow:hidden; } #hero .fullwidth.container-fluid .container { width:100%; max-width:100%; padding:0em; height:100%; } #hero .fullwidth.container-fluid .container *:not(.video-embed-item){ height:100%; width:100%; margin:0em; padding:0em; } #hero .fullwidth.container-fluid .video-embed-item { object-fit: cover; height:100%; width:100%; } /* ------------------------ Footer ------------------------ */ footer { color:var(--footercontent); background-color:var(--footerbackground); line-height:1.25em; } footer a{ color:var(--footernavlink); } footer a:hover{ color:var(--footerlinkhover); text-decoration:none; } footer { width:100%; bottom:0; } footer .nav-link { padding:0em; } /* Footer mit Linie oben */ .footer-bottom .border-top { border-top:1px solid var(--white) !important; } @media (min-width: 0px) and (max-width:767px) { footer .justify-content-end, footer .justify-content-end > div{ justify-content:flex-start !important; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) { footer > .container-fluid { padding-top:var(--section-phone-padding); } .footer-bottom .border-top { padding-top:var(--abstand-normal); padding-bottom:var(--abstand-normal); margin-top:var(--abstand-normal); } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { footer > .container-fluid { padding-top:var(--section-tablet-padding); } .footer-bottom .border-top { padding-top:var(--abstand-mittel); padding-bottom:var(--abstand-mittel); margin-top:var(--abstand-mittel); } footer .footer-top .toolbar { align-items: flex-end; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { footer > .container-fluid { padding-top:var(--section-bigdesktop-padding); } } /* X-Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { footer > .container-fluid { padding-top:var(--section-desktop-padding); } } /* XX-Large devices (larger desktops, 1400px and up) */ @media (min-width: 1400px) { footer > .container-fluid { padding-top:var(--section-bigdesktop-padding); } } /* ------------------------ Social Media Buttons ------------------------ */ /* Footer Bottom */ .footer-bottom .flex-row .socialmedia-icon + .socialmedia-icon { margin-left: var(--abstand-ganzklein); } .footer-bottom .flex-row .socialmedia-icon img { filter: invert(99%) sepia(8%) saturate(156%) hue-rotate(351deg) brightness(117%) contrast(100%); max-height:20px; } /* Header Bottom */ header .socialmedia-icon + .socialmedia-icon { margin-left: var(--abstand-ganzklein); } header .socialmedia-icon img { filter: invert(70%) sepia(7%) saturate(13%) hue-rotate(335deg) brightness(96%) contrast(79%); max-height:20px; } /* Social Media in der Mobile Navbar */ header .navbar-collapse .socialmedia-icons { margin-top:15px; } header .navbar-collapse .socialmedia-icon + .socialmedia-icon { margin-left: var(--abstand-ganzklein); } header .navbar-collapse .socialmedia-icon img { filter: invert(70%) sepia(7%) saturate(13%) hue-rotate(335deg) brightness(96%) contrast(79%); max-height:20px; } .socialmedia-icon img:hover { filter: invert(14%) sepia(76%) saturate(6351%) hue-rotate(350deg) brightness(86%) contrast(114%) !important; } /* ------------------------ User Tools ------------------------ */ .usertools { height:var(--meta-nav-height); } /* Allgemein */ .usertools.head, .usertools.navi, .usertools.footer{ display:flex; flex-direction:row; } .usertools.head, .usertools.footer{ justify-content: flex-end; } @media (min-width:0px) and (max-width:575px) { .usertools.footer{ justify-content: space-between; } } .usertools.navi { justify-content: space-between; } /* Navigation */ .usertools.navi { margin-top:var(--abstand-normal); } @media (min-width: 768px) and (max-width:991px){ .usertools > div > div { justify-content:space-between; } } .usertool { font-size:calc(var(--font-size-small)*0.9); line-height:1.1em; border-radius:4px; padding-top:2px; padding-bottom:2px; padding-left:8px; height:35px; } .usertool { display:flex; flex-direction:column; justify-content: center; } .usertool + .usertool { margin-left:5px; } .usertool.sprachen { min-width:140px; background-position:right center; background-repeat:no-repeat; padding-right:35px; } .usertool.sprachen ul { padding-left:0em; } .usertool.sprachen ul li { float:left; list-style-type: none; padding-left:0em; margin-bottom:0em; } .usertool.suche { padding-right:0em; } /* ------------------------ Toolbar ------------------------ */ .toolbar-content .cookie-set:hover { color:var(--primary); } /* Header */ header .usertools .toolbar-content { margin-left:30px; } header .usertools .toolbar-content .nav { flex-direction:row; } header .usertools .toolbar-content .nav a.nav-link { font-size:var(--font-size-small); color:#a5a5a5 !important; padding-left:5px; padding-right:5px; } header .usertools .toolbar-content .nav a.nav-link:hover { color:var(--primary) !important; } header .usertools .toolbar-content .nav .nav-item .nav-link { display:inline-block; } header .usertools .toolbar-content .nav .nav-item + .nav-item:before { content:""; width:2px; height:10px; display:inline-block; background-color:#a5a5a5; } /* Navigation Mobile */ header .navbar-collapse .toolbar-content .nav, header .navbar-collapse .toolbar-content .cookie-set{ flex-direction:column; font-size:var(--font-size-small); } header .navbar-collapse .toolbar { margin-top:var(--abstand-normal); } header .navbar-collapse .toolbar .toolbar-content a.nav-link { padding:0em; } /* Footer */ footer .toolbar-content .nav { flex-direction:column; } /* --------------------------------------------- Suchvorschläge in Toolbar und Suchergebnisseite ----------------------------------------------- */ .tx-indexedsearch-form + ul#vorschlaege{ height:0; margin-bottom:0em !important; } .tx-indexedsearch-form.show + ul#vorschlaege { height:auto; } .kesearchbox ul#vorschlaege{ position:absolute; list-style-type: none; } .kesearchbox ul#vorschlaege { top:45px; width:100%; padding:0px 0px 0px 0px; } .kesearchbox ul#vorschlaege li{ padding:5px 5px 5px 15px; background-color:var(--light); border-bottom:1px solid var(--white); min-height:45px; display:flex; align-content: center; flex-wrap:wrap; font-style: italic; display:relative; cursor:pointer; } .kesearchbox ul#vorschlaege li { font-size:1em; } .kesearchbox ul#vorschlaege li:first-child{ border-top:1px solid var(--white); } .kesearchbox ul#vorschlaege li:hover{ background-color:var(--primary); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SUCHE - SUCHERGEBNISSE ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* Tools in Navigation */ /* Suche und Sprachauswahl */ header .tools { display: flex; flex-direction: row; } @media (min-width:768px) { header .tools { margin-left:var(--abstand-klein); } } @media (min-width:768px) and (max-width:1199px) { header .tools { margin-bottom:var(--abstand-klein); } } /* Normales Suchformular + Bibliothekssuche + Projektsuche */ /* Suchformular */ .tx-indexedsearch-form { position:relative; width:200px; } /* ----------- Suchfeld ----------- */ /* Suchfeld im Header */ .usertools.head .tx-indexedsearch-searchbox-sword { border:1px solid var(--bs-body-color); color:var(--bs-body-color); background-color:transparent; width:200px; } /* Placeholder im Header */ .usertools.head input.tx-indexedsearch-searchbox-sword::placeholder, .usertools.head input.tx-indexedsearch-searchbox-sword:-ms-input-placeholder, .usertools.head input.tx-indexedsearch-searchbox-sword::-ms-input-placeholder{ color:var(--gray) !important; opacity:1; } /* Suchfeld in Navi Mobile */ .usertools.navi .tx-indexedsearch-searchbox-sword { border:1px solid var(--bs-body-color); color:var(--bs-body-color); background-color:transparent; width:200px; } /* Placeholder im Header */ .usertools.navi input.tx-indexedsearch-searchbox-sword::placeholder, .usertools.navi input.tx-indexedsearch-searchbox-sword:-ms-input-placeholder, .usertools.navi input.tx-indexedsearch-searchbox-sword::-ms-input-placeholder{ color:var(--gray) !important; opacity:1; } /* Suchfeld im Footer */ .usertools.footer .tx-indexedsearch-searchbox-sword { border:1px solid var(--white); color:var(--white); background-color:transparent; width:200px; } /* Placeholder im Footer */ .usertools.footer input.tx-indexedsearch-searchbox-sword::placeholder, .usertools.footer input.tx-indexedsearch-searchbox-sword:-ms-input-placeholder, .usertools.footer input.tx-indexedsearch-searchbox-sword::-ms-input-placeholder{ color:var(--white) !important; opacity:1; } .tx-indexedsearch-searchbox-sword { border-radius:20px; font-size:var(--font-size-small); opacity:1 !important; padding-left:10px; padding-right:30px; height:25px; position:relative; } @media (min-width:0px) and (max-width:767px) { .tx-indexedsearch-searchbox-sword { height:35px; } } /* ----------- Suchbutton ----------- */ /* Suchbutton im Header */ .usertools.head .tx-indexedsearch-searchbox-button, .usertools.head .tx-indexedsearch-searchbox-button:hover{ background-image: url(../images/icons/icon-lupe-black.svg); } /* Suchbutton in Navi Mobile */ .usertools.navi .tx-indexedsearch-searchbox-button, .usertools.navi .tx-indexedsearch-searchbox-button:hover{ background-image: url(../images/icons/icon-lupe-black.svg); } /* Suchbutton im Footer */ .usertools.footer .tx-indexedsearch-searchbox-button, .usertools.footer .tx-indexedsearch-searchbox-button:hover{ background-image: url(../images/icons/icon-lupe-weiss.svg); } .tx-indexedsearch-searchbox-button, .tx-indexedsearch-searchbox-button:hover{ background-repeat: no-repeat; background-size: 20px; background-position: center right; position: absolute; right: 0; color: transparent; padding: 0em; margin-right: 10px; } @media (min-width:0px) and (max-width:767px) { .tx-indexedsearch-searchbox-button, .tx-indexedsearch-searchbox-button:hover{ height:35px; } } /* Suchbereich unten bei Mobile */ .suchbereich.mobil { background-color:var(--primary); position:fixed; bottom:0; width:100%; padding-top:var(--abstand-ganzklein); padding-bottom:var(--abstand-ganzklein); min-height:25px; } .suchbereich.mobil .tx-indexedsearch-searchbox-sword { border:1px solid white !important; width:100%; } /* Results */ /* Anzahl Ergebnisse */ .tx-kesearch-pi1 #kesearch_num_results { color: var(--bs-body-color) !important; font-size:var(--font-size-small) !important; margin-bottom: var(--abstand-ganzklein) !important; } /* Result Box */ .tx-kesearch-pi1 .tx-indexedsearch-res { background-color:var(--light) !important; padding:var(--card-padding) !important; margin-bottom: var(--abstand-ganzklein) !important; } /* Result Number */ #kesearch_results .result-list-item .result-number, #kesearch_results .result-list-item .result-title { font-size:1em !important; } /* Result Titel */ #kesearch_results .result-list-item .result-number, #kesearch_results .result-list-item .result-title { font-size: 1.5rem !important; line-height: 1.1em !important; margin-bottom: 10px !important; display:block; } /* Link in Title nicht kursiv */ #kesearch_results .result-list-item .result-number a, #kesearch_results .result-list-item .result-title a { font-style:normal !important; } /* gesuchtes Wort hervorheben */ .tx-kesearch-pi1 #kesearch_results .result-title .hit, .tx-kesearch-pi1 #kesearch_results .result-teaser .hit{ border-bottom:1px solid var(--primary); color: var(--bs-body-color) !important; } /* gesuchtes Wort hervorheben */ .tx-kesearch-pi1 #kesearch_results .result-title a:hover .hit, .tx-kesearch-pi1 #kesearch_results .result-teaser a:hover .hit{ color: var(--primary) !important; } .tx-kesearch-pi1 #kesearch_results .result-title .hit { font-weight: bold !important; } .tx-kesearch-pi1 #kesearch_results .result-teaser .hit { font-weight:normal !important; } /* Fließtext in Result */ .tx-kesearch-pi1 #kesearch_results .result-teaser { color: var(--bs-body-color) !important; font-size:1em !important; font-weight:normal !important; } .tx-kesearch-pi1 .tx-indexedsearch-stand, .tx-kesearch-pi1 .tx-indexedsearch-info { font-size:var(--font-size-small) !important; } .tx-kesearch-pi1 .tx-indexedsearch-info { margin-bottom: var(--abstand-ganzklein) !important; } #kesearch_pagebrowser_bottom .pages_total { border-top: 5px solid var(--bs-body-color) !important; margin-top: var(--abstand-mittel) !important; } .tx-kesearch-pi1 .result_txt { font-size:var(--font-size-small) !important; width:50%; float:left; color: var(--bs-body-color) !important; text-align:left; margin-top: 50px; } .kesearch_pagebrowser { width:50%; float:right; text-align:right; } .kesearch_pagebrowser ul { display:flex !important; flex-direction:row; justify-content: flex-end } .kesearch_pagebrowser ul li + li { margin-left:5px; } .kesearch_pagebrowser ul li { display:flex !important; align-items: center; text-align:center; background-color:var(--primary) !important; font-size:var(--font-size-small) !important; } #kesearch_pagebrowser_top a, #kesearch_pagebrowser_bottom a { padding: 0px !important; background-color:var(--secondary) !important; padding:2px 8px 2px 8px !important; font-style:normal; } #kesearch_pagebrowser_top a:hover, #kesearch_pagebrowser_bottom a:hover { background-color:var(--primary) !important; color:var(--bs-body-color) !important; } #kesearch_pagebrowser_top a.current, #kesearch_pagebrowser_bottom a.current { background-color:var(--bs-body-color) !important; font-weight: normal !important; color: #ffffff !important; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SPRACHAUSWAHL ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ Sprache in Toolbar ------------------------ */ .sprache { display: flex; flex-direction: row; align-items: center; position: relative; cursor:pointer; } .sprache .current { font-size:0.7em; display: block; text-align: center; margin-left:5px; } .sprache .sprachauswahl { position: absolute; right:0px; width: 200px; height:0px; -webkit-transition: height 0.5s ease 0s,width 0.5s ease 0s; -moz-transition: height 0.5s ease 0s,width 0.5s ease 0s; -o-transition: height 0.5s ease 0s,width 0.5s ease 0s; transition: height 0.5s ease 0s,width 0.5s ease 0s; float:left; overflow:hidden; display:flex; justify-content: flex-end; } .sprache .sprachauswahl.show { height:30px; } .sprachauswahl { line-height:1em; } .sprache .sprachen-content { float:left; padding:0em 0px 0em 0px; height:100%; } .sprache .sprachauswahl ul.list { padding-left:0em; float:left; margin-bottom:0em; height:100%; width:100%; } .sprache .sprachauswahl ul li { list-style-type: none; float:left; font-size:var(--font-size-small); margin-bottom:0em; background-color:transparent; background-color:transparent; border-radius: 20px; height: 25px; } .sprache .sprachauswahl ul li.option, .sprache .sprachauswahl ul li.option a { width:45px; display:flex; align-items: center; justify-content: center; } .sprache .sprachauswahl ul li:hover, .sprache .sprachauswahl ul li:hover a{ border-radius: 20px; } .sprache .sprachauswahl ul li.option + li.option { margin-left:5px; } @media (min-width:0px) and (max-width:991px) { .sprache { margin-left:0px; justify-content: flex-start; } .sprache .sprachauswahl { top:0px; } .sprache .sprachauswahl ul li.option, .sprache .sprachauswahl ul li.option a { color:var(--bs-body-color); } .sprache .sprachauswahl ul li:hover, .sprache .sprachauswahl ul li:hover a { border:1px solid var(--primary); background-color:var(--primary); color:var(--white) !important; } } @media (min-width:768px) { .sprache { margin-left:10px; justify-content: center; } } .sprache .sprachauswahl { top:35px; } /* Text Sprache im Header */ .usertools.head .sprache .sprachauswahl ul li { border:1px solid var(--bs-body-color); color:var(--bs-body-color); } .usertools.head .current { color:var(--bs-body-color); } .usertools.head .sprache .current { color:var(--bs-body-color); } .usertools.head .tool.sprache.active .current, .usertools.head .sprache:hover .current { color:var(--primary); } .usertools.head .sprache .sprachauswahl ul li.option, .usertools.head .sprache .sprachauswahl ul li.option a { color:var(--bs-body-color); } .usertools.head .sprache .sprachauswahl ul li:hover, .usertools.head .sprache .sprachauswahl ul li:hover a { border:1px solid var(--primary); background-color:var(--primary); color:var(--white) !important; } /* Text Sprache in Navi */ .usertools.navi .sprache .sprachauswahl ul li { border:1px solid var(--bs-body-color); color:var(--bs-body-color); } .usertools.navi .sprache .current { color:var(--bs-body-color); } .usertools.navi .sprache .current { color:var(--bs-body-color); } .usertools.navi .tool.sprache.active .current, .usertools.navi .sprache:hover .current { color:var(--primary); } .usertools.navi .sprache .sprachauswahl ul li.option, .usertools.navi .sprache .sprachauswahl ul li.option a { color:var(--bs-body-color); } .usertools.navi .sprache .sprachauswahl ul li:hover, .usertools.navi .sprache .sprachauswahl ul li:hover a { border:1px solid var(--primary); background-color:var(--primary); color:var(--white) !important; } /* Text Sprache im Footer */ .usertools.footer .sprache .sprachauswahl ul li { border:1px solid var(--white); color:var(--white); } .usertools.footer.sprache .current { color:var(--white); } .usertools.footer .sprache .current { color:var(--white); } .usertools.footer .tool.sprache.active .current, .usertools.footer .sprache:hover .current { color:var(--primary); } .usertools.footer .sprache .sprachauswahl ul li.option, .usertools.footer .sprache .sprachauswahl ul li.option a { color:var(--white); } .usertools.footer .sprache .sprachauswahl ul li:hover, .usertools.footer .sprache .sprachauswahl ul li:hover a { border:1px solid var(--white); background-color:var(--white); color:var(--primary) !important; } /* Bild im Footer umfärben von Schwarz nach weiss */ .usertools.footer .sprache img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(352deg) brightness(104%) contrast(102%); } /* Bild bei hover umfärben in Primary */ .usertools.head .sprache:hover img, .usertools.navi .sprache:hover img, .usertools.footer .sprache:hover img, .tool.sprache.active img{ filter: invert(13%) sepia(71%) saturate(5648%) hue-rotate(340deg) brightness(92%) contrast(92%); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SLIDER ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ SLIDER STARTSEITE ------------------------ */ .grid-slider a { color:var(--bs-body-color); text-decoration:none; border-bottom:0px solid black !important; cursor:pointer !important; } /* Allgmeine Angaben Startseiten Slider */ .startseite #hero .grid-slider .owl-dot span { background-color:var(--secondary); } .startseite #hero .grid-slider .owl-dot.active span { background-color:var(--primary); } .startseite #hero .grid-slider .owl-dot span { display:block; width:100%; height:100%; } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width: 767px){ .startseite #hero .grid-slider .owl-dots { margin-top:var(--abstand-klein); display: flex; flex-direction: row; } .startseite #hero .grid-slider .owl-dot { height:4px; } /* Aufteilung je nach Anzahl der Slides */ .startseite #hero .grid-slider .slidecount-2 .owl-dot { width:calc(100% /2); } .startseite #hero .grid-slider .slidecount-3 .owl-dot { width:calc(100% /3); } .startseite #hero .grid-slider .slidecount-4 .owl-dot { width:calc(100% /4); } .startseite #hero .grid-slider .slidecount-5 .owl-dot { width:calc(100% /5); } .startseite #hero .grid-slider .slidecount-6 .owl-dot { width:calc(100% /6); } .startseite #hero .grid-slider .slidecount-7 .owl-dot { width:calc(100% /7); } .startseite #hero .grid-slider .slidecount-8 .owl-dot { width:calc(100% /8); } .startseite #hero .grid-slider .owl-dot + .owl-dot { border-left:5px solid white; } .startseite #hero .grid-slider .owl-dot span { height:100%; width:100%; display:block; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { /* Startseite Dots als Linien links neben Slider */ .startseite #hero .grid-slider .owl-dots { position:absolute; width:2px; height:100%; top:0; left:-25px; display: flex; flex-direction: column; } .startseite #hero .grid-slider .owl-dot { width:2px; } .startseite #hero .grid-slider .owl-dot + .owl-dot { border-top:5px solid white; } /* Aufteilung je nach Anzahl der Slides */ .startseite #hero .grid-slider .slidecount-2 .owl-dot { height:calc(321px /2); } .startseite #hero .grid-slider .slidecount-3 .owl-dot { height:calc(321px /3); } .startseite #hero .grid-slider .slidecount-4 .owl-dot { height:calc(321px /4); } .startseite #hero .grid-slider .slidecount-5 .owl-dot { height:calc(321px /5); } .startseite #hero .grid-slider .slidecount-6 .owl-dot { height:calc(321px /6); } .startseite #hero .grid-slider .slidecount-7 .owl-dot { height:calc(321px /7); } .startseite #hero .grid-slider .slidecount-8 .owl-dot { height:calc(321px /8); } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { /* Aufteilung je nach Anzahl der Slides */ .startseite #hero .grid-slider .slidecount-2 .owl-dot { height:calc(433px /2); } .startseite #hero .grid-slider .slidecount-3 .owl-dot { height:calc(433px /3); } .startseite #hero .grid-slider .slidecount-4 .owl-dot { height:calc(433px /4); } .startseite #hero .grid-slider .slidecount-5 .owl-dot { height:calc(433px /5); } .startseite #hero .grid-slider .slidecount-6 .owl-dot { height:calc(433px /6); } .startseite #hero .grid-slider .slidecount-7 .owl-dot { height:calc(433px /7); } .startseite #hero .grid-slider .slidecount-8 .owl-dot { height:calc(433px /8); } } /* Large devices (desktops, 992px and up) */ @media (min-width: 1200px) { /* Aufteilung je nach Anzahl der Slides */ .startseite #hero .grid-slider .slidecount-2 .owl-dot { height:calc(518px /2); } .startseite #hero .grid-slider .slidecount-3 .owl-dot { height:calc(518px /3); } .startseite #hero .grid-slider .slidecount-4 .owl-dot { height:calc(518px /4); } .startseite #hero .grid-slider .slidecount-5 .owl-dot { height:calc(518px /5); } .startseite #hero .grid-slider .slidecount-6 .owl-dot { height:calc(518px /6); } .startseite #hero .grid-slider .slidecount-7 .owl-dot { height:calc(518px /7); } .startseite #hero .grid-slider .slidecount-8 .owl-dot { height:calc(518px /8); } } /* Startseite Button vor und zurück */ .startseite #hero .grid-slider .owl-carousel .owl-nav button { width:25px; height:90px; display:block; } .startseite #hero .grid-slider .owl-carousel .owl-nav button.owl-prev:before { content:url(../images/icons/icon-slider-gross-prev-weiss.svg); } .startseite #hero .grid-slider .owl-carousel .owl-nav button.owl-next:before{ content:url(../images/icons/icon-slider-gross-next-weiss.svg); } .startseite #hero .owl-nav span { display:none; } /* Gestaltung Text und Bild */ .startseite #hero .grid-slider .owl-item .ce-bodytext { /*background-image:url(../../../dfi/abbildungen/hintergrund/hintergrund-papierstruktur-75-transparent.png);*/ /*background-size:auto;*/ background-color:rgba(255,255,255,0.75); padding:var(--abstand-mittel); display:flex; align-items: center; position:absolute; bottom:0; right:0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } /* Phone bis Tablet hoch */ /* Bild und Text untereinander nicht nebeneinander */ @media (min-width: 0px) and (max-width:767px) { .startseite #hero .owl-carousel { margin-bottom:20px; } .startseite #hero .grid-slider .owl-stage { display:flex; } /* .startseite #hero .grid-slider .owl-item, .startseite #hero .grid-slider .owl-item .ce-bodytext { background-color:var(--light); } */ .startseite #hero .grid-slider .owl-item .ce-bodytext { position:relative; background-image:none; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; /*padding:var(--abstand-klein);*/ padding:var(--abstand-ganzklein) 1px var(--abstand-ganzklein) 1px; align-content: flex-start; } } .startseite #hero { margin-bottom: 1px; } /* Phone */ /* @media (min-width: 0px) { .startseite #hero .grid-slider .owl-item .ce-bodytext { min-height:100%; } } */ /* Small devices (landscape phones, 576px and up) */ /* @media (min-width: 576px) { .startseite #hero .grid-slider .owl-item .ce-bodytext { min-height:100%; } } */ /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .startseite #hero .grid-slider .owl-item .ce-bodytext { min-height:230px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .startseite #hero .grid-slider .owl-item .ce-bodytext { min-height:285px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 1200px) { .startseite #hero .grid-slider .owl-item .ce-bodytext { min-height:350px; } } /* ------------------------------------------------ ALLGEMEINE SLIDERANGABEN - ContentSlider ------------------------------------------------ */ .grid-slider .ce-textpic, .grid-slider .ce-image, .grid-slider .ce-nowrap .ce-bodytext, .grid-slider .ce-gallery, .ce-row, .grid-slider .ce-uploads li, .grid-slider .ce-uploads div{ /*overflow:visible;*/ } /* Pfeil Nav */ .grid-slider .owl-nav { position: absolute; top: 0; bottom: 0; left:0; right:0; margin: auto; width:98%; height:90px; display: flex; justify-content: space-between; flex-direction: row; } /* ------------------------------------------------ ALLGEMEINE SLIDERANGABEN - ContentSlider style-2 --> über die ganze Breite Content ------------------------------------------------ */ .owl-content-carousel.style-2 .owl-stage-outer { overflow:visible; } /* ------------------------------------------------------------- ---------------------------------------------------------------- NEWS - Slider (Meldung) und CONTENT - Slider ---------------------------------------------------------------- ------------------------------------------------------------- */ /* ------------------------ Listenansicht ------------------------ */ main .content-item.owl-carousel, .owl-carousel.newsslider{ padding-bottom:50px; } /* Buttons next und prev */ .owl-carousel.newsslider .owl-nav, main .owl-carousel.content-item .owl-nav{ display:flex; flex-direction: row; justify-content: space-between; position:absolute; width:100%; bottom:0; z-index:555; } /* Auf kleinen Devices Pfeilchen vor und zurück ausblenden */ @media (min-width: 0px) and (max-width:575px) { .owl-carousel.newsslider .owl-nav, main .owl-carousel.content-item .owl-nav { display:none; } } main .owl-carousel.content-item .owl-nav { top: auto; bottom: 0; margin: 0 auto; width: 100%; height: 45px; } main .owl-carousel.content-item.slider-navi-links .owl-nav { margin: 0 0; } .owl-carousel.newsslider .owl-nav button.owl-prev, main .owl-carousel.content-item .owl-nav button.owl-prev{ padding:0px !important; } .owl-carousel.newsslider .owl-nav button.owl-next, main .owl-carousel.content-item .owl-nav button.owl-next{ padding:0px !important; } .owl-carousel.newsslider .owl-nav button.owl-prev:before, .owl-carousel.newsslider .owl-nav button.owl-next:before, main .owl-carousel.content-item .owl-nav button.owl-prev:before, main .owl-carousel.content-item .owl-nav button.owl-next:before{ width:auto; color:var(--primary); } .owl-carousel.newsslider .owl-nav button.owl-prev:before, main .owl-carousel.content-item .owl-nav button.owl-prev:before{ content: var(--link-back-icon); display: inline-block; margin-right: 5px; } .owl-carousel.newsslider .owl-nav button.owl-next:before, main .owl-carousel.content-item .owl-nav button.owl-next:before{ content: var(--link-more-icon); display: inline-block; margin-left: 5px; } .owl-carousel.newsslider .owl-nav button span, main .owl-carousel.content-item .owl-nav button span{ display:none; } /* Zähler Dots */ .owl-carousel.newsslider .owl-dots, main .owl-carousel.content-item .owl-dots{ display:flex; flex-direction:row; justify-content: center; align-items: center; height:45px; left:0; right:0; margin:0 auto; width:70%; position:absolute; bottom:0; z-index:555; } .owl-carousel.newsslider .owl-dot, main .owl-carousel.content-item .owl-dot{ background-color:#cccccc; width:12px; height:12px; border-radius:12px; } .owl-carousel.newsslider .owl-dot.active, main .owl-carousel.content-item .owl-dot.active{ background-color:var(--primary); } .container-fluid.bg-primary .owl-carousel.newsslider .owl-dot.active, main .container-fluid.bg-primary .owl-carousel.content-item .owl-dot.active{ background-color:var(--dark); } .owl-carousel.newsslider .owl-dot + .owl-dot, main .owl-carousel.content-item .owl-dot + .owl-dot{ margin-left:15px; } @media (min-width:0px) and (max-width:575px) { .owl-carousel.newsslider .owl-dot + .owl-dot, main .owl-carousel.content-item .owl-dot + .owl-dot{ margin-left:5px; } /* Ausrichtung Sliderinhalte ändern */ main .grid-slider.phone-text-align-center .owl-carousel.content-item { text-align:center; } main .grid-slider.phone-text-align-center .owl-carousel.content-item .ce-gallery, main .grid-slider.phone-text-align-center .owl-carousel.content-item .ce-gallery .ce-row, main .grid-slider.phone-text-align-center .owl-carousel.content-item .ce-gallery .ce-column { width:100%; } main .grid-slider.phone-text-align-center .owl-carousel.content-item figure.image { margin-left:auto; margin-right:auto; } } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- NAVIGATION ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .navbar-ebene { display:flex; } /* Desktop klein Suche über Navigation switchen */ @media (min-width:992px) and (max-width:1199px) { .navbar-ebene { flex-direction:column; align-items: flex-end; } .navbar-ebene .navbar { order:2; } } @media (min-width:992px) { .navbar-nav > li { margin-bottom:0em; } } /* ------------------------ Ausrichtung Navi Mobile ------------------------ */ @media screen and (max-width: 991px) { header .headercontent { display:flex; justify-content: space-between; align-items:center; } header .navbar-collapse { flex-direction:column; } header .navbar-collapse > * { width:100%; } header .navbar-collapse { width:100%; position: fixed; top: 0px; left: 0; z-index: 777; background-color: var(--white); display: -webkit-box; display: flex; opacity: 0; transition: all 0.25s; height: 0px; overflow-y: scroll; } header .navbar-collapse.show { opacity: 100; height: 100%; } header ul.navbar-nav li { margin-bottom:0em; } } /* Mobile Phone */ @media screen and (min-width: 0px) and (max-width:767px){ header:not(.sticky) .navbar-collapse { padding-top:100px; } header.sticky .navbar-collapse { padding-top:100px; } } /* Mobile Tablet */ @media screen and (min-width: 768px) and (max-width:991px){ header:not(.sticky) .navbar-collapse { padding-top:150px; } header.sticky .navbar-collapse { padding-top:105px; } } /* ------------------------ Ausrichtung Desktop ------------------------ */ @media screen and (min-width: 992px) { header .nav-link { padding-top:0em; padding-bottom:0em; } header .headercontent { display:flex; justify-content: space-between; } header .headercontent .navbars { display: flex; flex-direction: column; justify-content: space-between; } } /* Pfeil Toggle ausblenden */ header .dropdown-toggle::after { display:none; } header .navbar { padding:0em; } /* ------------------------ 1. STUFE Mobile ------------------------ */ @media screen and (max-width: 991px) { header .navbar-nav a.level1 { color:var(--bs-body-color); } .level1-ifsub a:before, .level1-actifsub a:before { content:var(--link-plus-icon); font-family:var(--font-awesome-regular); font-style:normal; margin-left:5px; position:absolute; right:0; padding-top:10px; padding-bottom:10px; top:0; } header .navbar-nav .nav-item { border-bottom:1px solid var(--bs-body-color); } header .navbar-nav .nav-item > a { padding-top:10px; padding-bottom:10px; } header .navbar-nav .nav-item:first-child { border-top:1px solid var(--bs-body-color); } } /* ------------------------ 1. STUFE Desktop ------------------------ */ @media screen and (min-width: 992px) { header .navbar-nav a.level1 { color:var(--bs-body-color); padding:10px 15px 10px 15px !important; } header .navbar-nav .nav-item:first-child a.level1 { border:1px solid black; } header .navbar-nav .nav-item:not(:first-child) a.level1 { border-top:1px solid black; border-bottom:1px solid black; border-right:1px solid black; } header .navbar-nav a.level1:not(.btn):hover, header .navbar-nav .active a.level1:not(.btn){ color:var(--white) !important; background-color:var(--primary); } } /* ------------------------ 2. STUFE Allgemein ------------------------ */ /* ------------------------ DROOPDOWN ------------------------ */ @media (min-width:0px) { header .navbar-collapse { padding-right: 30px; padding-left: 30px; } } @media (min-width:576px) { header .navbar-collapse { padding-left:calc((100% - 510px)/2); padding-right:calc((100% - 510px)/2); } } @media (min-width:768px) { header .navbar-collapse { padding-left:calc((100% - 690px)/2); padding-right:calc((100% - 690px)/2); } } @media (min-width:992px) { header .navbar-collapse { padding-left:0px; padding-right:0px; } } /* Pfeile an die Dropdown Navipunkte */ header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item a:before { content:var(--link-more-icon); position:absolute; right:0; color:var(--primary); } /* Dropdown Navigationspunkte */ header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item { border-top:1px solid var(--bs-body-color); position:relative; } /* Abstand wegen Navipunkte Pfeile */ header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item a { padding-right:25px; padding-left:0em; } /* ------------------------ 2. STUFE Dropdown Mobile ------------------------ */ @media screen and (max-width: 991px) { header .navbar-nav .nav-item.dropdown.ifsub.show { padding-bottom:0px; } header .navbar-nav .nav-item.dropdown > a:focus { border:0px !important; box-shadow:0px !important; } .dropdown-menu { padding: 0em !important; margin: 0px 0px 0px 0px !important; background-color: transparent !important; border: 0px solid rgba(0,0,0,.15) !important; border-radius: 0rem !important; } header .navbar-nav > .nav-item > .dropdown-menu.menu-level2 .menu-content{ width: 100%; column-count: 1; column-gap:normal; } header .dropdown-menu > .container { max-width: 100%; width: 100%; padding:0em; } header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item:first-child { border-top:1px solid var(--bs-body-color); } header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item:last-child { border-bottom:0px solid var(--bs-body-color); } header .navbar-nav > .nav-item > .dropdown-menu/*, .container > div + div*/ { margin-top:0px; } /* Aussehen Links Dropdown */ header .dropdown-item[class*="level2"] { padding-top:0em; padding-bottom:0em; padding-left:0em; padding-right:0em; } header .dropdown-item[class*="level2"] a{ padding-top:10px; padding-bottom:10px; } header .dropdown-item[class*="level2"]:before { content:none !important; } header .dropdown-item[class*="level2"]:hover, header .dropdown-item[class*="level2"]:focus{ background-color:transparent; color:var(--primary); } header .dropdown-item[class*="level2"]:hover a, header .dropdown-item[class*="level2"]:focus a{ color:var(--primary); } } /* ------------------------ 2. STUFE Dropdown Desktop ------------------------ */ @media screen and (min-width: 992px) { /* Dropdown */ header .navbar-nav > .nav-item > .dropdown-menu { position: fixed !important; left: 0; width: 100% !important; background-color:var(--light) !important; top: calc((var(--navigationheight-desktop) + var(--meta-nav-height)) - 2px); padding-top: 40px; padding-bottom: 40px; z-index: 999; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25); border-radius: 0px; border:0px solid black; color: var(--bs-body-color); font-size:1em !important; } header.sticky .navbar-nav > .nav-item > .dropdown-menu { top: calc((var(--navigationheight-sticky-desktop) + var(--meta-nav-height)) - 2px); } header .navbar-nav > .nav-item.dropdown { position: static; } header .navbar-nav > .nav-item > .dropdown-menu .container .row { width:calc(100% + 30px); } /* Zweispaltige Aufteilung */ header .navbar-nav > .nav-item > .dropdown-menu.menu-level2 .menu-content{ width: 100%; column-count: 3; column-gap: 30px; } /* Aussehen Links Dropdown */ header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item { padding-top:10px; padding-bottom:10px; padding-left:0em; padding-right:0em; border-bottom:1px solid var(--bs-body-color); white-space: normal; } header .navbar-nav > .nav-item > .dropdown-menu .menu-content { display:flex; } header .dropdown-item[class*="level2"]:hover, header .dropdown-item[class*="level2"]:focus{ background-color:transparent; color:var(--primary); } header .dropdown-item[class*="level2"]:hover a, header .dropdown-item[class*="level2"]:focus a{ color:var(--primary); } } @media screen and (min-width: 1199px) { header .navbar-nav > .nav-item > .dropdown-menu .dropdown-item { white-space: nowrap; } } /* ------------------------ BURGER ------------------------ */ /* Phone und Tablet Variante */ @media screen and (max-width: 991px) { button.navbar-toggler { padding: 0px; font-size: 0px; border-radius: 0pc; transition: none; z-index: 999; } header button.navbar-toggler { /* top: 0; position: absolute; right: 0; */ } header.sticky button.navbar-toggler { /* top: -10px; position: absolute; right: 0; */ } .navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); } /* Navbar Toggle Farbe Startseite */ button.navbar-toggler .animated-icon span { background-color: var(--bs-body-color); } /* Navbar Toggle Farbe Wenn Navbar sticky */ button.navbar-toggler.collapsed .animated-icon span { background-color: var(--bs-body-color); } .animated-icon { width: 30px; height: 20px; position: relative; margin: 0px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } .animated-icon span { display: block; position: absolute; height: 1px; width: 100%; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; padding: 0px; } .animated-icon span:nth-child(1) { top: 0px; } .animated-icon span:nth-child(2), .animated-icon span:nth-child(3) { top: 10px; } .animated-icon span:nth-child(4) { top: 20px; } button.navbar-toggler:not(.collapsed) .animated-icon span:nth-child(1) { top: 11px; width: 0%; left: 50%; } button.navbar-toggler:not(.collapsed) .animated-icon span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } button.navbar-toggler:not(.collapsed) .animated-icon span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } button.navbar-toggler:not(.collapsed) .animated-icon span:nth-child(4) { top: 11px; width: 0%; left: 50%; } } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- CONTAINER ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .container-fluid > .container-header, .content > .frame-type-div > .ce-body > hr{ width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-header { max-width: 540px; } .content > .frame-type-div > .ce-body > hr { max-width: calc(540px - 60px); } } @media (min-width: 768px) { .container-header { max-width: 720px; } .content > .frame-type-div > .ce-body > hr { max-width: calc(720px - 60px); } } @media (min-width: 992px) { .container-header { max-width: 960px; } .content > .frame-type-div > .ce-body > hr { max-width: calc(960px - 60px); } } @media (min-width: 1200px) { .container-header { max-width: 1140px; } .content > .frame-type-div > .ce-body > hr { max-width: calc(1140px - 60px); } } .container-fluid { overflow:hidden; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- CARDS ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ Normale Card ------------------------ */ /* Allgemeines Aussehen von Normale Card */ .card { border: 0px solid rgba(0,0,0,.125); border-radius: 0rem; width:100%; } .card:not([class*="bg-"]) { background-color: #ffffff; } .card[class*="bg-"] { background-color: transparent; } /* Bei Tablet 3Spalter hat Text Trennungen */ @media (min-width: 768px) and (max-width:991px) { .col-lg-4.col-md-4 .card header, .col-lg-4.col-md-4 .card .ce-bodytext{ hyphens:auto } } /* Button immer ganz unten positionieren */ .card .ce-body { display: flex; flex-direction: column; /*height: 100%;*/ } .card .ce-body p:last-child { /* height:100%; position:relative; display:flex; */ /*align-items: flex-end;*/ } .card .card-body { padding:var(--card-padding); } /* Abstände in Normale Card */ /* mit Hintergrundfarbe */ div:not(.accordion) > .card > header, div:not(.accordion) > .card > .kategorie:first-child{ padding-top:var(--card-padding); padding-left:var(--card-padding); padding-right:var(--card-padding); } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width:767px) { /* mit Hintergrundfarbe */ div:not(.accordion) > .card > header, div:not(.accordion) > .card > .kategorie:first-child{ padding-top:var(--card-padding); } } div:not(.accordion) > .card > header + .ce-body { padding-bottom:var(--card-padding); padding-left:var(--card-padding); padding-right:var(--card-padding); } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width:767px) { div:not(.accordion) > .card > header + .ce-body { padding-bottom:var(--card-padding); } } div:not(.accordion) > .card > .kategorie + header { padding-top:0em; } div:not(.accordion) > .card > .ce-body:only-child, .grid-container.card, div[class*=col].card{ padding-top:var(--card-padding); padding-bottom:var(--card-padding); padding-left:var(--card-padding); padding-right:var(--card-padding); } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width:767px) { div:not(.accordion) > .card > .ce-body:only-child, .grid-container.card, div[class*="col"].card{ padding-top:var(--card-padding); padding-bottom:var(--card-padding); } } /* Bild-Überschift-Text */ div:not(.accordion) > .card.imgorient-7 > .ce-body:only-child { padding:0em; } div:not(.accordion) > .card.imgorient-7 > .ce-body:only-child .ce-textcontent, .vcard .card-body{ padding-top:var(--card-padding); padding-bottom:var(--card-padding); padding-left:var(--card-padding); padding-right:var(--card-padding); } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width:767px) { div:not(.accordion) > .card.imgorient-7 > .ce-body:only-child .ce-textcontent, .vcard .card-body{ padding-top:var(--card-padding); padding-bottom:var(--card-padding); } } .imgorient-7 .ce-column { width:100%; } .imgorient-7 figure { margin:auto auto; } main .imgorient-7:not(.card) .ce-gallery { padding-bottom:var(--card-padding); } /* Ansicht auf Tablet quer */ /* Infobox querformatig Bild neben Text */ @media (min-width: 768px) and (max-width:991px) { .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic, .col-md-12 .card.imgorient-7 .ce-textpic, .col-lg-4.d-md-none .tt_address_list .vcard .card, .col-md-12 .tt_address_list .vcard.col-12.d-flex .card, .vcard.col-md-12 .card { display:flex; flex-direction:row-reverse !important; } .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery, .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-textcontent, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery, .col-md-12 .card.imgorient-7 .ce-textpic .ce-textcontent, .col-lg-4.d-md-none .tt_address_list .vcard .card .xaddressImage, .col-lg-4.d-md-none .tt_address_list .vcard .card .card-body, .col-md-12 .tt_address_list .vcard.col-12.d-flex .card .xaddressImage, .col-md-12 .tt_address_list .vcard.col-12.d-flex .card .card-body, .vcard.col-md-12 .card .xaddressImage, .vcard.col-md-12 .card .card-body{ -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-textcontent:only-child, .col-lg-4.d-md-12 .card.imgorient-7 .ce-textpic .ce-textcontent:only-child, .col-lg-6.col-md-12 .card.imgorient-7 .ce-textpic .ce-textcontent:only-child{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row, .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column, .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image, .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image img, .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image a, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image img, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image a, .col-md-12 .card.bg-light .xaddressImage a, .col-md-12 .card.bg-light .xaddressImage a img, .col-md-12 .tt_address_list .vcard.col-12.d-flex .card .xaddressImage a, .col-md-12 .tt_address_list .vcard.col-12.d-flex .card .xaddressImage a img, .vcard.col-md-12 .card .xaddressImage a, .vcard.col-md-12 .card .xaddressImage a img{ height:100%; display:block; } .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image img, .col-lg-4.d-md-none .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image a img, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image img, .col-md-12 .card.imgorient-7 .ce-textpic .ce-gallery .ce-row .ce-column .image a img, .col-lg-4.d-md-none .card.bg-light .xaddressImage a img, .col-md-12 .tt_address_list .vcard.col-12.d-flex .card .xaddressImage a img, .vcard.col-md-12 .card .xaddressImage a img{ object-fit: cover; height:100% !important; } } /* ------------------------ Card Linie oben und unten ------------------------ */ .card.border-bottom {border-bottom: 0px solid black !important;} .card.border-top {border-top: 0px solid black !important;} .card.border-bottom:before { border-bottom: 0px solid black; content:""; width:100%; height:1px; background-color:var(--bs-body-color); position:absolute; left:0; top:0; } .card.border-top:after { border-top: 0px solid black; content:""; width:100%; height:1px; background-color:var(--bs-body-color); position:absolute; left:0; bottom:0; } .card.border-bottom.border-top:not([class*="bg-"]) > header, .card.border-bottom.border-top:not([class*="bg-"]) > header + .ce-body, .card.border-bottom.border-top:not([class*="bg-"]) > .ce-body:only-child { padding-left:0em; padding-right:0em; } /* ------------------------ Sprechblase ------------------------ */ .sprechblase.border { position: relative; border: 1px solid #000000 !important; margin-bottom:35px; float:left; } .sprechblase + .sprechblase { margin-top: var(--abstand-normal); } .sprechblase:before { content: ' '; position: absolute; width: 0; height: 0; left: -1px; top: 100%; border: 20px solid; border-color: #000000 transparent transparent #000000;} .sprechblase:after { content: ' '; position: absolute; width: 0; height: 0; left: 0px; top: 100%; border: 19px solid; } /* Sprechblase primary */ .sprechblase.bg-primary:after { border-color: var(--primary) transparent transparent var(--primary); } /* Sprechblase secondary */ .sprechblase.bg-secondary:after { border-color: var(--secondary) transparent transparent var(--secondary); } /* Sprechblase light */ .sprechblase.bg-light:after { border-color: var(--light) transparent transparent var(--light); } /* Sprechblase white */ .sprechblase.bg-white:after, .sprechblase:not([class*="bg-"]):after{ border-color: var(--white) transparent transparent var(--white); } /* ------------------------ Acccordeon ------------------------ */ .accordion .card-header button { background-color:transparent; width:100%; text-align:left; border:0; } .accordion .card { border-bottom:1px solid var(--bs-body-color) !important; } .accordion .card:first-child { border-top:1px solid var(--bs-body-color); } .accordion .card , .accordion .card-header { background-color:transparent !important; } .accordion .card-header button { display:block; padding: calc(var(--card-padding)/2) calc(var(--card-padding)/2) calc(var(--card-padding)/2) 0px; } .accordion .card-body { padding: 0px 0px calc(var(--card-padding)/2) 0px; } .accordion .card-header button { color:var(--bs-body-color) !important; } .accordion .card-header button:hover, .accordion .card-header button.card-link.collapsed:hover:after{ color:var(--primary) !important; } .accordion .card-header button.card-link.collapsed:after, .accordion .card-header button.card-link:after { position:absolute; right:0; } .accordion .card-header button.card-link.collapsed:after { content:var(--accordion-icon-normal); color:var(--primary); } .accordion .card-header button.card-link:after { content:var(--accordion-icon-active); color:var(--primary); } .accordion .card-header { padding:0em; border-bottom:0px solid var(--medium); margin-bottom:0px !important; } .accordion .card-header:hover { background-color:var(--primary); } .accordion > .card + .card { margin-top:0px; } /* Headline im Body Bereich ausblenden */ .accordion .card-body.accordion-body > div > header { display:none; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Quadratische Card ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* Small devices (landscape phones, 576px and up) */ @media (min-width: 0px) and (max-width:767px) { /* Auf Phone nicht quadratisch */ .col-lg-2 .card.quadrat, .col-lg-3 .card.quadrat, .col-lg-4 .card.quadrat, .col-lg-8 .col-lg-6 .card.quadrat, .col-lg-6 .card.quadrat, .col-lg-8 .card.quadrat, .col-lg-9 .card.quadrat, .col-lg-10 .card.quadrat{ height:auto; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .col-md-2 .card.quadrat { height:90px; } .col-md-3 .card.quadrat, .col-md-6 .col-md-6 .card.quadrat { height:150px; } .col-md-4 .card.quadrat, .col-md-8 .col-lg-6 .card.quadrat{ height:210px; } .col-md-6 .card.quadrat{ height:330px; } .col-md-8 .card.quadrat { height:450px; } .col-md-9 .card.quadrat { height:510px; } .col-md-10 .card.quadrat { height:570px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .col-lg-2 .card.quadrat { height:130px; } .col-lg-3 .card.quadrat, .col-lg-8 .col-lg-4 .card.quadrat{ height:210px; } .col-lg-4 .card.quadrat, .col-lg-8 .col-lg-6 .card.quadrat{ height:290px; } .col-lg-6 .card.quadrat { height:450px; } .col-lg-8 .card.quadrat { height:610px; } .col-lg-9 .card.quadrat { height:690px; } .col-lg-10 .card.quadrat { height:770px; } } /* Large devices (desktops, 1200px and up) */ @media (min-width: 1200px) { .col-lg-2 .card.quadrat { height:160px; } .col-lg-3 .card.quadrat { height:255px; } .col-lg-4 .card.quadrat, .col-lg-8 .col-lg-6 .card.quadrat{ height:350px; } .col-lg-6 .card.quadrat { height:490px; } .col-lg-8 .card.quadrat { height:730px; } .col-lg-9 .card.quadrat { height:825px; } .col-lg-10 .card.quadrat { height:870px; } } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Weitere Element ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------ Tabellen ------------------------ */ .ce-table th, .ce-table td { padding: calc(var(--card-padding)/1.5); background-color:var(--light); } .ce-table th, .ce-table td { border-top: 1px solid var(--bs-body-color); } .ce-table thead th { border-bottom: 1px solid var(--bs-body-color); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- NEWS ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ /* ------------------------------------------------ Allgemein ------------------------------------------------ */ /* ------------------------ Listenansicht ------------------------ */ .news-list-view.templatelayout- > .row { margin:0em; } .news-list-view.templatelayout- > .row { flex-direction:column; } /* Abstände Standard */ .news-list-view .kategorie, .news-list-view .headline, .news-list-view .lead { margin-bottom: var(--abstand-ganzklein); } /* Paginierung */ .pagination.col-12 { margin-left:15px; margin-right:15px; padding-left:15px; padding-right:15px; margin:auto; justify-content: flex-end; } .pagination.col-12:first-child { margin-bottom: var(--abstand-normal); } .pagination.col-12:last-child { margin-top: var(--abstand-normal); } ul.f3-widget-paginator li { padding: 3px 7px 3px 7px; font-size:var(--font-size-small); background-color:var(--light); } .pagination.col-12 ul.f3-widget-paginator li.current, .pagination.col-12 ul.f3-widget-paginator li:hover{ background-color:var(--bs-body-color); } .pagination.col-12 ul.f3-widget-paginator li.current, .pagination.col-12 ul.f3-widget-paginator li:hover, .pagination.col-12 ul.f3-widget-paginator li:hover a { color:var(--white); text-decoration:none; } .pagination.col-12 ul.f3-widget-paginator li + li { margin-left:5px; } .pagination.col-12 ul.f3-widget-paginator li a { color:var(--gray); } /* Alert - Keine Nachrichten */ .news .alert { padding: 0; } /* Top-News auf Startseite */ /* Teaserbereich Startseite */ .teaserbereich .row3col > div[class*="col-"] > div:not(.frame-type-news_pi1), .teaserbereich .news-list-view > .frame-type-text:not(.card) { padding-top:var(--card-padding); padding-bottom:var(--card-padding); } /* ------------------------ Einzelansicht ------------------------ */ .news.news-single a.back { margin-top: var(--abstand-gross); margin-bottom: var(--abstand-normal); display:block; } /* Related Files Liste */ .news-related.news-related-files ul { list-style-type: none; padding-left:0em; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- BILDER ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ main img:not([src*=".svg"]), #hero img:not([src*=".svg"]) { max-width:100%; width:100%; height:auto; } main img[src*=".svg"], #hero img[src*=".svg"] { max-width:none; height:auto; width:100%; } main .no-scale img[src*=".svg"], #hero .no-scale img[src*=".svg"] { max-width:none !important; width:auto !important; height: revert-layer; width:100% !important; } main li img { width:auto; } .ce-gallery, .news .thumbnail, figure.image{ position:relative; } .ce-gallery figcaption, .news .thumbnail .caption{ position: absolute; padding: 2px; bottom: 0; left: 0; background-color: rgba(0,0,0,0.35); color: #ffffff; margin: 5px; max-width: calc(100% - 10px); } .caption, .ce-gallery figcaption { font-size: calc(var(--font-size-small)/1.25); line-height: 1.1em; } .caption { margin-top:10px; } .newsbild img { height:100% !important; width:auto; object-fit: cover !important; max-width:100%; } .imgorient-7 .ce-gallery .ce-outer, .imgorient-7 .ce-gallery .ce-outer .ce-inner, .imgorient-7 .ce-gallery .ce-outer .ce-inner .ce-row, .imgorient-7 .ce-gallery .ce-outer .ce-inner .ce-row .ce-column, .imgorient-7 .ce-gallery .ce-outer .ce-inner .ce-row .ce-column .image, .imgorient-7 .card.imgorient-7 .image{ width:100%; } #hero figcaption { display:none; } /* No-Scale */ .ce-gallery.no-scale img { width:auto; } .ce-textpic.ce-center .ce-outer, .ce-textpic.ce-center .ce-inner{ width:100%; } @media (min-width:0px) and (max-width:767px) { .ce-intext .ce-gallery { margin:0em 0em var(--abstand-klein) 0em !important; width:100%; } .ce-intext .ce-gallery .ce-column, .ce-intext .ce-gallery .ce-column .image{ width:100%; } } .card .image figure { margin-bottom:0em; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- GRID ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .layout-2col.col-lines > .row > div[class*="col-"] + div[class*="col-"], .layout-3col.col-lines > .row > div[class*="col-"]:nth-child(2), .layout-3col.col-lines > .row > div[class*="col-"]:nth-child(3), .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(2), .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(3), .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(4){ border-left:1px solid var(--bs-body-color); } /* Col Lines auf Phone ausblenden */ @media (min-width: 0px) and (max-width:575px) { .layout-3col.col-lines > .row > div[class*="col-"]:nth-child(2), .layout-3col.col-lines > .row > div[class*="col-"]:nth-child(3), .layout-2col.col-lines > .row > div[class*="col-"] + div[class*="col-"], .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(2), .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(3), .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(4){ border-left:0px solid var(--bs-body-color); } } /* Bei Dunkelblau Linie weiss */ .container-fluid.bg-dark > .container > .grid-2col > .layout-2col.col-lines > .row > div[class*="col-"] + div[class*="col-"], .container-fluid.bg-dark > .layout-3col.col-lines > .row > div[class*="col-"]:nth-child(2), .container-fluid.bg-dark > .layout-3col.col-lines > .row > div[class*="col-"]:nth-child(3), .container-fluid.bg-dark > .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(2), .container-fluid.bg-dark > .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(3), .container-fluid.bg-dark > .layout-4col.col-lines > .row > div[class*="col-"]:nth-child(4){ border-color: #ffffff; } div[class*="layout-"].col-lines > .row { margin-left:-30px; margin-right:-30px; } .col-lines > .row > div[class*="col-"] { padding-left:30px; padding-right:30px; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SECTION-MENÜ INNERHALB EINER SEITE ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .frame-type-menu_section ul, .frame-type-menu_subpages ul{ display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px !important; margin-left: -15px !important; list-style-type: none; padding-left:0em; } @media (min-width:768px) and (max-width:991px) { .frame-type-menu_section ul, .frame-type-menu_subpages ul{ flex-direction:column; } } .frame-type-menu_section ul li, .frame-type-menu_subpages ul li { padding-left:15px; padding-right:15px; } .frame-type-menu_section ul li + li, .frame-type-menu_subpages ul li + li{ margin-left:0px; } /* Phone - Menü über die ganze Breite */ /* @media (min-width: 0px) and (max-width: 767px) { .frame-type-menu_section ul li, .frame-type-menu_subpages ul li{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom:5px; } */ } /* Tablet - 50% */ @media (min-width: 768px) and (max-width: 991px) { /* .frame-type-menu_section ul li, .frame-type-menu_subpages ul li{ -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; margin-bottom:10px; } */ } /* Desktop - 33% */ @media (min-width: 992px) { /* .frame-type-menu_section ul li, .frame-type-menu_subpages ul li{ -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; margin-bottom:15px; } */ } .frame-type-menu_section ul li a, .frame-type-menu_subpages ul li a { width:100%; } /* Phone - Höhe Element */ @media (min-width: 0px) { .frame-type-menu_section ul li a, .frame-type-menu_subpages ul li a{ /*min-height:35px;*/ } } /* Ipad - Höhe Element */ @media (min-width: 768px) { .frame-type-menu_section ul li a, .frame-type-menu_subpages ul li a{ /*min-height:55px;*/ } } /* Desktop - Höhe Element */ @media (min-width: 992px) { .frame-type-menu_section ul li a, .frame-type-menu_subpages ul li a{ /*min-height:55px;*/ } } /* --> ACHTUNG genaues Aussehen der Buttons bei CSS Angaben Buttons zu finden */ /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- SCROLL TO TOP ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .scrollToTop { height: 45px; width: 45px; background-color: rgba(0,0,0,.25); bottom: 60px; color: #fff; cursor: pointer; opacity: 1; position: fixed; display:none; right: 25px; text-align: center; transition: all 0.2s ease-in-out 0s; z-index: 2; border-radius: 50%; } .scrollToTop:hover { text-decoration:none; background-color: rgba(0,0,0,.5); } .scrollToTop .icon { width:100%; height:100%; display:flex !important; justify-content: center; align-items: center; } .scrollToTop .icon:before { content:var(--link-totop-icon); font-family:var(--font-awesome-regular); font-weight: 400; font-style:normal; display:inline-block; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Background-Image kombiniert mit Background-Color ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ div[class*="backgroundimage"].bg-dark, div[class*="backgroundimage"].bg-light, div[class*="backgroundimage"].bg-secondary, div[class*="backgroundimage"].bg-primary, div[class*="backgroundimage"].bg-white{ position:relative; flex-wrap:wrap; display:flex; justify-content:center; } div[class*="backgroundimage"].bg-dark > div, div[class*="backgroundimage"].bg-light > div, div[class*="backgroundimage"].bg-secondary > div, div[class*="backgroundimage"].bg-primary > div, div[class*="backgroundimage"].bg-white > div{ z-index:4; position:relative; } div[class*="backgroundimage"].bg-dark:before, div[class*="backgroundimage"].bg-light:before, div[class*="backgroundimage"].bg-secondary:before, div[class*="backgroundimage"].bg-primary:before, div[class*="backgroundimage"].bg-white:before{ content:""; width:100%; height:100%; opacity:0.65; position:absolute; z-index:4; top:0; left:0; } div[class*="backgroundimage"].bg-dark:before { background-color:var(--dark); } div[class*="backgroundimage"].bg-dark, div[class*="backgroundimage"].bg-dark .quelle{ color:var(--white); } div[class*="backgroundimage"].bg-light:before { background-color:var(--light); } div[class*="backgroundimage"].bg-light, div[class*="backgroundimage"].bg-light .quelle { color:var(--bs-body-color); } div[class*="backgroundimage"].bg-secondary:before { background-color:var(--secondary); } div[class*="backgroundimage"].bg-secondary, div[class*="backgroundimage"].bg-secondary .quelle { color:var(--white); } div[class*="backgroundimage"].bg-primary:before { background-color:var(--primary); } div[class*="backgroundimage"].bg-primary, div[class*="backgroundimage"].bg-primary .quelle { color:var(--bs-body-color); } div[class*="backgroundimage"].bg-white:before { background-color:var(--white); } div[class*="backgroundimage"].bg-white, div[class*="backgroundimage"].bg-white .quelle { color:var(--bs-body-color); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Grid Container gleich auf erster Ebene (z.b. 50-50 Element) ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ @media (min-width:0px) and (max-width:767px) { main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .card { padding:var(--section-phone-padding) } } @media (min-width:768px) and (max-width:991px) { main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .card { padding:var(--section-tablet-padding) } } @media (min-width:992px) and (max-width:1199px) { main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .card { padding:var(--section-desktop-padding) } } @media (min-width:1200px) { main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .card { padding:var(--section-bigdesktop-padding) } } /* Wenn in Col ein Bild dann covern */ main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .frame-type-image:only-child, main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .frame-type-image:only-child *:not(img){ height:100%; width:100%; } main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .frame-type-image:only-child figure { display:flex; } main > .content > div[class*="grid-"] > div[class*="grid-"] > .row > div[class*="col-"] > .frame-type-image:only-child img { object-fit: cover; max-width: none; height: auto; width: auto; min-width:100%; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Cookie-Management ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ #CookieBox p, #CookieBox h1, #CookieBox h2, #CookieBox h3, #CookieBox a, #CookieBox .cookie-btn, #CookieBox .cookie-btn:hover{ color:var(--bs-body-color); } .intro h2 + p, .box-cookie-management-in h2 + p{ text-align:center; } #CookieBox .cookie-management, #CookieBox .cookie-refuse, #CookieBox .cookie-btn, #CookieBox, #CookieBox .cookie-management, #CookieBox .cookie-refuse, #CookieBox .cookie-fix .cookieback, #CookieBox .cookie-fix .cookie-refuse{ border-radius: 0px !important; } #CookieBox .cookie-management, #CookieBox .cookie-refuse{ cursor: pointer; background-color: transparent; } #CookieBox .cookie-accept a, a.cursor, .cookieback, .cookie-refuse{ padding:10px 15px 7px 15px; } #CookieBox .cookie-accept a, #CookieBox .cookie-btn{ background-color:var(--primary) !important; } a.cursor, #CookieBox .cookie-fix .cookieback, #CookieBox .cookie-fix .cookie-refuse{ background-color:var(--light) !important; } a.cursor { display:inline-block; } #CookieBox .intro p { /*width:100%;*/ margin:0 auto; } .cookiemanagement a:hover { text-decoration:none; } #CookieBox h2 { margin-bottom:20px !important; } #CookieBox .cookie-legal a { color:var(--bs-body-color); } .cookie-legal a:hover { text-decoration:none !important; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Formulare ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .powermail_fieldwrap { position: relative; } fieldset + fieldset { margin-top:2em; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0px; margin-right:7px; } legend { margin-bottom: 1em; } /***** Labels werden klein auf Focus *****/ .form-control { display: block; width: 100%; height: 45px; padding: 10px 10px 10px 10px; color: var(--gray); background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; font-weight:normal; line-height:1em !important; } .powermail_fieldwrap.focus .form-control, /* Bei Select gleich nach oben schieben */ .powermail_fieldwrap.powermail_fieldwrap_type_select .form-control, .powermail_fieldwrap.powermail_fieldwrap_type_select:focus .form-control{ padding-top:1em; } .form-control::placeholder, .form-control:-ms-input-placeholder, .form-control::-ms-input-placeholder{ border:0px solid black; } .form-control::placeholder { border:0px solid black !important; } .powermail_fieldwrap_type_input label, .powermail_fieldwrap_type_select label, .powermail_fieldwrap_type_date label, .powermail_fieldwrap_type_textarea label{ position: absolute !important; z-index:4 !important; pointer-events: none; -webkit-transition: top .15s,color .15s,font-size .15s; transition: top .15s,color .15s,font-size .15s; color: #999999; margin: 0; } /* Placeholder normal */ .powermail_fieldwrap:not(.focus).powermail_fieldwrap_type_input label, .powermail_fieldwrap:not(.focus).powermail_fieldwrap_type_textarea label{ top: 0.85em; left:10px; font-size: var(--font-size-small); } /* Placeholder klein */ .powermail_fieldwrap.focus.powermail_fieldwrap_type_input label, .powermail_fieldwrap.focus.powermail_fieldwrap_type_textarea label{ left: 10px; top: 3px; font-size: 10px; } .powermail_fieldwrap.powermail_fieldwrap_type_select label, .powermail_fieldwrap.powermail_fieldwrap_type_select:focus label { top: 3px; font-size: 10px; left:25px; } /* Wenn Fieldwrap mit Col ist */ /* Placeholder normal */ .powermail_fieldwrap[class*="col-"]:not(.focus).powermail_fieldwrap_type_input label, .powermail_fieldwrap[class*="col-"]:not(.focus).powermail_fieldwrap_type_textarea label{ left:25px; } /* Placeholder klein */ .powermail_fieldwrap[class*="col-"].focus.powermail_fieldwrap_type_input label, .powermail_fieldwrap[class*="col-"].focus.powermail_fieldwrap_type_textarea label { left: 25px; } /* Wenn Textarea einen Platzhalter hat */ .powermail_fieldwrap:not(.focus) textarea { padding-top:2em; } /* Required Felder auf Focus Rot */ :focus:required { box-shadow:0 0 0 0.2rem rgba(var(--primary-rgb),.25); border-color:var(--primary); } /* ErrorMeldung */ .tx-powermail .powermail_fieldset .parsley-errors-list { background-color:transparent; border:0px solid black; } .tx-powermail .powermail_fieldset .powermail_field_error, .tx-powermail .powermail_fieldset .parsley-error, .tx-powermail .powermail_fieldset .powermail_form .parsley-error:focus, .tx-powermail .powermail_fieldset div.error{ background-color: rgba(var(--primary-rgb),0.25); color:var(--bs-body-color); } /* Error Meldung, dieses Feld muss ausgefüllt werden */ .tx-powermail .powermail_fieldset .powermail-errors-list { background-color:transparent; color:var(--bs-body-color); border:0px solid black; padding:0em; margin:0em; position:absolute; font-size:10px; top:7px; right:0px; width:auto; } .tx-powermail .powermail_fieldset .powermail-errors-list > li { color:var(--bs-body-color); padding: 5px 15px; } .tx-powermail .powermail_fieldset .powermail-errors-list li:before { top:-1px !important; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Eigene CSS Klassen ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .text-two-columns .ce-body{ column-count: 2; column-gap: 30px; } .no-gutters > .row { margin-right: 0; margin-left: 0; } .no-gutters > .row > div[class*="col-"] { padding-left:0em; padding-right:0em; } @media (min-width:0px) and (max-width:767px) { main .no-gutters div[class*="col-"] + div[class*="col-"] { margin-top:0em; } } @media (min-width:768px) and (max-width:991px) { main .no-gutters div[class*="col-"] + div[class*="col-"] { margin-top:0em; } } .w-10 { width:10%; } .w-20 { width:20%; } .w-30 { width:30%; } .w-40 { width:40%; } .w-50 { width:50%; } .w-60 { width:60%; } .w-70 { width:70%; } .w-80 { width:80%; } .w-90 { width:90%; } .w-100 { width:100%; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Menü Abstract ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .frame-type-menu_abstract.w-25 { width:100% !important; } .frame-type-menu_abstract.w-50 { width:100% !important; } .frame-type-menu_abstract.w-50 div[class*="col-"] { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } @media (min-width: 0px) and (max-width: 767px) { .box-menu .col-md-4 + .col-md-4 { margin-top:0em; } } @media (min-width: 768px) and (max-width: 991px) { .frame-type-menu_abstract.w-25 div[class*="col-"] { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media (min-width: 992px) { .frame-type-menu_abstract.w-25 div[class*="col-"] { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Menü Bild - Mouseover ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .no-gutters.bildmenue div + div { margin-top:0px; } .no-gutters.bildmenue div[class*="col-"] > div:not(:last-child) { margin-bottom:0em !important; } .no-gutters.bildmenue img { border-bottom:1px solid white; } .no-gutters.bildmenue .row > div[class*="col-"] img{ border-right:1px solid white; } .no-gutters.bildmenue { position:relative; } .no-gutters.bildmenue div { position:relative; } .no-gutters.bildmenue div > .kategorie { opacity:0; height:0px; position:absolute; top:0; left:0; z-index:555; background-color:var(--primary); color:var(--bs-body-color); padding:4px 5px 4px 5px; } .no-gutters.bildmenue div > .kategorie:after { content:var(--link-more-icon); display:inline-block; margin-left:5px; } .no-gutters.bildmenue div:hover > .kategorie, .no-gutters.bildmenue div:focus > .kategorie{ opacity:1; height:auto; transition:opacity 0.5s; position:absolute; top:0; left:0; z-index:3; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Featherlight Lighbox ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .featherlight .featherlight-content { padding: 25px; margin-left: 0%; margin-right: 0%; max-height: 95%; /* width:1110px; */ border-bottom:0px; } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Video embed ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .video-embed{ position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; } /* Then style the iframe to fit in the container div with full height and width */ .video-embed > iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border:0px solid black; } /* Video-Bild-Unterschrift */ .video .video-caption { margin-top:var(--abstand-mittel); } /* ---------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------- Lightbox ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- */ .layout_lightbox .overlayer { width:100%; height:100%; background-color:rgba(0,0,0,0.85); position:absolute; top:0; left:0em; z-index:999; } .layout_lightbox main { position: relative; z-index: 999; margin-right: auto; margin-left: auto; left: 0; right: 0; background-color: #fff; padding-top:0em; top:-100px; } @media (min-width: 0px) and (max-width: 575px) { .layout_lightbox main { width: 100%; } } @media (min-width: 576px) and (max-width: 767px) { .layout_lightbox main { width: calc(520px - 30px); } } @media (min-width: 768px) and (max-width: 991px) { .layout_lightbox main { width: calc(720px - 30px); } } @media (min-width: 992px) and (max-width: 1199px) { .layout_lightbox main { width: calc(960px - 30px); } } @media (min-width: 1200px) { .layout_lightbox main { width: calc(1140px - 30px); } } .layout_lightbox header.sticky + main, .layout_lightbox header.sticky + #hero { padding-top: 0px; } .layout_lightbox .button-close, .layout_lightbox .button-home{ width:25px; height:25px; position:absolute; z-index:999 !important; display:block; } .layout_lightbox .button-close { top:25px; right:25px; } .layout_lightbox .button-home { top:25px; right:75px; } .layout_lightbox #Header.sticky { position: relative; top: 0; width: 100%; z-index: 888; } .layout_lightbox header.header { position: relative; } /* ------------------------ Mouseover Element im Menü Abstract ------------------------ */ .mouseovercontent .card:not([class*="bg-"]):not([class*="backgroundimage"]) { border:0px solid black !important; } .mouseovercontent { position:relative; height:100%; } .mouseovercontent .front-side, .mouseovercontent .back-side { height:100%; display:flex; } .mouseovercontent .back-side { opacity:0; } .mouseovercontent:hover .back-side { opacity:1; } .mouseovercontent .back-side { position:absolute; width:100%; height:100%; top:0; left:0; } .mouseovercontent .mouseover > .card-body .frame-type-image:only-child { margin:-30px; } /* Mouseover mit Rot-transparenter Fläche */ .mouseovercontent:hover .bg-primary-multi:before { content:""; width:100%; height:100%; display:block; mix-blend-mode: multiply; background-color:var(--primary); postition:absolute; } .bg-primary-multi:before { height:0%; } .mouseovercontent .front-side.bg-primary-multi, .mouseovercontent .back-side.bg-primary-multi { display:block; } .mouseovercontent .front-side.bg-primary-multi .card-body, .mouseovercontent .back-side.bg-primary-multi .card-body { position:absolute; left:0; width:100%; height:100%; } .mouseover.bg-primary-multi.align-items-start .card-body{ top:0; } .mouseover.bg-primary-multi.align-items-center .card-body{ top: 50%; transform: translateY(-50%); } .mouseover.bg-primary-multi.align-items-end .card-body{ bottom:0; } /* ------------------------ EXTENSIONS (CR 06.03.2023) ------------------------ */ .shariff-button .fab , .shariff-button .share_text {color:white} .weiss {color:white !important} .f3-widget-paginator li {list-style:none;display:inline;padding:0px 10px 0px 10px;}