/*--------------------------------------------*/ /*------- PARAMETERS -------------*/ /*--------------------------------------------*/ :root { --red: #ec0016; --red-hover: #c50014; --red-active: #9B000E; --black: #000000; --white: #ffffff; --light-grey: #f0f3f5; --dark-grey: #646973; --black-grey: #282d37; --medium-grey: #d7dce1; --default-textColor: #282d37; --font-regular: DBNeoScreenSans-Regular,Arial,Helvetica,sans-serif; --font-bold: DBNeoScreenSans-Bold, Arial, sans-serif; --font-head: DBNeoScreenHead-Black, Arial, sans-serif; --font-headlight: DBNeoScreenHead-Light, Arial, sans-serif; --icon-arrow-up: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M15.99995%2C26.00015%20C16.56245%2C26.00015%2016.99995%2C25.56265%2016.99995%2C25.00025%20L16.99995%2C9.40645%20L23.28115%2C15.71895%20C23.49995%2C15.93775%2023.74995%2C16.00045%2023.99985%2C16.00035%20C24.56245%2C16.00025%2024.99995%2C15.59395%2025.00015%2C15.00035%20C24.99995%2C14.75025%2024.93745%2C14.50025%2024.71865%2C14.28145%20L16.71875%2C6.28145%20C16.49995%2C6.06275%2016.24995%2C6.00015%2015.99995%2C6.00015%20C15.74995%2C6.00015%2015.49995%2C6.06275%2015.28125%2C6.28145%20L7.28125%2C14.28145%20C7.06255%2C14.50025%207.00005%2C14.75025%206.99985%2C15.00035%20C7.00005%2C15.59395%207.46875%2C16.00025%208.00005%2C16.00025%20C8.25005%2C16.00025%208.50005%2C15.93775%208.71875%2C15.71895%20L14.99995%2C9.40645%20L14.99995%2C25.00025%20C14.99995%2C25.56265%2015.43745%2C26.00015%2015.99995%2C26.00015%20Z%22/%3E%3C/svg%3E'); --icon-arrow-right: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M310.6%20233.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-192%20192c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3L242.7%20256%2073.4%2086.6c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l192%20192z%22/%3E%3C/svg%3E'); --icon-close: url('data:image/svg+xml,'); --icon-copyright: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 32 32%22%3E%3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2214%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-width%3D%222%22/%3E%3Cpath d%3D%22M20.5 19.5c-.8 1-1.8 1.5-3 1.5-2.2 0-3.5-1.6-3.5-4s1.3-4 3.5-4c1.2 0 2.1.4 2.9 1.3%22 fill%3D%22none%22 stroke%3D%22currentColor%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22/%3E%3C/svg%3E'); --icon-link: url('data:image/svg+xml,%3Csvg%20width%3D%2220px%22%20height%3D%2220px%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%3E%3Ctitle%3Eic-db_navigation_link_20%3C/title%3E%3Cg%20id%3D%22Symbols%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%2220dp-Icon/Navigation/Link%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M7.0084973%2C5%20L14.0050162%2C5%20C14.5185297%2C5%2015%2C5.38513514%2015%2C5.89864865%20L15%2C12.9915027%20C15%2C13.5050162%2014.5506757%2C13.9864865%2014.0050162%2C13.9864865%20C13.4594595%2C13.9864865%2013.0101351%2C13.5693081%2013.0101351%2C12.9915027%20L13.0101351%2C8.40202703%20L7.16891892%2C14.2432432%20C7.0084973%2C14.4358108%206.78378378%2C14.5%206.55907027%2C14.5%20C5.98147027%2C14.5%205.5%2C14.0185297%205.5%2C13.4409297%20C5.5%2C13.2482595%205.56418919%2C13.0236486%205.69256757%2C12.8952703%20L11.597973%2C6.98986486%20L7.0084973%2C6.98986486%20C6.43069189%2C6.98986486%206.01351351%2C6.54054054%206.01351351%2C6.02702703%20C6.01351351%2C5.48147027%206.43069189%2C5%207.0084973%2C5%20Z%22%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); } /*--------------------------------------------*/ /*------- BASIC -------------*/ /*--------------------------------------------*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; line-height: 1.8em; font: 18px var(--font-regular); background-color: var(--white) } body.hidden {overflow: hidden} [id] {scroll-margin-top: 100px} /*--------------------------------------------*/ /*------- GENERAL --> LAYOUT BUILDER -------------*/ /*--------------------------------------------*/ /* { -webkit-transition: all .75s cubic-bezier(.23,1,.32,1); -moz-transition: all .75s cubic-bezier(.23,1,.32,1); -ms-transition: all .75s cubic-bezier(.23,1,.32,1); -o-transition: all .75s cubic-bezier(.23,1,.32,1); transition: all .75s cubic-bezier(.23,1,.32,1); } */ /*CONTAO TOOLBAR*/ .cto-toolbar {z-index: 999999999999999999999999999999999;position: fixed;top: 0;width: 100%;} /*--------------------------------------------*/ /*------- GENERAL --> BARRIER FREE -------------*/ /*--------------------------------------------*/ button {background-color: rgba(0,0,0,0); border: none; outline: 0;font-size: 1rem; line-height: inherit; font-family: var(--font-head); cursor: pointer; color: inherit} .invisible {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;} /*Focus State*/ *:focus:not(:focus-visible) {outline: none;} *:focus-visible {outline: -webkit-focus-ring-color auto 1px !important; outline: currentColor auto 1px; display: block;} label a:focus-visible, a:focus-visible {display: inline-block;margin: 2px; padding: 2px} p a:focus-visible {margin: 2px;padding: 2px; display: inline-block} a.invisible:focus-visible {clip: initial;position: initial;display: inline-block;height: auto;width: auto;margin: 2px;padding: 2px} .widget {padding: 3px} button:focus-visible, .cBLabel input:focus-visible {display: inline-block;outline: 2px dashed var(--default-textColor) !important} #footer button:focus-visible, #footer a:focus-visible {outline: 2px dashed currentColor !important} *:focus-visible {outline: 2px dashed currentColor !important} /*Skip Links*/ #skipMapAnchor:focus-visible {display: inline-block;margin: 0 0 20px 0;padding: 2px;clip: initial;height: auto;width: auto; position: initial} .screen-reader-text {position: absolute;overflow: hidden;clip: rect(0 0 0 0);height: 1px;width: 1px;margin: -1px;padding: 0;border: none} .screen-reader-text:focus,.screen-reader-text:focus-visible {display: block;position: fixed;left: 0;top: 0;right: 0;height: auto;width: auto;clip: auto;z-index: 9999999999} skiplinks {display: block} skiplinks>* {padding: 1em !important;background: white;color: black;display: block;width: 100%} .wartungsmodus {height: 100vh} /*--------------------------------------------*/ /*------- GENERAL --> FONTS -------------*/ /*--------------------------------------------*/ body, a {color: var(--default-textColor)} h1, h2, h3, h4, h5, h6 {font-family: var(--font-head); margin-top: 3px; position: relative} h1 {font-size: 3em} h2 {font-size: 2em;} h3 {font-size: 1.4em} h4 {font-size: 1.1em} h2.h2ash3, .h2ash3 h2 {font-size: 1.4em} h2.h2ash4, .h2ash4 h2 {font-size: 1.1em} h3.h3ash4, .h3ash4 h3 {font-size: 1.1em} /*PULS*/ h1 {position: relative; margin: 0 0 50px 0} h1:after {content: ""; position: absolute; background-color: #ec0015; bottom: -12px; width: 60px; height: 5px; border-radius: 3.5em; left: 0} .textcenter h1:after, h1.textcenter:after {left: calc(50% - 30px)} .col3.last h2 {font-size: 1.4em} p { -moz-hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-ms-hyphens: auto;hyphens: auto; line-height: 1.8} /*LINKS*/ a {text-decoration: none} p > a, a.hyperlink_txt, .ce_text a {color: var(--red);text-decoration: underline} p > a:hover, a.hyperlink_txt:hover, .ce_text a:hover {color: var(--red-hover)} .overlapElementFrame a, .overlapElementFrame a:hover, .backpic_sideBySide_desc a, .backpic_sideBySide_desc a:hover, .pg_colorFolder a, .pg_colorFolder a:hover {color: currentColor} .backpic_sideBySide_desc p > a {display: inline-block} p.time {margin-top: 0} /*a[target=_blank]:after {content:url('/files/sysImg/default_icons/ic-db_navigation_link_20.svg');display: inline-block; margin: 0;text-decoration: none !important; border-bottom: 1px solid transparent;transform: scale(0.8);transform-origin: 0 50%;}*/ a[target="_blank"]::after {content: '';display: inline-block;width: 1em;height: 1em;margin-left: 0.25em;background-color: currentColor;-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22%3E%3Cpath d%3D%22M7.0084973%2C5 L14.0050162%2C5 C14.5185297%2C5 15%2C5.38513514 15%2C5.89864865 L15%2C12.9915027 C15%2C13.5050162 14.5506757%2C13.9864865 14.0050162%2C13.9864865 C13.4594595%2C13.9864865 13.0101351%2C13.5693081 13.0101351%2C12.9915027 L13.0101351%2C8.40202703 L7.16891892%2C14.2432432 C7.0084973%2C14.4358108 6.78378378%2C14.5 6.55907027%2C14.5 C5.98147027%2C14.5 5.5%2C14.0185297 5.5%2C13.4409297 C5.5%2C13.2482595 5.56418919%2C13.0236486 5.69256757%2C12.8952703 L11.597973%2C6.98986486 L7.0084973%2C6.98986486 C6.43069189%2C6.98986486 6.01351351%2C6.54054054 6.01351351%2C6.02702703 C6.01351351%2C5.48147027 6.43069189%2C5 7.0084973%2C5 Z%22/%3E%3C/svg%3E');-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;mask-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22%3E%3Cpath d%3D%22M7.0084973%2C5 L14.0050162%2C5 C14.5185297%2C5 15%2C5.38513514 15%2C5.89864865 L15%2C12.9915027 C15%2C13.5050162 14.5506757%2C13.9864865 14.0050162%2C13.9864865 C13.4594595%2C13.9864865 13.0101351%2C13.5693081 13.0101351%2C12.9915027 L13.0101351%2C8.40202703 L7.16891892%2C14.2432432 C7.0084973%2C14.4358108 6.78378378%2C14.5 6.55907027%2C14.5 C5.98147027%2C14.5 5.5%2C14.0185297 5.5%2C13.4409297 C5.5%2C13.2482595 5.56418919%2C13.0236486 5.69256757%2C12.8952703 L11.597973%2C6.98986486 L7.0084973%2C6.98986486 C6.43069189%2C6.98986486 6.01351351%2C6.54054054 6.01351351%2C6.02702703 C6.01351351%2C5.48147027 6.43069189%2C5 7.0084973%2C5 Z%22/%3E%3C/svg%3E'); mask-repeat: no-repeat;mask-position: center;mask-size: contain;transform: scale(0.8);transform-origin: 0 50%;} .ie a[target=_blank]:after {text-decoration: underline;line-height: 0.7;overflow: hidden;} figure a[target=_blank]:after {content: ""} .textup {text-transform: uppercase} .textbold {font-family: var(--font-bold)} .textcenter, .pagination {text-align: center} .textright {text-align: right} .smalltext, .caption, .layout_short, p.info, .mod_eventlist .header {font-size: 14px;line-height: 1.6em} p.info {display: flex;align-items: center} p.info svg {width: 25px;margin-right: 5px;margin-top: -2px} strong {font-family: var(--font-bold)} /*UMBRÜCHE IM TEXT ERZWINGEN

Ausbau München-Nord

*/ .umbruch::after {content: "";display: block} /*--------------------------------------------*/ /*------- GENERAL --> COLORS -------------*/ /*--------------------------------------------*/ .red {color: var(--red)} .black {color: var(--black)} .lightGreyBack {background-color: var(--light-grey)} .darkGreyBack {background-color: var(--dark-grey)} .mediumGreyBack {background-color: var(--medium-grey)} .blackGreyBack {background-color: var(--black-grey)} /*--------------------------------------------*/ /*------- GENERAL --> ELEMENTS -------------*/ /*--------------------------------------------*/ /*Arrow Link/Link mit Pfeil*/ .ce_hyperlink.link_arrow {display: flex; justify-content: center; font-family: var(--font-bold)} .ce_hyperlink.link_arrow a {display: flex;justify-content: center;align-items: center;position: relative } .ce_hyperlink.link_arrow a:before {content: '';display: inline-block;background: url("/../files/sysImg/default_icons/arrow_forward.svg") left 70% / 66% no-repeat;margin-right: 5px;width: 30px; height: 20px} .ce_hyperlink.link_arrow a:hover {text-decoration: none} .ce_hyperlink.link_arrow a:after {content: '';position: absolute;bottom: -4px;left: unset;right: 0;height: 2px;width: 0%;background-color: var(--default-textColor);transition: width 0.4s} .ce_hyperlink.link_arrow a:hover:after {left: 0;right: unset;width: 100%;} .ce_hyperlink.link_arrow_reverse {justify-content: flex-start} .ce_hyperlink.link_arrow_reverse a:before {background: url("/../files/sysImg/default_icons/arrow_back.svg") left 70% / 66% no-repeat;} /*RUNDER WEITERLESEN LINK*/ .roundCta {width: 40px;margin: 5px 0; transition: all .45s cubic-bezier(.23,1,.32,1);height: 40px;display: inline-block;border-radius: 25px;background-color: var(--red);margin: 0 auto;text-align: center;color: var(--white) !important;text-align: center;font-size: 1.8em;cursor: pointer;line-height: 37px;position: relative} .roundCta:hover {width: 145px; padding-left: 100px; text-decoration: none !important; background-color: var(--red-hover)} .roundCta:before {display: none; content: "weiterlesen";font-weight: normal; position: absolute;font-size: 16px;color: #fff;top: 10px;left: 15px;height: 15px;line-height: normal;} .roundCta:hover:before {display: block} /*FAKE BUTTON*/ p.moreButton, p a.moreButton {padding: 8px 12px;border: 1px solid;border-radius: 4px;transition: all .45scubic-bezier(.23,1,.32,1);display: inline-block; font-family: var(--font-bold)} a:hover p.moreButton, p.moreButton:hover, p a.moreButton:hover {background-color: #000; color: #fff; border-color: #000} /*Pictures*/ figure, ul {margin: 0; padding: 0; overflow: hidden;} figcaption {padding: 5px 0} figure.image_container {position: relative} figure.image_container .image_inner {position: relative; display: inline-block; overflow: hidden} figure.image_container .image_inner > a {display: flex} figure.image_container .pictcopy {position: absolute; bottom: 5px; left: 5px; text-align: right;color: #fff;font-size: 10px;text-shadow: 1px 1px 1px rgba(0,0,0,0.8);} img {max-width: 100%; height: auto; display: block; border-radius: 4px} .center img, .center i {margin: 0 auto} .ce_image.center figure, .center figure {text-align: center} figure.image_container.float_left {float: left; margin: 8px 3% 3% 0; max-width: 50%} figure.image_container.float_right {float: right; margin: 8px 0 3% 3%; max-width: 50%} figure.image_container.float_above {margin: 8px 0 3% 0} /*Copytext Layer */ .copytextLayer {position: absolute; bottom: 0px; right: 0px; left: 10px; text-align: right; font-size: 14px; color: #fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.4);z-index: 10} .copytextLayer span {position: absolute;bottom: 0;right: -200%;z-index: 1;padding: 0.5em 0.75em;color: #fff;background: rgba(19, 24, 33, 0.5);border-radius: 0.25rem 0 0 0;backdrop-filter: blur(20px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1);} .copytextLayer:before {color: #fff !important;background: rgba(19, 24, 33, 0.75) !important;position: absolute;bottom: 0.5rem;right: 0.5rem;z-index: 1;display: flex;align-items: center;justify-content: center;width: 1.5rem;height: 1.5rem;font-size: 1rem;line-height: 1.5rem;color: #131821;text-align: center;cursor: pointer;content: "\f1f9";font-family: "Font Awesome 5 Free";background: rgba(255, 255, 255, 0.5);border-radius: 10rem;backdrop-filter: blur(10px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1)} .copytextLayer:hover span {opacity: 1;right: 0;} .copytextLayer:hover:before {opacity: 0} /*Bulletpoints Textelemente*/ #main .sector ul, #main .ce_text ul, #pg_sJCurrentText ul, .tabTextInner ul, .pg_accordionInner ul {padding-left: 20px;list-style-type: none} #main .sector ul li, #main .ce_text ul li, #pg_sJCurrentText ul li, .tabTextInner ul li, .pg_accordionInner ul li {margin-bottom: 10px;position: relative;line-height: 1.7em} #main .sector ul li:before, #main .ce_text ul li::before, #pg_sJCurrentText ul li:before, .tabTextInner ul li:before, .pg_accordionInner ul li:before {padding: 0; position: absolute; left: 0; top: 11px; list-style-type: none;height:8px; border-radius: 50%; content: "";background-color: #ea0b23;width: 8px;display: inline-block;margin-left: -20px;vertical-align: bottom;transform: translateZ(0);backface-visibility: hidden;} #main .sector ul li:marker, #main .ce_text ul li::marker, #pg_sJCurrentText ul li::marker, .tabTextInner ul li::marker, .pg_accordionInner ul li:marker {display: none} #main ol {list-style: none; counter-reset: list-counter;padding-left: 0;} #main ol li {counter-increment: list-counter;position: relative;padding-left: 2rem;} #main ol li::before {content: counter(list-counter) ".";position: absolute;left: 0;font-family: var(--font-bold)} /*Pagination*/ #main .pagination {margin-bottom: 3%;font-size: 1.2em} #main .pagination ul {display: flex; justify-content: center; align-items: center} #main .pagination ul li {display: inline-block; margin: 0 1%;} #main .pagination ul li a, #main .pagination ul li strong {display: block;padding: 5px 10px 5px 10px; display: flex; align-items: center} #main .pagination ul li:before { content: none } #main .pagination .pagination-heading {font-size: 1em;font-family: inherit} /*Downloads -> benötigt Template ce_download.html5*/ .ce_download, .ce_downloads {padding: 20px 0 20px 20px; border-bottom: 1px solid #3c414b;} .ce_downloads li {margin-bottom: 2%;border-bottom: 1px solid;padding-bottom: 2%} .ce_download p, .ce_downloads p {margin: 0} .ce_download a, .ce_download span, .ce_downloads a, .ce_downloads span {display: inline-block} .ce_download a:after, .ce_downloads a:after {display: none} .ce_download .text, .ce_downloads .text {width: 68%} .ce_download .date, .ce_downloads .date {font-size: 10px} .ce_download .size, .ce_download a, .ce_downloads .size, .ce_downloads a {width: 15%} .ce_download a, .ce_downloads a {padding: 8px 16px;border: 1px solid var(--default-textColor);border-radius: 6px; text-align: center; background-color: #fff; font-size: 16px; color: var(--default-textColor); text-decoration: none; min-width: 140px} .ce_download a:hover, .ce_downloads a:hover {background-color: var(--default-textColor); color: #fff} @media (max-width: 768px) { .ce_download, .ce_downloads {display: flex; flex-wrap: wrap; padding: 20px 0} .ce_download .text, .ce_downloads .text {width: 100%; margin-bottom: 20px} .ce_download .size, .ce_download a, .ce_downloads .size, .ce_downloads a {width: 50%; min-width: none} } .downloadExtended {width: 24%; margin-right: 1%; border-bottom: 0; padding: 0} .downloadExtended .pg_downloadExt.picDownload {width: 100%} .downloadExtended .pg_downloadExt.picDownload a {border: none;border-radius: 0; padding: 0; text-align: left; width: 100%; font-size: 18px} .downloadExtended .pg_downloadExt.picDownload a:hover {background-color: rgba(0,0,0,0); text-decoration: underline; color: var(--default-textColor)} .downloadExtended .pg_downloadExt.picDownload .pg_downloadBackPic {border: 1px solid var(--default-textColor);border-radius: 3.5px; position: relative; overflow: hidden} .downloadExtended .pg_downloadExt.picDownload .pg_downloadTitle {padding: 15px 0} .downloadExtended .pg_downloadBackPic:before {content: "";position: absolute;top: 0;width: 100%;left: 0;height: 100%;background-color: rgba(236, 0, 22, 0.77);opacity: 0;} .downloadExtended .pg_downloadBackPic:after {content: url("/files/sysImg/default_icons/ic-db_action_download_32_white.svg");width: 100%;position: absolute;left: 0;top: calc(50% - 120px);opacity: 0;transform: scale(0.3);transform-origin: 50% 17%;} .downloadExtended .pg_downloadExt.picDownload:hover .pg_downloadBackPic:before, .downloadExtended .pg_downloadExt.picDownload a:focus-visible .pg_downloadBackPic:before, .downloadExtended .pg_downloadExt.picDownload:hover .pg_downloadBackPic:after, .downloadExtended .pg_downloadExt.picDownload a:focus-visible .pg_downloadBackPic:after {opacity: 1} @media (max-width: 950px) { .downloadExtended {width: 49%;} } @media (max-width: 768px) { .downloadExtended {width: 100%; margin: 0 0 3% 0} } /*Breadcrumb*/ .home .mod_breadcrumb {display: none} #breadcrumb ul {display: flex; font-size: 14px; margin-top: 30px;align-items: center; flex-wrap: wrap} #breadcrumb ul li {list-style-type: none; margin-right: 5px; padding: 2px} #breadcrumb ul li.first {display: flex} #breadcrumb ul li.first:after {margin-top: 6px} #breadcrumb ul li.first img {width: 20px} #breadcrumb ul li.last:after {display: none} #breadcrumb ul li:after {content:"";display: inline-block;vertical-align: middle;width: 12px;height: 12px;background-color: currentColor;-webkit-mask-image: var(--icon-arrow-right);mask-image: var(--icon-arrow-right);mask-repeat: no-repeat;mask-position: center;mask-size: contain; margin-left: 5px;} #breadcrumb ul li.active {font-family: var(--font-bold)} /*Gallery*/ .ce_gallery>ul {float: none; margin: 0} .ce_gallery>ul li {float: left; list-style-type: none; margin-right: 1%; margin-bottom: 1%} .ce_gallery>ul li:last-child {margin-right: 0} .ce_gallery>ul li.col_first {clear: both} .ce_gallery > ul.cols_2 li {width: 49%;} .ce_gallery>ul.cols_3 li {width: 32%;} .ce_gallery>ul.cols_4 li {width: 24%;} .ce_gallery>ul.cols_5 li {width: 19%;} @media (max-width: 768px) { .ce_gallery>ul li {width: 48% !important;min-height: 120px;} .ce_gallery > ul li {width: 100% !important;min-height: 120px;} .ce_gallery figure {max-height: none;} .ce_gallery figure img {width: 100%} } /*Akkordeon*/ .ce_accordionSingle, .ce_accordionStart {margin-bottom: 3%; overflow: hidden} .ce_accordionSingle .toggler, .ce_accordionStart .toggler {margin-bottom: 0; font-family: var(--font-bold); outline: none; cursor: pointer; position: relative;padding: 2px 25px 2px 2px; width: 99%; margin: 2px} .ce_accordionSingle .toggler:hover, .ce_accordionStart .toggler:hover {opacity: 0.7} .ce_accordionSingle .accordion, .ce_accordionStart .accordion {padding: 0} .ce_accordionSingle .toggler:before, .ce_accordionStart .toggler:before {position: absolute;right: 2px;top: 2px;content:"";width: 20px;height: 20px;background-color: currentColor; -webkit-mask-image: var(--icon-arrow-right);mask-image: var(--icon-arrow-right);mask-size: contain;mask-repeat: no-repeat;transform: rotate(0)} .ce_accordionSingle .toggler.active:before, .ce_accordionStart .toggler.active:before {transform: rotate(90deg)} .ce_accordionSingle .ui-accordion-content, .ce_accordionStart .ui-accordion-content {padding-right: 3%} /*Contao Video/Audio Player*/ .ce_player video {max-width: 100%} /*News Teaser - NICHT Blogmodul .layout_latest, .layout_latest .ll_pic .ll_backpic {-webkit-transition: all .75s cubic-bezier(.23,1,.32,1);-moz-transition: all .75s cubic-bezier(.23,1,.32,1);-ms-transition: all .75s cubic-bezier(.23,1,.32,1);-o-transition: all .75s cubic-bezier(.23,1,.32,1);transition: all .75s cubic-bezier(.23,1,.32,1);} .layout_latest {background: #fff;box-shadow: 0 0 1rem 0 #d7dce1;overflow: hidden;border-radius: 4px;position: relative} .layout_latest:hover {box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .23), 0 0.5rem 1.6rem 0 rgba(0, 0, 0, .2);} .layout_latest .ll_desc h2, .layout_latest .ll_desc h3 {font-size: 24px} .layout_latest .ll_desc {padding: 2rem} .layout_latest .more {font-family: var(--font-regular); padding: 8px 12px; border: 1px solid #000; border-radius: 4px; color: #000;transition: all .45s cubic-bezier(.23,1,.32,1); display: inline-block; margin: 0} .layout_latest:hover .more {background-color: #000; color: #fff; text-decoration: none} .layout_latest .ll_link {position: absolute;top: 2px;left: 2px;width: calc(100% - 8px);height: calc(100% - 8px);z-index: 5;text-decoration: none} .layout_latest .ll_pic {overflow: hidden; position: relative} .layout_latest:hover .ll_backpic {transform: scale(1.1)} .layout_latest .copytextLayer {position: absolute; bottom: 0px; right: 0px; left: 10px; text-align: right; font-size: 14px; color: #fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.4);z-index: 10} .layout_latest .copytextLayer span {position: absolute;bottom: 0;right: -100%;z-index: 1;padding: 0.5em 0.75em;color: #fff;background: rgba(19, 24, 33, 0.5);border-radius: 0.25rem 0 0 0;backdrop-filter: blur(20px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1);} .layout_latest .copytextLayer:before {color: #fff !important;background: rgba(19, 24, 33, 0.75) !important;position: absolute;bottom: 0.5rem;right: 0.5rem;z-index: 1;display: flex;align-items: center;justify-content: center;width: 1.5rem;height: 1.5rem;font-size: 1rem;line-height: 1.5rem;color: #131821;text-align: center;cursor: pointer;content: "\f1f9";font-family: "Font Awesome 5 Free";background: rgba(255, 255, 255, 0.5);border-radius: 10rem;backdrop-filter: blur(10px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1)} .layout_latest .copytextLayer:hover span {opacity: 1;right: 0;} .layout_latest .copytextLayer:hover:before {opacity: 0} .layout_latest.ll_landscape {display: flex; margin-bottom: 3%} .layout_latest.ll_landscape .ll_desc {width: 70%} .layout_latest.ll_landscape .ll_pic {width: 30%} .layout_latest.ll_landscape .ll_pic .ll_backpic {height: 100%} .layout_latest.ll_portrait .ll_pic .ll_backpic {height: 250px} .layout_latest.ll_portrait .ll_desc {position: relative; height: calc(100% - 250px); padding-bottom: 90px} .layout_latest.ll_portrait .ll_desc .more {position: absolute; bottom: 2rem; left: 2rem} .layout_latest.ll_picTextSideBySide {display: flex; align-items: center; box-shadow: none; margin-bottom: 6%} .layout_latest.ll_picTextSideBySide .ll_desc {background-color: var(--light-grey); padding: 4rem; width: 45%; border-radius: 5px;z-index: 0} .layout_latest.ll_picTextSideBySide .ll_pic {margin-left: -3rem; width: 58%} .layout_latest.ll_picTextSideBySide .caption {display: none} */ .layout_latest .gl_tt:after {display: none} /*Content Slider - Contao Modul*/ .slider-control {display: flex; align-items: center; justify-content: space-between} .slider-control > a {position: initial} .slider-control .slider-menu {display: flex; align-items: center; justify-content: center} .slider-control .slider-menu b {margin: 0 0.5em; color: transparent;width: 1rem;height: 1rem;background: #fff;border: 2px solid #000; border-radius: 50%;display: flex;align-items: center;justify-content: center} .slider-control .slider-menu b.active {background-color: #000;color: transparent} .slider-control svg {transform: scale(2)} /*Callout Teaser*/ .calloutTeaser {border: .2rem solid;border-radius: .6rem;box-shadow: 0 .4rem 1rem 0 rgba(0, 0, 0, .1); margin: 3% 0; display: flex; overflow: hidden} .ce_text.calloutTeaser, .calloutTeaser > .ce_text {display: block;padding: 2rem} .calloutTeaser > .backpic { width: 30%} .callout_attention {border-color: #ec0016;background-color: #fff5f5} .callout_info {border-color: #1455c0; background-color: #f3f9fd} .callout_neutral {border-color: #646973; background-color: #f9fafb} .callout_warning {border-color: #c05e00; background-color: #fffbef} .calloutTeaser p:last-child > a {border: .1rem solid;border-radius: .4rem;padding: 0.5rem 1rem;display: inline-block; text-decoration: none; cursor: pointer} .calloutTeaser p:last-child > a:hover {color: var(--white); background-color: var(--default-textColor)} /*Polaroid-Teaser / Text Bild Teaser (Kacheln)*/ .polaroidTeaserFrame {display: flex; flex-wrap: wrap; overflow: visible} .polaroidTeaserFrame > div {position: relative;margin: 1%; transition: all .75s ease-in-out;padding: 35px; border-radius: 4px; box-shadow: 0 0 1rem 0 #d7dce1; text-align: center;transition: all .75s ease-in-out;cursor: pointer;display: flex;flex-direction: column-reverse;justify-content: flex-end;} .polaroidTeaserFrame > div .textTeaserLink {position: absolute; width: 100%; top: 0; left: 0; height: 100%} .polaroidTeaserFrame > div:hover {box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.23), 0 0.5rem 1.6rem 0 rgba(0,0,0,0.23); text-decoration: underline} .polaroidTeaserFrame > div h2, .polaroidTeaserFrame > div h3, .polaroidTeaserFrame > div h4 {font-size: 24px; margin: 20px 0 0 0} .polaroidTeaserFrame .polaroidBackpic {position: relative; overflow: hidden; border-radius: 3.5px;height: 250px} @media(max-width: 950px) { .polaroidTeaserFrame.flexRow.flex_3 > div, .polaroidTeaserFrame.flexRow.flex_4 > div, .polaroidTeaserFrame.flexRow.flex_2 > div {width: 48%} } @media(max-width: 768px) { .polaroidTeaserFrame.flexRow.flex_3 > div, .polaroidTeaserFrame.flexRow.flex_4 > div, .polaroidTeaserFrame.flexRow.flex_2 > div {width: 95%;margin: auto;margin-bottom: 6%} } /*Icon-Teaser mit Link*/ .teaserIconsFrame {justify-content: center;display: flex; flex-wrap: wrap} .teaserIconsFrame > div {width: 20%; margin: 0 1%;text-align: center; position: relative} .teaserIconsFrame h2, .teaserIconsFrame h3 {font-size: 20px; margin-bottom: 10px} .teaserIconsFrame > div img {max-width: 100px;margin: 0 auto} .teaserIconsFrame > div .textTeaserLink {position: absolute; width: 100%; top: 0; left: 0; height: 100%} .teaserIconsFrame > div:hover {text-decoration: underline} @media(max-width: 768px) { .teaserIconsFrame > div {width: 48%; margin: 0 1% 6% } .teaserIconsFrame > div img {max-width: 80px;margin: 0 auto} } /*HeadPicTiles mit/ohne Link*/ .headPictileFrame {display: flex} .headPictileFrame > div {width: 33.3333%} .headPictileFrame > div:hover {} .headPictileFrame > div a:focus-visible {width: calc(100% - 8px);height: calc(100% - 8px);margin: 4px;position: absolute;overflow: hidden} @media(max-width: 850px) { .headPictileFrame {flex-wrap: wrap} .headPictileFrame > div {width: 100%} .headPictileFrame .backpic .layer {position: absolute} } /*Text Bild Teaser (Groß)*/ .teaserTile_big {display: flex; flex-wrap: wrap; margin: 3% 0; background-color: var(--light-grey); border-radius: 5px; overflow: hidden} .teaserTile_big > .backpic {width: 70%} .teaserTile_big > .ce_text {width: 30%; padding: 2rem} .teaserTile_big > div h2, .teaserTile_big > div h3, .teaserTile_big > div h4 {font-size: 24px; margin: 20px 0 0 0} @media(max-width: 950px) { .teaserTile_big > .backpic {height: 250px} .teaserTile_big > .backpic, .teaserTile_big > .ce_text {width: 100%} } /*Teaserkacheln / grau hinterlegt */ .tileGreyBackFrame {display: flex;justify-content: center;margin-left: auto;margin-right: auto;max-width: 1440px;padding-bottom: 2vw;margin-bottom: 6vw;padding-top: 3vw;padding-left: 0;padding-right: 0;width: 98vw;position: relative} .tileGreyBackFrame:after {background-color: var(--light-grey);border-radius: 6px;content: "";display: block;height: calc(100% - 10vw);left: 0;margin-top: 10vw;position: absolute;right: 0;top: 0;width: 100%;z-index: -1;} .tileGreyBackFrame > div.ce_text {position: relative;display: flex;flex: 0 1 30vw;flex-direction: column;margin: 0;max-width: 400px;background-color: var(--white);border-radius: 6px;box-shadow: 0 2px 4px 0 rgba(0,0,0,.05), 0 0 4px 0 rgba(0,0,0,.1), 0 3px 8px 0 rgba(0,0,0,.15);display: block;margin: 0 1vw 4vw;padding: 3vw 3vw 6vw;transition: all .2s ease-in-out;} .tileGreyBackFrame h2, .tileGreyBackFrame h3 {font-size: 24px} .tileGreyBackFrame > div.ce_text .moreButton {position: absolute; bottom: 2vw; left: 3vw} @media(max-width: 768px) { .tileGreyBackFrame {display: block; width: 95%} .tileGreyBackFrame > div {max-width: 80% !important;margin: 0 auto 4vw !important; min-height: 55vw} .tileGreyBackFrame > div.ce_text .moreButton {position: initial} } /*Fliegende Kacheln -> benötigt function flyingTiles() im main.js*/ .flyingTileRowFrame {overflow: visible} .flyingTileRowFrame .flyingTileRow div {transition: all .75s ease-in-out;} .flyingTileRowFrame .flyingTileRow > div.ce_text:nth-child(1), .flyingTileRowFrame .flyingTileRow > div.backpic:nth-child(1) {transform: translateX(-10rem)} .flyingTileRowFrame .flyingTileRow > div.ce_text:nth-child(2), .flyingTileRowFrame .flyingTileRow > div.backpic:last-child {transform: translateX(10rem)} /*.flyingTileRowFrame .flyingTileRow > div.ce_text:nth-child(3), .flyingTileRowFrame .flyingTileRow > div.backpic:nth-child(3) {transform: translateX(10rem)}*/ .flyingTileRowFrame .flyingTileRow > div.ce_text {opacity: 0.6} .flyingTileRowFrame .flyingTileRow.active > div.ce_text, .flyingTileRowFrame .flyingTileRow.active > div.backpic {transform: translateZ(0); opacity:1} .flyingTileRow {display: flex} .flyingTileRow div {width: 50%} .flyingTileRow div > div {width: 100%} .flyingTileRow div.ce_text {padding: 50px} .flyingTileRow .pg_lbElementLBInner {width: 80%} .flyingTileRow .backpic {border-radius: 3.5px} .flyingTileRow .backpic .copytextLayer {left: 0; right: 10px} @media(max-width: 950px) { .flyingTileRow div.ce_text {padding: 25px} } @media(max-width: 768px) { .flyingTileRowFrame {overflow: hidden} .flyingTileRow {flex-wrap: wrap; position: relative; padding-top: 300px} .flyingTileRow div {width: 100%} .flyingTileRow > .backpic {position: absolute; top: 0; left: 0; height: 300px !important} } /*Lightbox Elements -> benötigt angepasstes Template j_colorbox.html5 + das entsprechende Icon*/ #cboxContent { background: rgba(0,0,0,0)} #cboxLoadedContent {border: 5px solid transparent; background: transparent} #cboxClose {position: fixed; top: -20px; right: 0; background: url('/files/sysImg/default_icons/ic-db_navigation_close_32_white.svg') 50% 50% no-repeat; background-size: contain;margin: 2px; height: 40px} #cboxClose:hover {background-position: 50% 50%} #colorbox button:focus-visible {outline: 2px dashed #ffffff !important;} #colorbox, #cboxOverlay, #cboxWrapper {z-index: 9999999999;overflow: visible;} #cboxContent {display: flex; flex-wrap: wrap} #cboxTitle, #cboxCurrent {position: initial; float: none;width: 100%;} #cboxCurrent {text-align: center; margin-top: 20px} #cboxTitle {font-size: 14px; padding: 5px} #cboxNext, #cboxPrevious {padding: 0 25px;transform: scale(0.8);} #cboxNext {background: url('/files/sysImg/default_icons/ic-db_navigation_chevron-right_32_white.svg') 50% 50% no-repeat;transform-origin: 100%;background-size: cover;background-color: var(--black);border-top-left-radius: 4px;border-bottom-left-radius: 4px;} #cboxPrevious {background: url('/files/sysImg/default_icons/ic-db_navigation_chevron-left_32_white.svg') 50% 50% no-repeat;transform-origin: 0 100%;background-size: cover;background-color: var(--black);border-top-right-radius: 4px;border-bottom-right-radius: 4px;} /*NND Elements Footer as Headpic*/ .backpic.nndSignFooter {background-position-x: -10% !important;overflow: hidden;} @media(max-width: 768px) { .backpic.nndSignFooter {height: 100px !important} } /*Suchmaschine -> benötigt Templates mod_search + search_default */ .mod_search form {overflow: hidden} .mod_search .formbody {width: 50%} .mod_search .formbody input {padding: 5px 10px 0} .mod_search .even, .mod_search .odd {border-bottom: 1px solid #ddd; padding: 1.5% 0;list-style: none} .mod_search .url {display: none} .mod_search .relevance {opacity: 0.4} .mod_search .widget-submit {float: none} /*GENERAL --> ScrolltoTop */ #ScrollToTop {position: fixed;bottom: 2rem;right: 2rem;width: 4rem;height: 4rem;border-radius: 50%;text-align: center;background-color: #fff;border: .1rem solid #282d37;cursor: pointer;color: #282d37;visibility: hidden;z-index: 99} #ScrollToTop button {width: 100%;height: 100%;} #ScrollToTop button:before {display: inline-block;content:"";width: 35px;height: 35px;background-color: currentColor; -webkit-mask-image: var(--icon-arrow-up); mask-image: var(--icon-arrow-up); mask-size: contain;mask-repeat: no-repeat;}} #ScrollToTopBtn {color: var(--black)} #ScrollToTop.active {visibility: visible} #ScrollToTop:hover {background-color: #282d37} #ScrollToTop:hover #ScrollToTopBtn {color: var(--white)} #ScrollToTopBtn:focus-visible {border-radius: 50%;outline-offset: -2px;} @media(max-width: 768px) { #ScrollToTop {transform: scale(0.7);transform-origin: 100% 100%;right: 2%;} } /*QUOTE ROW*/ .quoteRow {display: flex} .quoteRow figure {width: 30%} .quoteRow figure .copytextLayer {bottom: calc(50% - 15px);right: 2px} .quoteRow > div {width: 70%;padding-left: 100px;padding-right: 100px;position: relative;} .quoteRow > div p {margin-top: 0} .quoteRow > div:before, .quoteRow > div:after {font-family: var(--font-bold);position: absolute;color: var(--red);font-size: 5em} .quoteRow > div:before {content: "„";left: 15px;bottom: 50px} .quoteRow > div:after {content: "“";right: 15px;top: 50px} @media(max-width: 768px) { .quoteRow {display: block} .quoteRow figure {width: 60%; margin: 0 auto !important} .quoteRow > div {width: 100%; padding: 60px 0} .quoteRow > div:before {left: 0; bottom: 10px} .quoteRow > div:after {right: 0; top: 10px} .quoteRow > div:before, .quoteRow > div:after {font-size: 4em} } /*EVENTS -> benötigt Template event_teaser.html5*/ .mod_eventlist {margin: 3% 0} .event.layout_teaser {transition: all .75s ease-in-out;display: flex; align-items: center} .event.layout_teaser h2, .event.layout_teaser h3, .event.layout_teaser h4 {font-size: 22px; margin: 1% 0} .event.layout_teaser {background: #fff;padding: 25px;box-shadow: 0 0 1rem 0 #d7dce1;overflow: hidden;border-radius: 4px; margin-bottom: 3%} .event.layout_teaser:hover {box-shadow: 0 0 0.5rem 0 rgba(0,0,0,.23), 0 0.5rem 1.6rem 0 rgba(0,0,0,.2)} .event.layout_teaser p.more a {padding: 8px 12px; border: 1px solid #000; border-radius: 4px; color: #000;transition: all .45s cubic-bezier(.23,1,.32,1); text-decoration: none} .event.layout_teaser p.more a:after {display: none} .event.layout_teaser p.more a:hover {background-color: #000; color: #fff; text-decoration: none} .event.layout_teaser .eventDate {width: 15%; padding-right: 10px; text-align: center; } .event.layout_teaser .eventDate span {display: block; margin-bottom: 5px} .event.layout_teaser .eventDate strong {font-size: 35px} .event.layout_teaser .eventDesc {border-left: 1px solid #d7dce1;padding-left: 20px; width: 85%; position: relative} /*--------------------------------------------*/ /*------- GENERAL --> FOOTER -------------*/ /*--------------------------------------------*/ #footer {background-color: var(--black-grey); color: var(--white); padding: 3% 0} #footer ul {padding-left: 1px} #footer li {list-style-type: none; margin-bottom: 3%; display: block} #footer a {color: var(--white)} #footer nav h2 {font-size: 1.1em} #footer button {padding: 0; font-family: inherit; font-size: inherit} /*--------------------------------------------*/ /*------- STÖRER -------------*/ /*--------------------------------------------*/ .stoerer_collapsible, .stoerer_collapsible.sticky:hover {width: auto; height: 63px;position: fixed;overflow: hidden;bottom: 12%;right: 2.1rem;padding: 20px;border-radius: 50px;background-color: #fff;z-index: 9999999;-webkit-box-shadow: 0 0.1rem 2rem 0 rgb(34, 36, 43, 0.4);box-shadow: 0 0.1rem 2rem 0 rgb(34, 36, 43, 0.4);-webkit-transition: all .3s ease;transition: all .3s ease;display: flex;justify-content: center;align-items: center;z-index: 999999999;float: none; margin-right: 0} .stoerer_collapsible a {text-decoration: none; display: flex;justify-content: center;align-items: center;} .stoerer_collapsible .stc_linkIcon, .stoerer_collapsible.sticky:hover .stc_linkIcon {align-self: center;margin-right: 10px;} .stoerer_collapsible .stc_linkIcon i, .stoerer_collapsible.sticky:hover .stc_linkIcon i {padding: 0} .stoerer_collapsible .stc_linkText, .stoerer_collapsible.sticky:hover .stc_linkText {font-family: var(--font-bold); font-size: 1.1em; margin-top: -2px; display: block} .stoerer_collapsible.sticky {width: 63px; padding-left: 0; padding-right: 0} .stoerer_collapsible.sticky .stc_linkText {display: none} .stoerer_collapsible.sticky .stc_linkIcon {margin-right: 0px; display: flex} .stoerer_round {position: absolute; right: 1vw; top: 10%; background-color: var(--red); width: 8rem; height: 8rem; border-radius: 50%; z-index: 3; transform: rotate(-8deg);display: flex; justify-content: center; align-items: center;box-shadow: 0 2px 4px 0 var(--dialog-box-shadow)} .stoerer_round a {color: var(--white); font-family: var(--font-head);position: absolute;top: 0;left: 0;height: 100%;width: 100%;bottom: 0;display: flex;align-items: center;justify-content: center;} @media(max-width: 768px) { .stoerer_collapsible {transform: scale(0.8);transform-origin: 100% 50%; right: 1%} .stoerer_round {top: 280px;transform: scale(0.8) rotate(-8deg);transform-origin: 100% 0%;right: 3%} } /*--------------------------------------------*/ /*------- PAGES --> KOMMENTARE -------------*/ /*-------------------------------------------- .ce_comments {border-bottom: 1px solid #f0f3f5;padding: 2% 0 5% 0;border-top: 1px solid #f0f3f5;margin-top: 3%;} .ce_comments h2{margin-bottom: 3%;color: #F36F20;} .comment_default {padding: 2% 0;clear: both;} .comment_default .info { width: 19%;display: inline-block;vertical-align: top;margin: 0;padding: 15px} .comment_default .comment {width: 80%;padding: 17px;border-radius: 4px;margin-bottom: 6%;vertical-align: middle;display: inline-block;border-style: solid;border-width: 1px 1px 3px;border-color: #ccc;background: #fff;} .comment:before{position: absolute;display: block;content: "";margin-left: -25px;margin-top: 1%;width: 15px;height: 15px;background-color: #fff;border: 1px solid #ccc;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);border-right: none;border-top: 0;z-index: 1;} .reply .info {width: 19%;float: right;text-align: right} .reply .comment{float: left !important; position: relative; background-color: #f0f3f5} .reply .comment:before{margin-right: -9px !important;position: absolute;right: 0;top: 8px;border-left: none;border-bottom: none;background-color: #f0f3f5;border-right: 1px solid #ccc;border-top: 1px solid #ccc;} .ce_comments .form {clear: both;border-top: 1px solid #eee;padding-top: 3%;} .ce_comments .formbody{padding-top: 20px} .ce_comments input, .ce_comments textarea {background: #fafafa;} .ce_comments input {height: 20px; width: 50%; display: block} .ce_comments input[type="submit"]{background-color: #f25300;height: 35px;color: #fff;font-size: 13px;-moz-appearance: button;-webkit-appearance: button;appearance: button;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} .ce_comments label {font-size: 13px} @media (max-width: 990px) { .comment_default .info, .comment_default .comment {display: block; float: none; width: 100%} .ce_comments input, .ce_comments textarea {width: 95%} .ce_comments input[type="submit"] {width: 98%} } */ /*--------------------------------------------*/ /*------- PAGE --> FORMS & INPUTS -------------*/ /*--------------------------------------------*/ .widget input {padding-top: 14px} .widget-text label, .widget-textarea label {cursor: text;display: -webkit-box;left: 0;line-height: 1.2;overflow: hidden;padding-left: 1rem;padding-top: 0.9rem;pointer-events: none;position: absolute;text-align: left;top: 0;transform-origin: left top;transition: all .15s cubic-bezier(.4,0,.2,1)} .widget-text.active label, .widget-textarea.active label {font-size: 0.7rem;padding-top: .5rem;padding-left: .8rem} .widget-select label {padding-left: 10px;padding-bottom: 2px; font-size: 14px} .widget-textarea {padding-top: 0} .widget-textarea textarea {padding: 25px 10px 10px 10px} .widget-textarea label {padding-top: 0.1rem} .widget-textarea.active label {margin-top: -6px} .ce_form {overflow: hidden; margin-bottom: 3%} .widget {display: flex;flex-flow: column;position: relative; margin-bottom: 1.5em;} .widget.select {width: 50%; position: relative; cursor: pointer} .widget.select .selectFrame:after {content: "";position: absolute;right: 10px;top: 18px;width: 12px;height: 12px;background-color: currentColor;-webkit-mask-image: var(--icon-arrow-right);mask-image: var(--icon-arrow-right);mask-repeat: no-repeat;mask-position: center;mask-size: contain;transform: rotate(90deg)} .widget.select select {cursor: pointer; padding-right: 30px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 100%;height: 100%; padding-top: 0} .widget.select .selectFrame {background-color: #f0f3f5;border-radius: .3rem;height: 50px; position: relative} .widget label, .widget input, .widget select, #tl_subscribe input.text, #tl_unsubscribe input.text {transition: all 0.2s;touch-action: manipulation} .widget input, .widget textarea, .widget select, #tl_subscribe input.text, #tl_unsubscribe input.text {font-size: 1em;border: 0;border-bottom: 1px solid var(--dark-grey);font-family: inherit;-webkit-appearance: none;border-radius: .3rem;padding: 15px 10px 0;cursor: text;background-color: var(--light-grey);height: 50px; margin: 1px} .widget textarea {height: 150px;padding: 24px 10px 10px;margin-top: -10px;} .widget input:focus, .widget textarea:focus, #tl_subscribe input.text, #tl_unsubscribe input.text {outline: 0;border-bottom: 1px solid #666} .widget input:placeholder-shown + label {cursor: text;max-width: 66.66%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transform-origin: left bottom;color: #646973;transform: translate(0.5rem, 2.2rem) scale(1.2);} .widget textarea:placeholder-shown + label {cursor: text;max-width: 66.66%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transform-origin: left bottom;color: #646973;transform: translate(0.5rem, 1.2rem) scale(1.2);} .widget ::-webkit-input-placeholder, .widget ::-webkit-textarea-placeholder {opacity: 0;transition: inherit;} .widget input:focus::-webkit-input-placeholder, .widget textarea:focus::-webkit-textarea-placeholder {opacity: 0;} .widget input:not(:placeholder-shown) + label, .widget input:focus + label {transform: translate(0, 0) scale(1);cursor: pointer;} .widget textarea:not(:placeholder-shown) + label, .widget textarea:focus + label {transform: translate(0, -12px) scale(1);cursor: pointer;} .submit_container, .widget-submit {float: right} .widget-submit button, .submit_container input[type="submit"], .mod_subscribe input[type="submit"], .mod_unsubscribe input[type="submit"], .mod_search .formbody input[type="submit"] {font-size: 1rem;text-align: center;white-space: normal;-ms-grid-row-align: center;align-self: center;width: 100%;min-width: 13.6rem;padding: 12px;background: #ec0016 !important;border: .1rem solid #ec0016;border-radius: .4rem;cursor: pointer; color: #fff; -moz-appearance: none;-webkit-appearance: none;appearance: none;} .widget-submit button:hover, .submit_container input[type="submit"]:hover, .mod_subscribe input[type="submit"]:hover, .mod_unsubscribe input[type="submit"]:hover, .mod_search .formbody input[type="submit"]:hover {background: var(--red-hover) !important;border: .1rem solid var(--red-hover);} .ce_form input::-webkit-input-placeholder, .ce_form input:focus::-webkit-input-placeholder, .widget textarea:focus::-webkit-textarea-placeholder {opacity: 0;transition: inherit;} .ce_form input:-moz-placeholder, .ce_form input:focus:-moz-placeholder, textarea:focus::-moz-textarea-placeholder, textarea::-moz-textarea-placeholder {opacity: 0;transition: inherit;} /* FF 4-18 */ .ce_form input::-moz-placeholder, .ce_form input:focus::-moz-placeholder {opacity: 0;transition: inherit;} /* FF 19+ */ .ce_form input:-ms-input-placeholder, .ce_form input:focus:-ms-input-placeholder {opacity: 0;transition: inherit; } /* IE 10+ */ .ce_form ::-webkit-input-placeholder {color: transparent;} .ce_form :-moz-placeholder {color: transparent;} .ce_form ::-moz-placeholder {color: transparent;} .ce_form :-ms-input-placeholder {color: transparent;} .ce_form input::placeholder {color: transparent;} textarea::-webkit-input-placeholder {color: transparent} textarea:-moz-placeholder {color: transparent;} textarea::-moz-placeholder {color: transparent;} textarea:-ms-input-placeholder {color: transparent;} textarea::placeholder {color: transparent;} /* Checkbox */ .contactFormCheckbox {border: 1px solid #ddd;background: #fff; border-radius: 3px;margin-top: 20px; cursor: pointer; position: relative;overflow: hidden; -webkit-user-select: none;-ms-user-select: none;user-select: none;} .contactFormCheckbox .error {position: absolute;font-size: 11px;top: -19px;margin: 0;left: 0;color: #e3000e} fieldset.datenschutz {padding: 2rem; border-radius: 5px} .row.checkbox {margin: 20px 0;padding: 5px 5px 5px 13px} .datenschutz .cBFrame {width: 100%} .cBFrame {height: 30px;display: inline-block;vertical-align: middle;display: flex;align-items: center;} .cBLabelOuter {font-size: 14px; font-family: var(--font-bold);display: inline-block; width: 85% !important;vertical-align: middle} .cBLabel {position: relative;padding-left: 45px;margin-bottom: 10px !important;line-height: 24px;cursor: pointer} .cBLabel input {position: absolute;opacity: 0;cursor: pointer;height:28px;width: 28px !important; left: 0} .cBLabel .checkmark {position: absolute;top: 0;left: 0;height: 28px;width: 28px;background-color: #f1f3f5;border: 2px solid #676b75;border-radius: 2px} .cBLabel:hover input ~ .checkmark {background-color: #ccc} .cBLabel input:checked ~ .checkmark {background-color: #ee0001} .checkmark:after {content: "";position: absolute;display: none} .cBLabel input:checked ~ .checkmark:after {display: block} .cBLabel .checkmark:after {left: 8px;top: 3px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg)} .cBLabel input:focus-visible {opacity: 1; width: 28px; height: 28px; left: -1px; top: -1px;-webkit-appearance: auto} .cBLabel a {font-family: var(--font-bold)} .cBLabel a:hover {text-decoration: underline} @media (max-width: 768px) { fieldset.datenschutz {padding: 3rem 1rem;} .widget-pgcapcha {margin-bottom: 0} .submit_container, .widget-submit {float: none} } /*--------------------------------------------------------------------------------------------------*/ /*------- GENERAL --> MEDIABREAKS ------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------*/ @media(max-width: 950px) { h1, h2, h3, h4, h5, h6 {hyphens: auto} h1 {font-size: 2.8em} h2 {font-size: 1.6em} h3 {font-size: 1.1em} } @media (max-width: 768px) { /*------- GENERAL -------------*/ h1 {font-size: 1.6em} h2 {font-size: 1.2em} figure.image_container.float_right, figure.image_container.float_left {max-width: inherit;float: none;margin: 3% 0} /*------- CONTAO NEWS -------------*/ .mod_newslist.flexRow.flex_3.flex_space .layout_latest {margin-bottom: 6%} }