/* Style für die Basis-Blöcke von Wordpress (Gutenberg) Die CSS-Styles werden im Frontend und im Backend-Block-Editor verwendet */ /* ------------------------------------------------------------------------------------------------------ BASIC ----------------------------------------------------------------------------------------------------- BLOCK BASIC - 0. Farbdefinitionen ---------------------------------- */ .has-accent-color-background-color { background-color: var(--color-accent) !important; } .has-accent-color-light-background-color { background-color: var(--color-accent-light) !important; } .has-secondary-color-background-color { background-color: var(--color-second) !important; } .has-secondary-color-light-background-color { background-color: var(--color-second-light) !important; } .has-color-light-background-color { background-color: var(--color-light) !important; } .has-color-black-background-color { background-color: black !important; } .has-color-white-background-color { background-color: white !important; } .has-accent-color-color { color: var(--color-accent) !important; } .has-accent-color-light-color { color: var(--color-accent-light) !important; } .has-secondary-color-color { color: var(--color-second) !important; } .has-secondary-color-light-color { color: var(--color-second-light) !important; } .has-color-light-color { color: var(--color-light) !important; } .has-color-black-color { color: black !important; } .has-color-white-color { color: white !important; } .has-gradient-accent-gradient-background { background: rgba(0,0,0,0) linear-gradient(30deg, var(--color-accent) -10%, var(--color-light) 85%) repeat scroll 0% 0%; } .has-gradient-secondary-gradient-background { background: rgba(0,0,0,0) linear-gradient(30deg, var(--color-accent) 0%, var(--color-second) 100%) repeat scroll 0% 0%; } .has-gradient-white-gradient-background { background: rgba(255,255,255,0) linear-gradient(90deg, rgb(255,255,255,1) 10%, rgba(255,255,255,0) 100%) repeat scroll 0% 0%; } .has-gradient-black-gradient-background { background: rgba(0,0,0,0) linear-gradient(90deg, rgb(0,0,0,0.5) -5%, rgba(0,0,0,0) 100%) repeat scroll 0% 0%; } .has-color-header-home-gradient-background { background: rgba(0,0,0,0) linear-gradient(15deg, var(--color-accent) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, var(--color-second) 95%) repeat scroll 0% 0%; } /* ------------------------------------------------------------------------------------------------------ BASIC ----------------------------------------------------------------------------------------------------- BLOCK BASIC - 1. Vertikale Abstaende generell ---------------------------------- */ .entry-content > * { margin: 0 auto; margin-top: var(--spacer-big); } .entry-content > div.wp-block-image + p, .entry-content > div.wp-block-image + .wp-block-classic { margin-top: 0; } /* --- Vertikaler Abstand zum Footer --- */ .spacer-last { margin-top: 0; margin-bottom: 10px; height: var(--spacer-big); } .nomargin + .spacer-last, .google-maps + .spacer-last, .wp-block-cover + .spacer-last, .wp-block-spacer + .spacer-last, .archive-nav-wrap + .spacer-last, .wp-block-image.alignfull + .spacer-last, .wp-block-gallery.alignfull + .spacer-last, .wp-block-video.alignfull + .spacer-last, .wp-block-embed-youtube.alignfull + .spacer-last, .wp-block-media-text.alignfull + .spacer-last, .wp-block-cover.alignfull + .spacer-last, .wp-block-columns.alignfull.has-background + .spacer-last, .wp-block-group.alignfull.has-background + .spacer-last { margin-bottom: 0; height: 0; } /* --- Vertikale Abstaende Text generell --- */ .entry-content h1 + *, .entry-content h2 + *, .entry-content h3 + *, .entry-content h4 + *, .entry-content h5 + *, .entry-content h6 + *, .entry-content p + ul, .entry-content p + ol, .entry-content ul + p, .entry-content ol + p, .entry-content > ul + ul, .entry-content > ul + ol, .entry-content > ol + ol, .entry-content > ol + ul, .entry-content > p + p { margin-top: var(--spacer-text) !important; } .entry-content > h1 + *:not(p):not(ul):not(ol), .entry-content > h2 + *:not(p):not(ul):not(ol), .entry-content > h3 + *:not(p):not(ul):not(ol), .entry-content > h4 + *:not(p):not(ul):not(ol), .entry-content > h5 + *:not(p):not(ul):not(ol), .entry-content > h6 + *:not(p):not(ul):not(ol) { margin-top: var(--spacer-small) !important; } .entry-content > * h1 + *, .entry-content > * h2 + *, .entry-content > * h3 + *, .entry-content > * h4 + *, .entry-content > * h5 + *, .entry-content > * h6 + * { margin-top: 0.2em !important; } .entry-content > * h1 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h2 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h3 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h4 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h5 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h6 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * p + p { margin-top: 1em !important; } .entry-content > * h4 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h5 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * h6 + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .entry-content > * p + p { margin-top: 0.5em !important; } .entry-content p + h1, .entry-content p + h2, .entry-content p + h3, .entry-content p + h4, .entry-content p + h5, .entry-content p + h6 { margin-top: var(--spacer-small) !important; } /* ---------------------------------- BLOCK BASIC - 2. Breitendefinition ---------------------------------- */ /* --- Allgemeine Breite --- */ .is-root-container .wp-block { max-width: 1100px; } .is-root-container [data-align="wide"], .is-root-container .wp-block[data-align="wide"] { max-width: 1600px; margin-right: auto; margin-left: auto; } .is-root-container [data-align="full"], .is-root-container .wp-block[data-align="full"] { max-width: 100%; margin-right: auto; margin-left: auto; } .entry-content > * { width: 90%; max-width: 1100px; margin-right: auto; margin-left: auto; } .entry-content p, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { max-width: 1100px; margin-right: auto; margin-left: auto; } /* --- alignbasic, alignwide, alignfull --- */ .alignbasic { width: 90%; max-width: 1100px; margin-right: auto; margin-left: auto; } .alignwide { width: 90%; max-width: 1600px; margin-right: auto; margin-left: auto; } .alignfull { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; } .entry-content img, .entry-content .alignwide img, .entry-content .alignfull img { width: 100%; height: auto; } .entry-content .size-thumbnail img, .entry-content .size-thumbnail.alignwide img, .entry-content .size-thumbnail.alignfull img { width: auto; } .entry-content .size-medium img, .entry-content .size-medium.alignwide img, .entry-content .size-medium.alignfull img { width: auto; } .entry-content .size-medium-large img, .entry-content .size-medium-large.alignwide img, .entry-content .size-medium-large.alignfull img { width: auto; } .entry-content .size-large img, .entry-content .size-large.alignwide img, .entry-content .size-large.alignfull img { width: 100%; } .wp-block-cover figure, .wp-block-classic figure, .wp-block-table figure, .wp-block-group figure, .wp-block-columns figure { margin-left: 0; margin-right: 0; } /* ---------------------------------- BLOCK BASIC - 3. alignleft, alignright ---------------------------------- */ .entry-content > .alignright, .wp-block-image .alignright, .entry-content > .alignleft, .wp-block-image .alignleft { margin-bottom: 2em; /*position: relative; top: 0em;*/ } @media (max-width:599px) { .entry-content > .alignright, .wp-block-image .alignright, .entry-content > .alignleft, .wp-block-image .alignleft { margin-top: 1.5em !important; } } @media (min-width:600px) { .entry-content > .alignright, .wp-block-image .alignright, .entry-content > .alignleft, .wp-block-image .alignleft { margin-bottom: 1.5em; } } @media (min-width:782px) { .entry-content > .alignright, .wp-block-image .alignright, .entry-content > .alignleft, .wp-block-image .alignleft { margin-bottom: 2em; } } .entry-content > .alignright > *, .entry-content > .alignleft > *, .entry-content > .alignright > .wp-block-group__inner-container > *, .entry-content > .alignleft > .wp-block-group__inner-container > * { width: 100% !important; } * + .alignleft, * + .alignright { margin-top: var(--spacer-text) !important; } .entry-content > .alignleft + *, .entry-content > .alignright + * { margin-top: var(--spacer-text) !important; } .entry-content > *:first-child.alignright, .is-root-container > *:first-child.alignright, .entry-content > *:first-child.alignleft, .is-root-container > *:first-child.alignleft { margin-top: 0 !important; } .entry-content > *:first-child.alignright + *, .is-root-container > *:first-child.alignright + *, .entry-content > *:first-child.alignleft + *, .is-root-container > *:first-child.alignleft + * { margin-top: 0 !important; } .wp-block-pullquote.alignright, .wp-block-pullquote.alignleft, .wp-block-latest-posts.alignright, .wp-block-latest-posts.alignleft, .wp-block-calendar.alignright, .wp-block-calendar.alignleft, .wp-block-categories.alignright, .wp-block-categories.alignleft, .wp-block-tag-cloud.alignright, .wp-block-tag-cloud.alignleft, .wp-block-cover.alignright, .wp-block-cover.alignleft, .wp-block-search.alignright, .wp-block-search.alignleft, .wp-block-image .alignright, .wp-block-image .alignleft, .wp-block-group.alignright, .wp-block-group.alignleft { max-width: 90%; display: inherit; } @media (min-width:600px) { .entry-content > .alignright, .is-root-container > .alignright, .wp-block-image .alignright { float: right; margin-left: 1.5em !important; margin-right: 5% !important; } .entry-content > .alignleft, .is-root-container > .alignleft, .wp-block-image .alignleft { float: left; margin-right: 1.5em !important; margin-left: 5% !important; } .wp-block-pullquote.alignright, .wp-block-pullquote.alignleft, .wp-block-latest-posts.alignright, .wp-block-latest-posts.alignleft, .wp-block-calendar.alignright, .wp-block-calendar.alignleft, .wp-block-categories.alignright, .wp-block-categories.alignleft, .wp-block-tag-cloud.alignright, .wp-block-tag-cloud.alignleft, .wp-block-cover.alignright, .wp-block-cover.alignleft, .wp-block-search.alignright, .wp-block-search.alignleft, .wp-block-image .alignright, .wp-block-image .alignleft, .wp-block-group.alignright, .wp-block-group.alignleft { max-width: 350px !important; } .wp-block-group.alignright, .wp-block-group.alignleft { width: 350px !important; } } @media (min-width:1210px) { .entry-content > .alignright, .is-root-container > .alignright, .wp-block-image .alignright { margin-left: 2em !important; margin-right: 5% !important; } .entry-content > .alignleft, .is-root-container > .alignleft, .wp-block-image .alignleft { margin-right: 2em !important; margin-left: 5% !important; } .wp-block-pullquote.alignright, .wp-block-pullquote.alignleft, .wp-block-latest-posts.alignright, .wp-block-latest-posts.alignleft, .wp-block-calendar.alignright, .wp-block-calendar.alignleft, .wp-block-categories.alignright, .wp-block-categories.alignleft, .wp-block-tag-cloud.alignright, .wp-block-tag-cloud.alignleft, .wp-block-cover.alignright, .wp-block-cover.alignleft, .wp-block-search.alignright, .wp-block-search.alignleft, .wp-block-image .alignright, .wp-block-image .alignleft, .wp-block-group.alignright, .wp-block-group.alignleft { max-width: 400px !important; } .wp-block-group.alignright, .wp-block-group.alignleft { width: 400px !important; } } @media (min-width:1760px) { .entry-content > .alignright, .is-root-container > .alignright, .wp-block-image .alignright { margin-left: 2em !important; margin-right: calc(50% - 800px) !important; } .entry-content > .alignleft, .is-root-container > .alignleft, .wp-block-image .alignleft { margin-right: 2em !important; margin-left: calc(50% - 800px) !important; } .wp-block-pullquote.alignright, .wp-block-pullquote.alignleft, .wp-block-latest-posts.alignright, .wp-block-latest-posts.alignleft, .wp-block-calendar.alignright, .wp-block-calendar.alignleft, .wp-block-categories.alignright, .wp-block-categories.alignleft, .wp-block-tag-cloud.alignright, .wp-block-tag-cloud.alignleft, .wp-block-cover.alignright, .wp-block-cover.alignleft, .wp-block-search.alignright, .wp-block-search.alignleft, .wp-block-image .alignright, .wp-block-image .alignleft, .wp-block-group.alignright, .wp-block-group.alignleft { max-width: 500px !important; } .wp-block-group.alignright, .wp-block-group.alignleft { width: 500px !important; } } /* ---------------------------------- BLOCK ALLGEMEIN - 1. Absatz ---------------------------------- */ /* --- p mit background -- */ p.has-background { width: calc(90% - 2em); max-width: calc(1100px - 2em); } p.has-background { padding: 1em 1.1em 1.1em 1.1em; } /* ---------------------------------- BLOCK ALLGEMEIN - 3. Auflistung ---------------------------------- */ ol.has-background, ul.has-background { padding: var(--spacer-text); padding-left: 2em !important; width: initial; } @media (max-width:781px) { .entry-content > ol.has-background, .entry-content > ul.has-background { padding: var(--spacer-text) 5% var(--spacer-text) calc(5% + 2em); width: calc(85% - 2em); } } @media (min-width:1210px) { .entry-content > ol.has-background, .entry-content > ul.has-background { padding: var(--spacer-text); padding-left: 2em; max-width: calc(1100px - var(--spacer-text) - 2em); width: 80%; } } /* --- Style: Farbige Bulletpoints --- */ ul.is-style-color-bullets, ul.is-style-color-bullets ul { list-style: none !important; } ul.is-style-color-bullets li { position: relative; } ul.is-style-color-bullets li::before, ul.is-style-color-bullets ul li::before { content: ""; width: 7px; height: 7px; position: absolute; top: 0.75em; left: -1em; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: var(--color-general-link); transform: translate(0%,-50%); } ul.is-style-color-bullets ul li::before { background-color: transparent; border: 1px solid var(--color-general-link); } /* --- Style: Farbige Striche --- */ ul.is-style-color-dash, ul.is-style-color-dash ul { list-style: none !important; } ul.is-style-color-dash li { position: relative; } ul.is-style-color-dash li::before, ul.is-style-color-dash ul li::before { content: "–"; position: absolute; top: 0; left: -1em; } /* --- Style: Farbige Zahlen --- */ ol.is-style-color-numbers { padding-left: 1.2em !important; } .entry-content > ol.is-style-color-numbers { padding-left: 2.2em !important; } ol.is-style-color-numbers, ol.is-style-color-numbers ol { list-style: none !important; counter-reset: item; } ol.is-style-color-numbers > li, ol.is-style-color-numbers ol > li { counter-increment: item; position: relative; } ol.is-style-color-numbers > li:before, ol.is-style-color-numbers ol > li:before { content: counter(item) ". "; /*font-weight: bold;*/ color: var(--color-general-link); position: absolute; right: calc(100% + 0.3em); white-space: nowrap !important; font-size: 0.95em; } ol.is-style-color-numbers ol > li:before { right: calc(100% + 0.3em); } /* ---------------------------------- BLOCK ALLGEMEIN - 4. Bilder ---------------------------------- */ /* --- Style: Standard --- */ .wp-block-image { margin-bottom: 0; } .entry-content .wp-block-image { max-width: 1100px; } .entry-content .wp-block-image.alignwide { max-width: 1600px; } .entry-content .wp-block-image.alignfull { max-width: 100%; } .entry-content .wp-block-image + .wp-block-image { margin-top: var(--spacer-small); } .entry-content p + .wp-block-image { margin-top: var(--spacer-text); } .entry-content .wp-block-image { line-height: 0; } .entry-content .wp-block-image:not(figure) { width: 100%; max-width: 100%; } .wp-block-image .alignleft, .wp-block-image .alignright { margin-top: 0; margin-bottom: 2rem; position: relative; top: 0.3em; } @media (max-width:599px) { .wp-block-image .alignleft, .wp-block-image .alignright { width: 90%; max-width: 90%; margin-bottom: 1rem; margin-left: auto; margin-right: auto; float:none; } } .wp-block-image.size-thumbnail { width: 150px; } @media (min-width:330px) { .wp-block-image.size-medium { width: 300px; } } @media (max-width:879px) { .wp-block-image > .size-medium-large { width: 90%; max-width: 800px; } } @media (min-width:880px) { .wp-block-image.size-medium-large { width: 100%; max-width: 800px !important; } .wp-block-image.size-medium-large img { width: 100%; max-width: 800px; } } .wp-block-image figcaption { width: 100%; margin: 0 !important; font-size: 0.8em; padding: 5px 0 0 0; } .wp-block-image.size-thumbnail figcaption { display:none; } .wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.is-resized > figcaption { display: block; } /* --- Style: Rounded (Standard) --- */ figure.is-style-rounded, figure.is-style-rounded > div, .is-style-rounded > figure { width: 100%; height: 0; padding-bottom: 100%; position: relative; } .entry-content > figure.is-style-rounded, .is-root-container > figure.is-style-rounded { width: 90%; height: 90vw; max-width: 1100px; max-height: 1100px; padding-bottom: 0; position: relative; } .is-style-rounded > figure { margin-top: 0; margin-bottom: 0; } .is-style-rounded img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .is-style-rounded figcaption { position: absolute; bottom: 0; left: 0; transform:translate(0%,100%); text-align: center; } /* --- Style: Square --- */ figure.is-style-square, .is-style-square > figure { width: 100%; height: 0; padding-bottom: 100%; position: relative; } .entry-content > figure.is-style-square, .is-root-container > figure.is-style-square { width: 90%; height: 90vw; max-width: 1100px; max-height: 1100px; padding-bottom: 0; position: relative; } .is-style-square > figure { margin-top: 0; margin-bottom: 0; } .is-style-square img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .is-style-square figcaption { position: absolute; bottom: 0; left: 0; transform:translate(0%,100%); } /* --- Style: Rectangular 100:65 --- */ figure.is-style-rectangular, .is-style-rectangular > figure { width: 100%; height: 0; padding-bottom: 65%; position: relative; } .entry-content > figure.is-style-rectangular, .is-root-container > figure.is-style-rectangular { width: 90%; height: 58.5vw; max-width: 1100px; max-height: 715px; padding-bottom: 0; position: relative; } .is-style-rectangular > figure { margin-top: 0; margin-bottom: 0; } .is-style-rectangular img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .is-style-rectangular figcaption { position: absolute; bottom: 0; left: 0; transform:translate(0%,100%); } /* --- fuer Backend --- */ .is-style-rounded .components-resizable-box__container, .is-style-square .components-resizable-box__container, .is-style-rectangular .components-resizable-box__container { display: block; width: 100% !important; height: 0 !important; padding: 0 0 100% 0 !important; position: relative !important; } .is-style-rounded .components-resizable-box__container img, .is-style-square .components-resizable-box__container img, .is-style-rectangular .components-resizable-box__container img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .is-style-rectangular .components-resizable-box__container { padding: 0 0 65% 0 !important; } /* ---------------------------------- BLOCK ALLGEMEIN - 5. Galerie ---------------------------------- */ /* --- Style: Allgemein --- */ .entry-content .wp-block-gallery { max-width: 1100px; } .entry-content .wp-block-gallery.alignwide { max-width: 1600px; } .entry-content .wp-block-gallery.alignfull { max-width: 100%; } .entry-content .wp-block-gallery + .wp-block-gallery { margin-top: var(--spacer-small); } .wp-block-gallery ul { margin-left: auto !important; margin-bottom: -1em !important; padding-left: 0 !important; } .wp-block-gallery ul li, .wp-block-gallery ol li { margin-top: 0; } .wp-block-gallery > ul, .wp-block-gallery > ol { padding-left: 0 !important; } @media (min-width:600px) { .entry-content .blocks-gallery-grid .blocks-gallery-image, .entry-content .blocks-gallery-grid .blocks-gallery-item, .entry-content .wp-block-gallery .blocks-gallery-image, .entry-content .wp-block-gallery .blocks-gallery-item { width: calc(49% - 1em); } .entry-content .blocks-gallery-grid.columns-3 .blocks-gallery-image, .entry-content .blocks-gallery-grid.columns-3 .blocks-gallery-item, .entry-content .wp-block-gallery.columns-3 .blocks-gallery-image, .entry-content .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(32% - .66667em); } .entry-content .blocks-gallery-grid.columns-4 .blocks-gallery-image, .entry-content .blocks-gallery-grid.columns-4 .blocks-gallery-item, .entry-content .wp-block-gallery.columns-4 .blocks-gallery-image, .entry-content .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(24% - .75em); } .entry-content .blocks-gallery-grid.columns-5 .blocks-gallery-image, .entry-content .blocks-gallery-grid.columns-5 .blocks-gallery-item, .entry-content .wp-block-gallery.columns-5 .blocks-gallery-image, .entry-content .wp-block-gallery.columns-5 .blocks-gallery-item { width: calc(19% - .8em); } .entry-content .blocks-gallery-grid.columns-6 .blocks-gallery-image, .entry-content .blocks-gallery-grid.columns-6 .blocks-gallery-item, .entry-content .wp-block-gallery.columns-6 .blocks-gallery-image, .entry-content .wp-block-gallery.columns-6 .blocks-gallery-item { width: calc(15% - .83333em); } .entry-content .blocks-gallery-grid.columns-7 .blocks-gallery-image, .entry-content .blocks-gallery-grid.columns-7 .blocks-gallery-item, .entry-content .wp-block-gallery.columns-7 .blocks-gallery-image, .entry-content .wp-block-gallery.columns-7 .blocks-gallery-item { width: calc(13% - .85714em); } } /* ---------------------------------- BLOCK ALLGEMEIN - 6. Cover ---------------------------------- */ /* --- Style: Allgemein --- */ .entry-content .wp-block-cover { max-width: 1100px; } .entry-content .wp-block-cover.alignwide { max-width: 1600px; } .entry-content .wp-block-cover.alignfull { max-width: 100%; } .entry-content .wp-block-cover img, .entry-content .wp-block-cover.alignwide img, .entry-content .wp-block-cover.alignfull img { height: 100%; } .entry-content .wp-block-cover + .wp-block-cover { margin-top: 0; } .wp-block-cover:not(.alignleft):not(.alignright), .wp-block-cover-image:not(.alignleft):not(.alignright) { padding: var(--spacer-big) 5vw; } @media (min-width:600px) { .wp-block-cover:not(.alignleft):not(.alignright), .wp-block-cover-image:not(.alignleft):not(.alignright) { padding: var(--spacer-big); } } .wp-block-cover, .wp-block-cover-image { width: inherit; height: inherit; } .wp-block-cover:not(.alignleft):not(.alignright) > .wp-block-cover__inner-container, .wp-block-cover-image:not(.alignleft):not(.alignright) > .wp-block-cover__inner-container { max-width: 1100px; /* margin-right: auto; margin-left: auto;*/ } .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container { width: 100%; } .wp-block-cover-image .wp-block-columns, .wp-block-cover .wp-block-columns { width: 100%; } .wp-block-cover__video-background, .wp-block-cover__gradient-background { max-width: 100% !important; } /* --- Style: 50% Höhe --- */ .is-style-height-mid { min-height: 80vw !important; height: 80vw !important; } @media (min-width:600px) { .is-style-height-mid { min-height: calc(50vh - 8em) !important; /* Use vh as a fallback for browsers that do not support Custom Properties */ min-height: calc(var(--vh, 1vh) * 50 - 8em) !important; height: calc(50vh - 8em) !important; /* Use vh as a fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 50 - 8em) !important; } } /* --- Style: volle Höhe --- */ .is-style-height-full { min-height: 110vw !important; height: 110vw !important; } @media (min-width:600px) { .is-style-height-full { min-height: calc(100vh - 8em) !important; /* Use vh as a fallback for browsers that do not support Custom Properties */ min-height: calc(var(--vh, 1vh) * 100 - 8em) !important; height: calc(100vh - 8em) !important; /* Use vh as a fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100 - 8em) !important; } } /* ---------------------------------- BLOCK ALLGEMEIN - 7. Video & div. Embedder ---------------------------------- */ .entry-content .wp-block-video { max-width: 1100px; } .entry-content .wp-block-video.alignwide { max-width: 1600px; } .entry-content .wp-block-video.alignfull { max-width: 100%; } .entry-content .wp-block-video + .wp-block-video { margin-top: var(--spacer-small); } .wp-block-video video { max-width: 100%; width: 100%; background-color: #999 !important; } .wp-block-embed__wrapper > * { max-width: 100%; width: 100%; height: 100%; position: absolute; margin: auto; } .wp-block-embed__wrapper { height: 0; padding: 0 0 55% 0; position: relative; background-color: #999 !important; } /* ---------------------------------- BLOCK ALLGEMEIN - 8. Audio ---------------------------------- */ .wp-block-audio { } .entry-content .wp-block-audio + .wp-block-audio { margin-top: var(--spacer-small); } /* ---------------------------------- BLOCK ALLGEMEIN - 8. Datei ---------------------------------- */ .wp-block-file { margin-bottom: 0; } .entry-content .wp-block-file + .wp-block-file { margin-top: 0.5em; } .wp-block-file > a:before, .wp-block-file__content-wrapper:before { content: ""; display: inline-block; position: relative; top: 0.07em; width: 0.8em; height: 0.8em; margin-right: 0.3em; background: var(--color-general-txt); -webkit-mask-image: url(../img/icon-document.svg); -webkit-mask-size: auto 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(../img/icon-document.svg); mask-size: auto 100%; mask-repeat: no-repeat; mask-position: center; opacity: 0.7; } .wp-block-file:hover > a:before, .wp-block-file__content-wrapper:before { transform: scale(1.2); /* Equal to scaleX(1.2) scaleY(1.2) */ opacity: 1; } /* --- Datei Button --- */ .wp-block-file > a.wp-block-file__button:before { content: none; } .wp-block-file .wp-block-file__button { background: var(--color-general-bg); border: 1px solid var(--color-accent); color: var(--color-accent); -moz-border-radius: 1.3em; -webkit-border-radius: 1.3em; border-radius: 1.3em; font-size: 0.8em; padding: .1em 1em; } .wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited { box-shadow: none; color: var(--color-accent); opacity: 1; text-decoration: none; } .wp-block-file a.wp-block-file__button:hover { background: var(--color-accent); color: #fff; } /* --- Style mit Icon PDF --- */ .wp-block-file.is-style-icon-pdf > a:not(.wp-block-file__button)::before, .is-style-icon-pdf .wp-block-file__content-wrapper::before { content: ""; display: inline-block; position: relative; top: 0.15em; width: 1em; height: 1em; transform: scale(1.25); /* Equal to scaleX(1.2) scaleY(1.2) */ margin-right: 0.4em; background: transparent; -webkit-mask-image: none; mask-image: none; background-image: url(../img/icon-pdf.svg); background-size: auto 100%; background-position: left center; background-repeat: no-repeat; opacity: 1; } .wp-block-file.is-style-icon-pdf:hover > a:not(.wp-block-file__button)::before, .is-style-icon-pdf .wp-block-file__content-wrapper::before { transform: scale(1.5); /* Equal to scaleX(1.2) scaleY(1.2) */ } /* ------------------------------------------------------------------------------------------------------ FORMATIERUNG ----------------------------------------------------------------------------------------------------- BLOCK FORMATIERUNG - 1. Classic ---------------------------------- */ .entry-content .wp-block-classic + .wp-block-classic { margin-top: var(--spacer-text); } .wp-block-classic { } .wp-block-classic > * { margin-top: 0.5em; } .wp-block-classic > *:first-child { margin-top: 0; } .wp-block-classic > blockquote { margin-top: 1em; margin-bottom: 1em; color: var(--color-accent); } .wp-block-classic img { width: auto; } /* ---------------------------------- BLOCK FORMATIERUNG - 2. Zitat (Blockquote) ---------------------------------- */ /* --- Grundgestaltung Blockquote --- */ blockquote { padding-bottom: 0.3em; } blockquote p { max-width: 1100px; margin-right: auto !important; margin-left: auto !important; padding: 0; font-style: italic; } .entry-content > blockquote p + p { margin-top: 0.25em !important; } blockquote cite, .wp-block-quote__citation, .wp-block-pullquote__citation { display: block; /* ------------------------------------------------------------------------------------------------------- width: 90%;*/ max-width: 1100px; margin-right: auto !important; margin-left: auto !important; font-size: 0.8rem; /*text-align: right !important;*/ margin-top: 0.5em; font-style: italic; } .wp-block-quote__citation, .wp-block-quote cite, .wp-block-quote footer { color: var(--color-general-txt); opacity: 0.7; font-size: 0.8rem !important; } .is-root-container blockquote p { width: 100% !important; } blockquote p:first-child::before, blockquote p:last-child::after { content: "«"; font-style: normal; font-weight: var(--font-general-bold); font-size: 3em; line-height: 0em; color: inherit; margin-right: -0.2em; opacity: 0.07; position: relative; top: 0.1em; left: -0.1em; } blockquote p:last-child::after { content: "»"; /*font-size: 1em; opacity: 0.2; top: 0; left: 0;*/ } /* --- Style: Standard --- */ .entry-content .wp-block-quote + .wp-block-quote { margin-top: var(--spacer-small); } .wp-block-quote { /* ------------------------------------------------------------------------------------------------------- width: 90%;*/ max-width: 1100px; margin-right: auto !important; margin-left: auto !important; } @media (min-width:782px) { .wp-block-quote { } } /* .is-root-container .wp-block-quote, .is-root-container .wp-block-quote__citation { width: 100% !important; } .is-root-container .wp-block-quote { margin-top: 0 !important; margin-bottom: 0 !important; }*/ /* --- Style: Gross --- */ .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding: 0; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { line-height: 1.4; } .wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before { font-size: 3em; top: -0.12em; left: -0.05em; } @media (max-width:781px) { .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding: 0; } } /* ---------------------------------- BLOCK FORMATIERUNG - 3. Pullquote ---------------------------------- */ /* --- Style: Allgemein --- */ .entry-content .wp-block-pullquote + .wp-block-pullquote { margin-top: var(--spacer-small); } .wp-block-pullquote { width: 90%; border-top: 3px solid; border-bottom: 3px solid; margin-right: auto !important; margin-left: auto !important; color: inherit; padding: 0; } .wp-block-pullquote.has-background.alignwide, .wp-block-pullquote.has-background.alignfull { width: 100%; } .wp-block-pullquote.alignright, .wp-block-pullquote.alignleft { position: relative; top: 0em; } @media (max-width:781px) { .wp-block-pullquote blockquote p { width: 90%; } } .wp-block-pullquote blockquote { text-align: center; } .wp-block-pullquote blockquote p { /* ------------------------------------------------------------------------------------------------------- width: 90%;*/ max-width: 1100px; } .wp-block-pullquote blockquote p:before, .wp-block-pullquote blockquote p:after { color: inherit; } /* .is-root-container .wp-block-pullquote, .is-root-container .wp-block-pullquote__citation { width: 100% !important; } .is-root-container .wp-block-pullquote { margin-top: 0 !important; margin-bottom: 0 !important; }*/ /* --- Style: Farbfüllend --- */ .wp-block-pullquote.is-style-solid-color { border: none; background-color: var(--color-accent); padding-top: var(--spacer-small); padding-bottom: var(--spacer-small); } @media (max-width:781px) { .wp-block-pullquote.is-style-solid-color { width: 100%; max-width: 1100px; } .wp-block-pullquote.is-style-solid-color blockquote p { width: 100%; } } .wp-block-pullquote.is-style-solid-color blockquote.has-color-white-color p:before { opacity: 0.2; } .wp-block-pullquote.is-style-solid-color blockquote.has-color-white-color p:after { opacity: 0.4; } .wp-block-pullquote.is-style-solid-color blockquote { width: 80%; max-width: 1100px; } /* ---------------------------------- BLOCK FORMATIERUNG - 4. Tabelle ---------------------------------- */ /* --- Style: Allgemein --- */ .entry-content .wp-block-table + .wp-block-table { margin-top: var(--spacer-small); } .wp-block-table table { margin: 0; } .wp-block-table th, .wp-block-table td { text-align: left; } .wp-block-table th { font-weight: var(--font-general-bold); font-size: 0.95em; } .wp-block-table figcaption { font-size: 0.8em; text-align: right; font-style: italic; } .wp-block-table thead { border-bottom: none } .wp-block-table:not(.is-style-stripes) tbody tr { background-color: var(--color-light) !important; } .wp-block-table:not(.is-style-stripes) tbody tr { border-bottom: 2px solid var(--color-general-bg) !important; } /* --- Style: mit Streifen --- */ .wp-block-table.is-style-stripes { border-bottom: none !important; } .wp-block-table.is-style-stripes tbody { background-color: var(--color-general-bg) !important; } .wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) { background-color: var(--color-light) !important; } /* --- mit Text-Alignierung --- */ .wp-block-table th.has-text-align-right, .wp-block-table td.has-text-align-right { text-align: right; } .wp-block-table th.has-text-align-left, .wp-block-table td.has-text-align-left { text-align: left; } .wp-block-table th.has-text-align-center, .wp-block-table td.has-text-align-center { text-align: center; } @media (max-width:599px) { .wp-block-table th, .wp-block-table td { font-size: 0.8em; line-height: 1.4em; } } @media (min-width:600px) and (max-width:781px) { .wp-block-table th, .wp-block-table td { font-size: 0.85em; line-height: 1.4em; } } /* ---------------------------------- BLOCK FORMATIERUNG - 5. Vers ---------------------------------- */ .wp-block-verse { font-family: inherit; font-style: italic; white-space: pre-wrap; color: inherit; padding: 0; } .entry-content .wp-block-verse + .wp-block-verse { margin-top: var(--spacer-small); } /* ---------------------------------- BLOCK FORMATIERUNG - 5. Code ---------------------------------- */ .wp-block-code { color: inherit; padding: 0; } .entry-content .wp-block-code + .wp-block-code { margin-top: var(--spacer-small); } .wp-block-code code { white-space: pre-wrap; } /* ---------------------------------- BLOCK FORMATIERUNG - 6. HTML ---------------------------------- */ iframe.google-maps { background-color: var(--color-light) !important; width: 100% !important; max-width: 100% !important; height: calc(100vh - 10rem) !important; /* Use vh as a fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100 - 10rem) !important; margin-bottom: -0.5em !important; } @media (max-width:599px) { iframe.google-maps { height: 100vw !important; } } /* ---------------------------------- BLOCK FORMATIERUNG - 7. Vorformatiert ---------------------------------- */ .entry-content .wp-block-preformatted + .wp-block-preformatted { margin-top: var(--spacer-small); } /* ------------------------------------------------------------------------------------------------------ LAYOUT ----------------------------------------------------------------------------------------------------- BLOCK LAYOUT - 1. Gruppe ---------------------------------- */ .wp-block-group:not(.alignright):not(.alignleft) .wp-block-group__inner-container > * { margin-right: auto; margin-left: auto; } .wp-block-group:not(.alignright):not(.alignleft) .wp-block-group__inner-container > *:not(figure) { /* ------------------------------------------------------------------------------------------------------- width: 90%;*/ max-width: 1100px; } .entry-content .wp-block-group + .wp-block-group { margin-top: var(--spacer-big); } .entry-content .wp-block-group.has-background + .wp-block-group.has-background { margin-top: 0; } .wp-block-group .wp-block-group__inner-container > * { width: 100%; } .wp-block-group .wp-block-group__inner-container > *:first-child { margin-top: 0 !important; } .wp-block-group .wp-block-group__inner-container > *:last-child { margin-bottom: 0 !important; } .wp-block-group.alignleft .wp-block-group__inner-container, .wp-block-group.alignright .wp-block-group__inner-container { padding: 0; } .wp-block-group.has-background .wp-block-group__inner-container { padding: var(--spacer-big) 5vw; } .wp-block-group.alignfull:not(.has-background) .wp-block-group__inner-container { padding: 0 5vw; } @media (min-width:1210px) { .wp-block-group.has-background .wp-block-group__inner-container { padding-left: var(--spacer-big); padding-right: var(--spacer-big); } } /* --- Gruppe mit alignleft/alignright --- */ .wp-block-group.alignleft .wp-block-group__inner-container .wp-block-separator + *, .wp-block-group.alignright .wp-block-group__inner-container .wp-block-separator + * { margin-top: -0.5em; } /* --- Gruppe innerhalb eines Spaltenblocks --- */ .wp-block-column .wp-block-group.has-background .wp-block-group__inner-container { padding: 1em; } @media (min-width:782px) { .wp-block-column .wp-block-group.has-background .wp-block-group__inner-container { padding: var(--spacer-text); } } /* --- Style: Hintergrundbild links/rechts --- */ .is-style-bgimg-left, .is-style-bgimg-right { width: 70% !important; max-width: 70% !important; margin: 0 auto -30vw auto !important; padding: 0; /*background: #ffffff50;*/ } .entry-content .is-style-bgimg-left, .entry-content .is-style-bgimg-right { z-index: -1 !important; position: relative; } .is-style-bgimg-left + *, .is-style-bgimg-right + * { margin-top: 0 !important; } .is-style-bgimg-left > *, .is-style-bgimg-right > * { position: relative; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .is-style-bgimg-left figure, .is-style-bgimg-right figure { width: 100% !important; max-width: 1000px !important; /*border: 1px dashed yellow;*/ } @media (min-width:782px) { .is-style-bgimg-left, .is-style-bgimg-right { width: 70% !important; max-width: 70% !important; height: 4rem; margin: 0 auto -4rem 0 !important; } .is-style-bgimg-right { margin: 0 0 -4rem auto !important; } .is-style-bgimg-left figure, .is-style-bgimg-right figure { position: absolute; top: -4vw; right: 0; } .is-style-bgimg-right figure { right: auto; left: 0; } } @media (min-width:1001px) { .is-style-bgimg-left, .is-style-bgimg-right { width: 50% !important; max-width: 50% !important; } } /* ---------------------------------- BLOCK - Columns ---------------------------------- */ .wp-block-columns { margin-bottom: 0; max-width: 1100px; } .entry-content .wp-block-columns + .wp-block-columns { margin-top: var(--spacer-big); } .wp-block-columns { width: 90%; max-width: 1100px; } .wp-block-columns.alignwide { width: 90%; max-width: 1600px; } .wp-block-columns.alignfull { width: 90%; max-width: 90%; } .wp-block-columns .wp-block-columns { width: 100%; max-width: 100%; box-sizing: border-box; } @media (min-width:1760px) { .wp-block-columns.alignfull { width: 100%; max-width: calc(100% - 8rem); } } .entry-content .wp-block-columns.has-background:not(.is-style-featured-column):not(.alignwide):not(.alignfull) { max-width: calc(1100px - 4rem); } .wp-block-column { order: 2 !important; } .wp-block-column:only-child { margin-right: auto !important; margin-left: auto !important; } /* --- Spezifische Reihenfolge auf Mobile-Geraeten fuer die gewaehlte Spalte --- */ /* --- WICHTIG: fuer die jeweilige Spalte muss die CSS-Class "first" eingefuegt werden --- */ @media (max-width:599px) { .wp-block-column.first { order: 1 !important; margin-top: 0 !important; margin-bottom: 1em !important; } .wp-block-column:first-child.first { margin-bottom: 0 !important; } } @media (min-width:600px) and (max-width:781px) { .wp-block-column { flex-basis: calc(50% - 16px) !important; } } .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column p, .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column h1, .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column h2, .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column h3, .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column h4, .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column h5, .wp-block-columns.has-background.alignfull:not(.is-style-featured-column) .wp-block-column h6 { padding-left: 0; padding-right: 0; } .wp-block-column p { width: inherit; } .wp-block-column p.has-background { width: calc(100% - 60px); } @media (max-width:599px) { .wp-block-columns .wp-block-column + .wp-block-column { margin-top: 1em; } } .wp-block-column.is-vertically-aligned-bottom, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-top { width: auto; } .wp-block-columns.has-background:not(.is-style-featured-column) { padding: 20px 5% 23px 5%; } @media (min-width:782px) { .wp-block-columns.has-background:not(.is-style-featured-column):not(.alignleft):not(.alignright):not(.alignfull) { width: calc(90% - 4rem); } .wp-block-columns .wp-block-columns.has-background:not(.is-style-featured-column):not(.alignleft):not(.alignright):not(.alignfull) { width: 100%; } .wp-block-columns.has-background:not(.is-style-featured-column) { padding: 2rem; } } @media (min-width:1760px) { .wp-block-columns.has-background:not(.is-style-featured-column) { padding: 2rem; } .wp-block-columns.has-background:not(.is-style-featured-column).alignwide, .wp-block-columns.has-background.alignfull { width: calc(100% - 4rem); } .wp-block-columns .wp-block-columns.has-background:not(.is-style-featured-column).alignwide, .wp-block-columns.has-background.alignfull { width: 100%; } .wp-block-columns.has-background:not(.is-style-featured-column).alignfull { padding: 2rem 4rem; width: inherit; max-width: inherit; } } .wp-block-column > *:first-child { margin-top: 0 !important; } .entry-content .wp-block-column > *:last-child { margin-bottom: 0 !important; } @media (min-width:782px) { .wp-block-columns.has-background:not(.is-style-featured-column):not(.alignleft):not(.alignright):not(.alignfull) { width: calc(90% - 4rem); } .wp-block-columns .wp-block-columns.has-background:not(.is-style-featured-column):not(.alignleft):not(.alignright):not(.alignfull) { width: 100%; } .wp-block-columns.has-background:not(.is-style-featured-column) { padding: 2rem; } } @media (min-width:1760px) { .wp-block-columns.has-background:not(.is-style-featured-column) { padding: 2rem; } .wp-block-columns.has-background:not(.is-style-featured-column).alignwide, .wp-block-columns.has-background.alignfull { width: calc(100% - 4rem); } .wp-block-columns .wp-block-columns.has-background:not(.is-style-featured-column).alignwide, .wp-block-columns.has-background.alignfull { width: 100%; } .wp-block-columns.has-background:not(.is-style-featured-column).alignfull { padding: 2rem 4rem; width: inherit; max-width: inherit; } } /* --- Style: Featured --- */ .is-style-featured-column { /* ------------------------------------------------------------------------------------------------------- width: 90%;*/ margin-right: auto; margin-left: auto; } .is-style-featured-column + .is-style-featured-column { margin-top: var(--spacer-small) !important; } .is-style-featured-column.has-background ul, .is-style-featured-column.has-background ol { padding-left: 2em !important; padding-right: 1em; } .is-style-featured-column .wp-block-column { margin-top: 1em; margin-bottom: 1em; } .is-style-featured-column.has-background .wp-block-column > *:first-child:not(.wp-block-image):not(.wp-block-cover):not(.block-list-appender) { margin-top: 1rem !important; } @media (max-width:599px) { .is-style-featured-column .wp-block-column:nth-child(1) { margin-top: 0; } .is-style-featured-column .wp-block-column:last-child { margin-bottom: 0; } } @media (min-width:599px) and (max-width:781px) { .is-style-featured-column .wp-block-column:nth-child(1), .is-style-featured-column .wp-block-column:nth-child(2) { margin-top: 0; } } @media (min-width:782px) { .is-style-featured-column .wp-block-column { margin-top: 0; margin-bottom: 0; } } .entry-content .is-style-featured-column .wp-block-column > * { margin: 0 0 0.5em 0; } .is-style-featured-column .wp-block-column figure { margin-bottom: 1.25em !important; } .is-style-featured-column .wp-block-image .alignleft, .is-style-featured-column .wp-block-image .alignright { top: 0; } .is-style-featured-column .wp-block-column > h1, .is-style-featured-column .wp-block-column > h2, .is-style-featured-column .wp-block-column > h3, .is-style-featured-column .wp-block-column > h4, .is-style-featured-column .wp-block-column > h5, .is-style-featured-column .wp-block-column > h6 { margin-bottom: 0 !important; } .is-style-featured-column .wp-block-column > .wp-block-buttons { margin-top: 1em !important; margin-bottom: 0 !important; } .is-style-featured-column.has-background .wp-block-column > .wp-block-buttons.alignright { padding-right: 1em; margin-bottom: 0 !important; } .is-style-featured-column.has-background .wp-block-column > .wp-block-buttons.alignleft { padding-left: 1em; margin-bottom: 0 !important; } /* Featured mit gestylten Bildern (Rund/Quadratisch/Rechteckig) */ .is-style-featured-column .wp-block-column > figure.is-style-rounded, .is-style-featured-column .wp-block-column > figure.is-style-square, .is-style-featured-column .wp-block-column > figure.is-style-rectangular { margin: 0; width: 100%; padding-bottom: 100%; } .is-style-featured-column .wp-block-column > figure.is-style-rectangular { padding-bottom: 65%; } /* Featured mit gestylten Bildern (Rund/Quadratisch/Rechteckig) inkl. Alignierung */ .is-style-featured-column .wp-block-column > .is-style-rounded > figure, .is-style-featured-column .wp-block-column > .is-style-square > figure, .is-style-featured-column .wp-block-column > .is-style-rectangular > figure { margin: 0 auto 1em auto !important; width: 50% !important; max-width: 50% !important; height: 0 !important; padding: 0 0 50% 0; float:none; } .is-style-featured-column .wp-block-column > .is-style-rectangular > figure { padding: 0 0 32.5% 0; } .is-style-featured-column .wp-block-column > .is-style-rounded > figure.alignright, .is-style-featured-column .wp-block-column > .is-style-square > figure.alignright, .is-style-featured-column .wp-block-column > .is-style-rectangular > figure.alignright { margin-right: 0 !important; } .is-style-featured-column .wp-block-column > .is-style-rounded > figure.alignleft, .is-style-featured-column .wp-block-column > .is-style-square > figure.alignleft, .is-style-featured-column .wp-block-column > .is-style-rectangular > figure.alignleft { margin-left: 0 !important; } /* Featured mit Hintergrund */ .is-style-featured-column.has-background { padding: 0; background: transparent !important; } .is-style-featured-column.has-background .wp-block-column { padding: 0 0 1.5em 0; } .is-root-container .is-style-featured-column.has-background .wp-block-column { padding: 0 0 1.5em 0 !important; } .is-style-featured-column.has-background .wp-block-column > *:not(.wp-block-image):not(.wp-block-cover) { padding: 0 1rem 0 1rem; } .is-style-featured-column.has-background .wp-block-column > *:first-child:not(.wp-block-image):not(.wp-block-cover):not(.block-list-appender) { margin-top: 1rem; } /* Featured mit Hintergrund > Bildstyles & Alignierung */ .is-style-featured-column.has-background .wp-block-column > figure.is-style-rounded { margin: 1em; width: calc(100% - 2em); padding-bottom: calc(100% - 2em); } .is-style-featured-column.has-background .wp-block-column > .is-style-rounded > figure, .is-style-featured-column.has-background .wp-block-column > .is-style-square > figure, .is-style-featured-column.has-background .wp-block-column > .is-style-rectangular > figure { margin: 0 auto 1em auto !important; width: 50% !important; max-width: 50% !important; height: 0 !important; padding: 0 0 50% 0; float:none; } .is-style-featured-column.has-background .wp-block-column > .is-style-rectangular > figure { padding: 0 0 32.5% 0; } .is-style-featured-column.has-background .wp-block-column > .is-style-rounded > figure.alignright, .is-style-featured-column.has-background .wp-block-column > .is-style-square > figure.alignright, .is-style-featured-column.has-background .wp-block-column > .is-style-rectangular > figure.alignright { margin-right: 1em !important; } .is-style-featured-column.has-background .wp-block-column > .is-style-rounded > figure.alignleft, .is-style-featured-column.has-background .wp-block-column > .is-style-square > figure.alignleft, .is-style-featured-column.has-background .wp-block-column > .is-style-rectangular > figure.alignleft { margin-left: 1em !important; } .is-style-featured-column.has-background:not(.outside) .wp-block-column > .is-style-rounded > figure, .is-style-featured-column.has-background:not(.outside) .wp-block-column > .is-style-square > figure, .is-style-featured-column.has-background:not(.outside) .wp-block-column > .is-style-rectangular > figure { margin-top: 1.5em !important; } .is-style-featured-column.has-accent-color-background-color:not(.outside) .wp-block-column { background-color: var(--color-accent) !important; } .is-style-featured-column.has-accent-color-light-background-color:not(.outside) .wp-block-column { background-color: var(--color-accent-light) !important; } .is-style-featured-column.has-secondary-color-background-color:not(.outside) .wp-block-column { background-color: var(--color-second) !important; } .is-style-featured-column.has-secondary-color-light-background-color:not(.outside) .wp-block-column { background-color: var(--color-second-light) !important; } .is-style-featured-column.has-color-light-background-color:not(.outside) .wp-block-column { background-color: var(--color-light) !important; } .is-style-featured-column.has-color-black-background-color:not(.outside) .wp-block-column { background-color: black !important; } .is-style-featured-column.has-color-white-background-color:not(.outside) .wp-block-column { background-color: white !important; } /* Featured mit Hintergrund und Bild teilweise aussen */ .is-style-featured-column.outside .wp-block-column { position: relative; } .is-style-featured-column.outside .wp-block-column:before { content: ""; display: block; position: absolute; top: 22.5vw; left: 0; right: 0; bottom: 0; } .entry-content .is-style-featured-column.outside .wp-block-column:before { z-index: -1; } @media (min-width:600px) { .is-style-featured-column.outside .wp-block-column:before { top: 11vw; } } @media (min-width:782px) { .is-style-featured-column.outside .wp-block-column:before { top: 3rem; } } @media (min-width:1100px) { .is-style-featured-column.outside .wp-block-column:before { top: 5rem; } } .is-style-featured-column.has-accent-color-background-color.outside .wp-block-column:before { background-color: var(--color-accent) !important; } .is-style-featured-column.has-accent-color-light-background-color.outside .wp-block-column:before { background-color: var(--color-accent-light) !important; } .is-style-featured-column.has-secondary-color-background-color.outside .wp-block-column:before { background-color: var(--color-second) !important; } .is-style-featured-column.has-secondary-color-light-background-color.outside .wp-block-column:before { background-color: var(--color-second-light) !important; } .is-style-featured-column.has-color-light-background-color.outside .wp-block-column:before { background-color: var(--color-light) !important; } .is-style-featured-column.has-color-black-background-color.outside .wp-block-column:before { background-color: black !important; } .is-style-featured-column.has-color-white-background-color.outside .wp-block-column:before { background-color: white !important; } /* Zusaetze fuer Backend */ .wp-block[data-type="core/columns"].is-style-featured-column.outside .wp-block-column:before { z-index: inherit; } .is-style-featured-column .wp-block[data-align="left"], .is-style-featured-column .wp-block[data-align="right"], .is-style-featured-column .wp-block[data-align="center"] { width: 50%; height: inherit; margin: 1em auto 1em auto; } .is-style-featured-column:not(.has-background) .wp-block[data-align="left"]:first-child, .is-style-featured-column:not(.has-background) .wp-block[data-align="right"]:first-child, .is-style-featured-column:not(.has-background) .wp-block[data-align="center"]:first-child, .is-style-featured-column.has-background.outside .wp-block[data-align="left"]:first-child, .is-style-featured-column.has-background.outside .wp-block[data-align="right"]:first-child, .is-style-featured-column.has-background.outside .wp-block[data-align="center"]:first-child { margin-top: 0 !important; } .is-style-featured-column .wp-block[data-align="left"] { margin-left: 0 !important; } .is-style-featured-column .wp-block[data-align="right"] { margin-right: 0 !important; } .is-style-featured-column.has-background .wp-block[data-align="left"] { margin-left: 1em !important; } .is-style-featured-column.has-background .wp-block[data-align="right"] { margin-right: 1em !important; } /* Button wenn vorhanden */ .is-style-featured-column .wp-block[data-align="left"] > *, .is-style-featured-column .wp-block[data-align="right"] > *, .is-style-featured-column .wp-block[data-align="center"] > * { float: none; margin: 0; } .is-style-featured-column p + .wp-block[data-align="left"], .is-style-featured-column p + .wp-block[data-align="right"], .is-style-featured-column p + .wp-block[data-align="center"] { width: inherit; height: 1.5em; } /* --- Style: Bildgalerie --- */ .is-style-columns-gallery + .is-style-columns-gallery { margin-top: 16px; } .is-style-columns-gallery figure.wp-block-image { width: 100%; min-width: 100%; margin-top: 0; margin-bottom: 0; } @media (min-width:782px) { .is-style-columns-gallery .wp-block-column:not(:first-child) { margin-left: 16px; } .is-style-columns-gallery .wp-block-column:not(:first-child) { margin-left: 16px; } } /* --- Style: mit Sidebar --- */ /* --- WICHTIG: fuer die Sidebar-Spalte muss die CSS-Class "sidebar" eingefuegt werden --- */ .is-style-columns-sidebar .wp-block-column:not(.sidebar) { flex-grow: 2 !important; } @media (max-width:781px) { .is-style-columns-sidebar .wp-block-column { order: 1 !important; } .is-style-columns-sidebar .wp-block-column.sidebar { order: 2 !important; } .is-style-columns-sidebar .wp-block-column.sidebar, .is-style-columns-sidebar .wp-block-column:not(.sidebar) { flex-basis: 100% !important; margin-left: 0 !important; } .is-style-columns-sidebar .wp-block-column > .wp-block-group { margin-top: 2em; } } .is-style-columns-sidebar .wp-block-column > .wp-block-group { padding: 0; } .is-style-columns-sidebar .wp-block-column > .wp-block-group > * { width: 100%; } @media (min-width:782px) { .is-style-columns-sidebar .wp-block-column > .wp-block-group { position: sticky; top: 8rem; } } /* ---------------------------------- BLOCK - Column (Einzelspalte) ---------------------------------- */ /* --- Style: Unsichtbare Spalte --- */ .has-background .wp-block-column.is-style-invisible, .has-background:not(.outside) .wp-block-column.is-style-invisible { background-color: transparent !important; } .is-root-container .wp-block-column.is-style-invisible { border: 1px dashed #cccccc80 !important; position: relative; } .is-root-container .wp-block-column.is-style-invisible:after { content: 'Unsichtbar'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 2.8em 10px 10px 10px; color: rgba(0,0,0,0.2); text-align: center; font-size: 0.9em; } @media (max-width:781px) { .wp-block-column.is-style-invisible { display: none !important; } } @media (min-width:599px) and (max-width:781px) { .is-style-featured-column .wp-block-column:nth-child(1).is-style-invisible, .is-style-featured-column .wp-block-column:nth-child(1).is-style-invisible + .wp-block-column, .is-style-featured-column .wp-block-column:nth-child(1).is-style-invisible + .wp-block-column + .wp-block-column { margin-top: 0; } .is-style-featured-column .wp-block-column:nth-child(1).is-style-invisible + .wp-block-column { margin-left: 0; margin-right: 2em; } } /* ---------------------------------- BLOCK - Media Text ---------------------------------- */ /* --- Allgemein --- */ .wp-block-media-text { width: 100%; overflow: hidden !important; } .entry-content .wp-block-media-text + .wp-block-media-text { margin-top: 0; } .wp-block-media-text { min-height: 50vw; } .wp-block-media-text.alignwide { min-height: 50vw; } .wp-block-media-text.alignfull { min-height: 50vw; } @media (orientation:portrait) and (max-width:1209px) { .wp-block-media-text { min-height: 80vw; } .wp-block-media-text.alignwide { min-height: 80vw; } .wp-block-media-text.alignfull { min-height: 80vw; } } @media (min-width:1210px) { .wp-block-media-text { min-height: 550px; } .wp-block-media-text.alignwide { min-height: 50vw; } .wp-block-media-text.alignfull { min-height: 40vw; } } @media (min-width:1760px) { .wp-block-media-text.alignwide { min-height: 800px; } } .wp-block-media-text .wp-block-media-text__content { padding: 0 8% 0 8%; } .wp-block-media-text .wp-block-media-text__media { height: 100% !important; line-height: 0; } .wp-block-media-text .wp-block-media-text__media img, .block-editor__container .wp-block-media-text .wp-block-media-text__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; } @media (max-width:599px) { .wp-block-media-text .wp-block-media-text__content { padding: 1.5em 5% 0 5% !important; } .wp-block-media-text.has-background .wp-block-media-text__content { padding: 1.5em 5% 2em 5% !important; } .has-media-on-the-right .wp-block-media-text__media { -ms-grid-row: 1 !important; grid-row: 1 !important; } .has-media-on-the-right .wp-block-media-text__content { -ms-grid-row: 2 !important; grid-row: 2 !important; } } @media (min-width:600px) { .has-media-on-the-right.is-style-default:not(.alignfull) .wp-block-media-text__content { padding-left: 0 !important; } .has-media-on-the-left.is-style-default:not(.alignfull) .wp-block-media-text__content { padding-right: 0 !important; } } /* --- Style: Grosses Bild --- */ .is-style-over-big { width: 100%; position: relative; } @media (orientation:portrait) and (max-width:781px) { .is-style-over-big { min-height: 100vw; } .is-style-over-big.alignwide { min-height: 100vw; } .is-style-over-big.alignfull { min-height: 100vw; } } @media (min-width:600px) { .is-style-over-big { -ms-grid-columns: 75% 1fr !important; grid-template-columns: 75% 1fr !important; } .is-style-over-big.has-media-on-the-right { -ms-grid-columns: 1fr 75% !important; grid-template-columns: 1fr 75% !important; } } @media (min-width:782px) { .is-style-over-big { -ms-grid-columns: 60% 1fr !important; grid-template-columns: 60% 1fr !important; } .is-style-over-big.has-media-on-the-right { -ms-grid-columns: 1fr 60% !important; grid-template-columns: 1fr 60% !important; } } @media (min-width:1210px) { .is-style-over-big { min-height: 660px; } } @media (min-width:1760px) { .is-style-over-big.alignwide { min-height: 960px; } } /* text */ @media (min-width:600px) { .is-style-over-big .wp-block-media-text__content { position: absolute; background-color: var(--color-light); } .is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { left: -200%; } .is-style-over-big.has-media-on-the-right .wp-block-media-text__content { right: 25%; } .is-style-over-big.has-background { background-color: transparent !important; } .is-style-over-big.has-accent-color-background-color .wp-block-media-text__content { background-color: var(--color-accent); } .is-style-over-big.has-accent-color-light-background-color .wp-block-media-text__content { background-color: var(--color-accent-light); } .is-style-over-big.has-secondary-color-background-color .wp-block-media-text__content { background-color: var(--color-second); } .is-style-over-big.has-secondary-color-light-background-color .wp-block-media-text__content { background-color: var(--color-second-light); } .is-style-over-big.has-color-light-background-color .wp-block-media-text__content { background-color: var(--color-light); } .is-style-over-big.has-color-black-background-color .wp-block-media-text__content { background-color: black; } .is-style-over-big.has-color-white-background-color .wp-block-media-text__content { background-color: white; } } @media (min-width:782px) { .is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { left: -50%; } .is-style-over-big.has-media-on-the-right .wp-block-media-text__content { right: 40%; } } @media (min-width:1210px) { .is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { left: -25%; } .is-style-over-big.has-media-on-the-right .wp-block-media-text__content { right: 50%; } } @media (min-width:1210px) { .alignwide.is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { } .alignwide.is-style-over-big.has-media-on-the-right .wp-block-media-text__content { } .alignfull.is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { } .alignfull.is-style-over-big.has-media-on-the-right .wp-block-media-text__content { } } @media (min-width:1760px) { .alignwide.is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { } .alignwide.is-style-over-big.has-media-on-the-right .wp-block-media-text__content { } .alignfull.is-style-over-big:not(.has-media-on-the-right) .wp-block-media-text__content { right: calc(50vw - 800px); } .alignfull.is-style-over-big.has-media-on-the-right .wp-block-media-text__content { left: calc(50vw - 800px); } } /* text padding */ .is-style-over-big .wp-block-media-text__content { padding: 1.5em 5% 2em 5% !important; } @media (min-width:600px) { .is-style-over-big .wp-block-media-text__content { padding: 4em 5vw !important; } } @media (min-width:1760px) { .is-style-over-big .wp-block-media-text__content { padding: 4em !important; } } /* ---------------------------------- BLOCK - Separator ---------------------------------- */ .entry-content > .wp-block-separator, .is-root-container > .wp-block-separator.wp-block { max-width: 200px; } .wp-block-separator:not(.is-style-dots) { /*border-color: var(--color-accent); color: var(--color-accent);*/ border: none !important; border-bottom: 2px solid !important; } .wp-block-separator { margin-top: var(--spacer-small); margin-bottom: var(--spacer-small); color: var(--color-general-txt); } /*.wp-block-separator + h1, .wp-block-separator + h2, .wp-block-separator + h3, .wp-block-separator + h4, .wp-block-separator + h5, .wp-block-separator + h6 { margin-top: 0; }*/ .entry-content > .wp-block-separator { margin-top: var(--spacer-big) !important; margin-bottom: 0 !important; } .wp-block-separator.is-style-wide { max-width: 1100px !important; border: none; } hr.wp-block-separator.is-style-dots { border: none !important; line-height: 1px; } hr.wp-block-separator.is-style-dots:before { content: "\2022 \2022 \2022"; font-family: inherit; font-size: 1.5em; letter-spacing: 0.5em; padding-left: 0.5em; } .wp-block-separator + .wp-block-group.has-background, .wp-block-group.has-background + .wp-block-separator { margin-top: 0 !important; } /* ---------------------------------- BLOCK - Spacer ---------------------------------- */ .wp-block-spacer { max-width: 1200px; /* -------------------------------------------------------------------- */ border: 0px dashed #ddd; margin-top: 0; margin-bottom: 0; } .entry-content * + .wp-block-spacer, .entry-content .wp-block-spacer + * { margin-top: 0; } .entry-content .is-style-spacer-big { height: var(--spacer-big) !important; } .entry-content .is-style-spacer-small { height: var(--spacer-small) !important; } .entry-content .wp-block-separator + .wp-block-spacer, .entry-content .wp-block-spacer + .wp-block-separator { margin-top: 0 !important; } /* ---------------------------------- BLOCK - Buttons ---------------------------------- */ /* --- Style: Allgemein --- */ .wp-block-button__link:link, .wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited { text-decoration: none !important; color: var(--color-general-txt); } .is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) { color: var(--color-general-txt); } .entry-content p + .wp-block-buttons { margin-top: 1em; } .entry-content .wp-block-buttons + .wp-block-buttons { margin-top: 0.5rem !important; } .wp-block-buttons .wp-block-button { margin-top: 0; } .wp-block-buttons .wp-block-button__link { font-size: 0.85em; padding: 0.3em 1em; } .is-style-outline .wp-block-button__link { border: 1px solid; } .wp-block-buttons .wp-block-button__link:hover { background-color: var(--color-accent) !important; color: white !important; } .is-style-outline .wp-block-button__link:hover { border: 1px solid var(--color-accent); } .wp-block-buttons.alignleft { text-align: left; } .wp-block-buttons.alignright { text-align: right; } .wp-block-buttons.aligncenter { text-align: center; } @media (min-width:782px) { .wp-block-buttons .wp-block-button__link { font-size: 1em; } } /* --- Button in Featured Column --- */ .is-style-featured-column .wp-block-column .wp-block-button__link { font-size: 0.8em; padding: 0.1em 1em 0.2em 1em; } .is-style-featured-column .wp-block-column:hover .wp-block-button__link { background-color: var(--color-accent); } .is-style-featured-column.has-accent-color-background-color .wp-block-column:hover .wp-block-button__link { background-color: white !important; color: var(--color-accent) !important; } /* Link fuer Gesamtflaeche */ .is-style-featured-column .wp-block-column { position: relative; } .is-style-featured-column .wp-block-column .wp-block-buttons a:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; } .wp-block-buttons .block-list-appender { position: relative; } /* --- Style: Unsichtbarer Link --- */ #site-content .is-style-invisible-link { display: block; margin-top: -2em !important;; margin-bottom: 0 !important; } #site-content .is-style-invisible-link .wp-block-button__link { font-size: 0; padding: 0; line-height: 0; } .is-root-container .is-style-invisible-link .wp-block-button__link { font-size: 0.8em; padding: 2px 10px 3px 10px; line-height: 1em; -moz-border-radius: 2px !important; -webkit-border-radius: 2px !important; border-radius: 2px !important; opacity: 0.5; } .is-root-container .is-style-invisible-link .wp-block-button__link:before { content: 'UNSICHTBAR! > '; } /* ------------------------------------------------------------------------------------------------------ WIDGETS ----------------------------------------------------------------------------------------------------- BLOCK WIDGETS - Latest Posts ---------------------------------- */ ul.wp-block-latest-posts { padding: 0 !important; } ul.wp-block-latest-posts + ul.wp-block-latest-posts { margin-top: var(--spacer-small); } .entry-content ul.wp-block-latest-posts.is-grid:not(.is-style-with-bg):not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5) li + li { margin-top: var(--spacer-text); } ul.wp-block-latest-posts li a:link, ul.wp-block-latest-posts li a:active, ul.wp-block-latest-posts li a:visited { font-size: 1.1em; line-height: 1.2em !important; text-decoration: none; } ul.wp-block-latest-posts li a:hover { color: var(--color-accent); } ul.wp-block-latest-posts li a { color: var(--color-accent); } @media (max-width:599px) { .wp-block-latest-posts li, .wp-block-latest-posts.columns-2 li, .wp-block-latest-posts.columns-3 li, .wp-block-latest-posts.columns-4 li, .wp-block-latest-posts.columns-5 li { width: 100%; } .wp-block-latest-posts.is-grid li { margin-right: 0; } } @media (min-width:600px) and (max-width:781px) { .wp-block-latest-posts.is-grid li { margin-right: 30px; } body.is-edge .wp-block-latest-posts.is-grid li { margin-right: 29px; } .wp-block-latest-posts.columns-2 li, .wp-block-latest-posts.columns-3 li, .wp-block-latest-posts.columns-4 li, .wp-block-latest-posts.columns-5 li { width: calc(50% - 15px); } .wp-block-latest-posts.columns-2 li:nth-child(2n + 2), .wp-block-latest-posts.columns-3 li:nth-child(2n + 2), .wp-block-latest-posts.columns-4 li:nth-child(2n + 2), .wp-block-latest-posts.columns-5 li:nth-child(2n + 2) { margin-right: 0; } .wp-block-latest-posts.columns-3 li:nth-child(3n) { margin-right: 30px; } } @media (min-width:782px) { .wp-block-latest-posts.is-grid li { margin-right: 30px; } body.is-edge .wp-block-latest-posts.is-grid li { margin-right: 29px; } .wp-block-latest-posts.columns-2 li { width: calc(50% - 15px); } .wp-block-latest-posts.columns-2 li:nth-child(2n + 2) { margin-right: 0; } .wp-block-latest-posts.columns-3 li { width: calc(33.33333% - 20px); } .wp-block-latest-posts.columns-3 li:nth-child(3n + 3) { margin-right: 0; } .wp-block-latest-posts.columns-4 li { width: calc(25% - 22.5px); } .wp-block-latest-posts.columns-4 li:nth-child(4n + 4) { margin-right: 0; } .wp-block-latest-posts.columns-5 li { width: calc(20% - 24px); } .wp-block-latest-posts.columns-5 li:nth-child(5n + 5) { margin-right: 0; } } ul.wp-block-latest-posts .wp-block-latest-posts__post-excerpt { /*overflow: hidden;*/ font-size: 0.9em; line-height: 1.4em; /*max-height: calc(3 * 1.4em);*/ position: relative; } .wp-block-latest-posts.is-grid:not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5) li { margin-right: 0; } .wp-block-latest-posts.is-grid:not(.columns-2):not(.columns-3):not(.columns-4):not(.columns-5) li .wp-block-latest-posts__post-excerpt { max-height: calc(4 * 1.4em); } /* --- fuegt Link fuer ganzes li-Element hinzu --- */ /* https://generatepress.com/forums/topic/latest-posts-content-block-clickable-featured-images/ */ ul.wp-block-latest-posts li { position: relative !important; } ul.wp-block-latest-posts li a:link::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- Style: Standard --- */ ul.wp-block-latest-posts.is-style-default .wp-block-latest-posts__featured-image { margin-bottom: 0.5em; width: 100%; } ul.wp-block-latest-posts.is-style-default li a:after { background-color: var(--color-accent); opacity: 0; } ul.wp-block-latest-posts.is-style-default li:hover a:after { background-color: var(--color-second); opacity: 0.05; } /* --- Style: mit Hintergrund --- */ ul.is-style-with-bg { padding: 0; } .is-style-with-bg .wp-block-latest-posts__featured-image { float: left; line-height: 0 !important; margin-right: 1em; width: 50%; height: 0; padding-bottom: 32.5%; /* --- verhaeltnis 100 zu 65 --- */ position: relative; line-height: 0; } @media (min-width:782px) { .is-style-with-bg.wp-block-latest-posts.columns-3 .wp-block-latest-posts__featured-image, .is-style-with-bg.wp-block-latest-posts.columns-4 .wp-block-latest-posts__featured-image, .is-style-with-bg.wp-block-latest-posts.columns-5 .wp-block-latest-posts__featured-image { float: none; width: 100%; padding-bottom: 65%; /* --- verhaeltnis 100 zu 65 --- */ } } .is-style-with-bg img.size-thumbnail, .is-style-with-bg img.size-medium, .is-style-with-bg img.size-large, .is-style-with-bg img { width: 100% !important; height: 100% !important; position: absolute !important; left: 0 !important; object-fit: cover !important; } .is-style-with-bg li:after { content: ""; display: table !important; clear: both !important; } .is-style-with-bg li { margin-bottom: 1em !important; background: var(--color-light); } /*.is-style-with-bg li:last-child { margin-bottom: 0 !important; }*/ .is-style-with-bg li:hover { background: var(--color-accent); } .is-style-with-bg li:hover a, .is-style-with-bg li:hover .wp-block-latest-posts__post-author, .is-style-with-bg li:hover .wp-block-latest-posts__post-date { color: white !important; } .is-style-with-bg li > *:last-child { margin-bottom: 1.5em; } .is-style-with-bg li > *:last-child::after { clear: both; content: ""; } .is-style-with-bg li > * { display: block; } .is-style-with-bg li a:link { padding: 1em 1em 0.2em 1em; } .is-style-with-bg .wp-block-latest-posts__post-author, .is-style-with-bg .wp-block-latest-posts__post-date { font-size: 0.8em; line-height: 1.4em; padding: 0 1rem; color: var(--color-general-txt); opacity: 0.6; } .is-style-with-bg .wp-block-latest-posts__post-excerpt { margin: 0.5em 1em 0 1em; } /* --- fuegt Link fuer ganzes li-Element hinzu --- */ /* https://generatepress.com/forums/topic/latest-posts-content-block-clickable-featured-images/ */ .is-style-with-bg li a::after { border-left: 5px solid transparent; z-index: 1; } .is-style-with-bg li:hover a::after { border-left: 5px solid var(--color-accent); } @media (min-width:782px) { .is-style-with-bg.wp-block-latest-posts.columns-3 li a:after, .is-style-with-bg.wp-block-latest-posts.columns-4 li a:after, .is-style-with-bg.wp-block-latest-posts.columns-5 li a:after { border-left: 0px solid transparent; border-top: 5px solid transparent; } .is-style-with-bg.wp-block-latest-posts.columns-3 li:hover a:after, .is-style-with-bg.wp-block-latest-posts.columns-4 li:hover a:after, .is-style-with-bg.wp-block-latest-posts.columns-5 li:hover a:after { border-left: 0px solid transparent; border-top: 5px solid var(--color-accent); } } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Latest Comments ---------------------------------- */ .entry-content ol.wp-block-latest-comments { margin-top: var(--spacer-big) !important; } ol.wp-block-latest-comments + ol.wp-block-latest-comments { margin-top: var(--spacer-small) !important; } ol.wp-block-latest-comments { padding: 0 !important; } .wp-block-latest-comments__comment { font-size: inherit; line-height: inherit; list-style: none; margin-bottom: 0; } ol.wp-block-latest-comments li { padding: 0.5em 0.5em 0.7em 0.5em; margin-bottom: 1em !important; background: var(--color-light); } ol.wp-block-latest-comments li:last-child { margin-bottom: 0 !important; } ol.wp-block-latest-comments li a:link, ol.wp-block-latest-comments li a:active, ol.wp-block-latest-comments li a:visited { font-size: 1.1em; line-height: 1.2em !important; text-decoration: none; } ol.wp-block-latest-comments li a:hover { color: var(--color-accent); } ol.wp-block-latest-comments li a { color: var(--color-accent); } ol.wp-block-latest-comments .wp-block-latest-comments__comment-date { font-size: 0.8em; opacity: 0.5; line-height: 1em; margin-bottom: 0.7em; } ol.wp-block-latest-comments .wp-block-latest-posts__post-excerpt { overflow: hidden; font-size: 0.9em; line-height: 1.4em; max-height: calc(2 * 1.4em); position: relative; } .wp-block-latest-comments__comment-excerpt p { font-size: 0.9em; line-height: 1.4em; margin: 0; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Schlagwort-Wolke ---------------------------------- */ p.wp-block-tag-cloud { width: calc(90% - 60px); max-width: calc(1100px - 2em); width: calc(90% - 60px); max-width: calc(1100px - 2em); background-color: var(--color-light); } p.wp-block-tag-cloud { padding: 20px 30px 23px 30px; padding: 1em 1.1em 1.1em 1.1em; } .wp-block-tag-cloud a { font-size: 0.9em !important; } .wp-block-tag-cloud a:link { text-decoration: none; } .wp-block-tag-cloud a + a { border-left: 1px solid var(--color-general-txt); padding-left: 0.35em; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Suche ---------------------------------- */ .wp-block-search { position: relative; } .entry-content .wp-block-search + .wp-block-search { margin-top: var(--spacer-small); } .wp-block-search .wp-block-search__label { font-weight: var(--font-general-bold); } .wp-block-search .wp-block-search__input { width: 100% !important; max-width: 100% !important; border: 1px solid #ddd !important; background-color: transparent; } .wp-block-search .wp-block-search__button { font-size: 0 !important; background: var(--color-general-txt); -webkit-mask-image: url(../img/icon-search.svg); -webkit-mask-size: auto 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(../img/icon-search.svg); mask-size: auto 100%; mask-repeat: no-repeat; mask-position: center; position: absolute; right: 0; bottom: 0; border: 0px solid #ddd; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; cursor: pointer; padding: 0; width: 32px; height: 32px; } @media (min-width: 782px) { .wp-block-search:hover .wp-block-search__input { border-color: var(--color-accent) !important; } .wp-block-search:hover .wp-block-search__button { background: var(--color-accent); } } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Kalender ---------------------------------- */ .entry-content .wp-block-calendar + .wp-block-calendar { margin-top: var(--spacer-big); } .wp-block-calendar table { background-color: var(--color-general-bg); color: var(--color-general-txt) !important; font-family: inherit; } .wp-block-calendar td, .wp-block-calendar th { color: var(--color-general-txt) !important; position: relative; } .wp-block-calendar td a:link { font-weight: var(--font-general-bold); text-decoration: none; background-color: var(--color-light); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-top: 0.23em; } .wp-block-calendar td a:hover { background-color: var(--color-accent); color: white; } .wp-block-calendar table th { font-weight: var(--font-general-bold); background-color: var(--color-light); } .wp-block-calendar tbody td, .wp-block-calendar th { border: 1px solid #99999950; } .wp-block-calendar table caption, .wp-block-calendar table tbody { color: var(--color-general-txt) !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Social Media Buttons ---------------------------------- */ .wp-block-social-links a:link, .wp-block-social-links a:active, .wp-block-social-links a:visited, .wp-block-social-links a:hover { color: white; } ul.wp-block-social-links { padding: 0 !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Archive als Dropdown ---------------------------------- */ .entry-content .wp-block-archives-dropdown + .wp-block-archives-dropdown { margin-top: var(--spacer-small) !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - Archive, Kategorien, Kommentare, Beitraege, RSS, Social Links ---------------------------------- */ .entry-content ul.wp-block-archives, .entry-content ul.wp-block-categories, .entry-content ul.wp-block-latest-posts, .entry-content ul.wp-block-rss, .entry-content ul.wp-block-social-links { margin-top: var(--spacer-text); } .entry-content .wp-block-column ul.wp-block-archives, .entry-content .wp-block-column ul.wp-block-categories, .entry-content .wp-block-column ul.wp-block-latest-posts, .entry-content .wp-block-column ul.wp-block-rss, .entry-content .wp-block-column ul.wp-block-social-links { margin-top: 0; } .entry-content > ul.wp-block-archives, .entry-content > ul.wp-block-categories, .entry-content > ul.wp-block-latest-posts, .entry-content > ul.wp-block-rss, .entry-content > ul.wp-block-social-links { margin-top: var(--spacer-big); } ul.wp-block-archives + ul.wp-block-archives, ul.wp-block-categories + ul.wp-block-categories, ul.wp-block-latest-posts + ul.wp-block-latest-posts, ul.wp-block-rss + ul.wp-block-rss, ul.wp-block-social-links + ul.wp-block-social-links { margin-top: var(--spacer-text) !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK WIDGETS - RSS ---------------------------------- */ ul.wp-block-rss + ul.wp-block-rss { margin-top: var(--spacer-text) !important; } ul.wp-block-rss { padding: 0; padding-left: 0 !important; list-style-type: none; } .wp-block-rss li + li { margin-top: var(--spacer-text); } .wp-block-rss li { background-color: var(--color-light); padding: calc(50vw + 1em) 1em 1.25em 1em; position: relative; } .wp-block-rss li:hover { background-color: var(--color-accent); color: white; } .wp-block-rss a:link, .wp-block-rss a:visited, .wp-block-rss a:active { text-decoration: none; color: var(--color-general-txt); } .wp-block-rss li .wp-block-rss__item-title a:link, .wp-block-rss li .wp-block-rss__item-title a:visited, .wp-block-rss li .wp-block-rss__item-title a:active { font-size: 1.2em; line-height: 1.2em; color: var(--color-accent) !important; margin-bottom: 0.2em !important; } .wp-block-rss li:hover .wp-block-rss__item-title a:link, .wp-block-rss li:hover .wp-block-rss__item-title a:visited, .wp-block-rss li:hover .wp-block-rss__item-title a:active { color: white !important; } .wp-block-rss .wp-block-rss__item-publish-date { font-size: 0.8em; opacity: 0.5; line-height: 1em; margin-bottom: 0.7em; } .wp-block-rss .wp-block-rss__item-excerpt { font-size: 0.9em; line-height: 1.6em; } @media (min-width:600px) { .wp-block-rss li { padding: 1em 1.1em 1.1em 1.1em; } } /* link fuer ganzes li-Element */ .wp-block-rss li .wp-block-rss__item-title a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: white !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK Shortcode - wenn Widgets eingefuegt werden ---------------------------------- */ .entry-content .widget { margin-top: var(--spacer-small); } .entry-content .widget:first-child { margin-top: 0; } /* ------------------------------------------------------------------------------------------------------ BLOCK Kombinationen ---------------------------------- */ /* --- Cover-Block in Spaltenblock (Featured) --- */ .wp-block-columns .wp-block-cover { padding: var(--spacer-small) !important; min-height: 80vw !important; height: 80vw !important; } @media (min-width:600px) { .wp-block-columns .wp-block-cover { min-height: 50vw !important; height: 50vw !important; } } @media (min-width:782px) { .wp-block-columns .wp-block-cover { min-height: 40vw !important; height: 40vw !important; } } @media (min-width:1210px) { .wp-block-columns .wp-block-cover { min-height: 450px !important; height: 450px !important; } .wp-block-columns.alignfull .wp-block-cover { min-height: 25vw !important; height: 25vw !important; } } /* --- Transparente Flaeche hinter Group-Block in Cover-Block --- */ .wp-block-columns .wp-block-cover.cover-with-group { padding: var(--spacer-small) !important; } .wp-block-columns .wp-block-cover.cover-with-group:before { content: none !important; } @media (min-width:600px) and (max-width:781px) { .wp-block-columns .wp-block-cover.cover-with-group { padding: var(--spacer-text) !important; } } .wp-block-columns .cover-with-group > .wp-block-cover__inner-container { width: 100% !important; } .cover-with-group .wp-block-group { position: relative; } .cover-with-group .wp-block-group.has-background { background-color: transparent !important; } .cover-with-group .wp-block-group::before { content: ""; width: 100%; height: 100%; opacity: 0.8; position: absolute; background-color: #333; z-index: -1; } .cover-with-group .wp-block-group.has-background::before { opacity: 0.9; } .cover-with-group .has-accent-color-background-color.wp-block-group::before { background-color: var(--color-accent); } .cover-with-group .has-accent-color-light-background-color.wp-block-group::before { background-color: var(--color-accent-light); } .cover-with-group .has-secondary-color-background-color.wp-block-group::before { background-color: var(--color-second); } .cover-with-group .has-secondary-color-light-background-color.wp-block-group::before { background-color: var(--color-second-light); } .cover-with-group .has-color-light-background-color.wp-block-group::before { background-color: var(--color-light); } .cover-with-group .has-color-black-background-color.wp-block-group::before { background-color: black; } .cover-with-group .has-color-white-background-color.wp-block-group::before { background-color: white; } .cover-with-group .wp-block-group .wp-block-group__inner-container { padding: 1rem !important; } /* --- Transparente Flaeche, z.B. fuer Media und Text --- */ .transparent-bg { position: relative; background: none !important; } .transparent-bg:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #333; opacity: 0.8; /*z-index: -1;*/ } .entry-content .transparent-bg:before { z-index: -1; } .transparent-bg.has-accent-color-background-color:before { background-color: var(--color-accent); } .transparent-bg.has-accent-color-light-background-color:before { background-color: var(--color-accent-light); } .transparent-bg.has-secondary-color-background-color:before { background-color: var(--color-second); } .transparent-bg.has-secondary-color-light-background-color:before { background-color: var(--color-second-light); } .transparent-bg.has-color-light-background-color:before { background-color: var(--color-light); } .transparent-bg.has-color-black-background-color:before { background-color: black; opacity: 0.3; } .transparent-bg.has-color-white-background-color:before { background-color: white; } .wp-block-column.transparent-bg { padding: 20px 0 23px 0; } .wp-block-column.transparent-bg > * { padding-right: 5vw; padding-left: 5vw; } @media (min-width:782px) { .wp-block-column.transparent-bg { padding: 2rem 0; } .wp-block-column.transparent-bg > * { padding-right: 2rem; padding-left: 2rem; } } /* --- Transparente Flaeche, z.B. fuer Media und Text --- */ .has-border { border: 10px solid black; } .has-border.border-accent { border-color: var(--color-accent); } .has-border.border-second { border-color: var(--color-second); } .has-border.border-second-light { border-color: var(--color-second-light); } .has-border.border-color-light { border-color: var(--color-light); } .has-border.border-black { border-color: black; } .has-border.border-white { border-color: white; } .wp-block-column.has-border { padding: 20px 0 23px 0; } .wp-block-column.has-border > * { padding-right: 5vw; padding-left: 5vw; } @media (min-width:782px) { .wp-block-column.has-border { padding: 2rem 0; } .wp-block-column.has-border > * { padding-right: 2rem; padding-left: 2rem; } } @media (min-width:600px) and (max-width:1000px) { .wp-block-column.has-border { flex-basis: calc(50% - 16px - 20px) !important; } } /* --- Spalten fuer Kontaktseite mit Google-Maps --- */ .columns-map { width: 100% !important; max-width: 100% !important; } .columns-map h1, .columns-map h2, .columns-map h3, .columns-map h4, .columns-map h5, .columns-map h6, .columns-map p { width: 90% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; } /* ------------------------------------------------------------------------------------------------------ BLOCK Select (Dropdown) ---------------------------------- */ select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; background-color: var(--color-light); background-image: url(../img/arrow-down.svg); background-position: calc(100% - 10px) center; background-size: 15px auto; background-repeat: no-repeat; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: 4px 4px 5px 0px rgba(0,0,0,.2); color: var(--color-general-txt); cursor: pointer; font-size: 1em !important; font-weight: var(--font-general-regular) !important; line-height: 1.7em !important; height: 1.7em !important; outline: none; padding-left: 10px; width: 100%; max-width: 550px; display: block; } select option { color: var(--color-general-txt); font-family: inherit; font-size: 1.0em !important; font-weight: inherit !important; line-height: 1.7em !important; } select::-ms-expand { display: none; } select:focus::-ms-value { background-color: transparent; } /* ------------------------------------------------------------------------------------------------------ BLOCK Verschiedenes ---------------------------------- */ .nopadding { padding: 0 !important; } .nopadding-right { padding-right: 0 !important; } .nopadding-left { padding-left: 0 !important; } @media (min-width:782px) { .hover-scale .wp-block-column { -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .hover-scale .wp-block-column:hover { transform: scale(1.05); /* Equal to scaleX(0.05) scaleY(0.05) */ } } .custom-clear { margin-top: var(--spacer-text) !important; } .custom-clear + * { margin-top: 0 !important; } .custom-clear:after { content: ""; display: table !important; clear: both !important; } .editor-styles-wrapper .wp-block-cover:not(.alignleft):not(.alignright) > .wp-block-cover__inner-container, .editor-styles-wrapper .wp-block-cover-image:not(.alignleft):not(.alignright) > .wp-block-cover__inner-container { max-width: 1100px; margin-right: auto; margin-left: auto; width: 90%; } /* -------------------------------------------------------------------- Block vom Plugin Contact Form 7 -------------------------------------------------------------------- */ .wpcf7, /* wenn als Shortcode eingefuegt */ .wp-block-contact-form-7-contact-form-selector { /* wenn als Block eingefuegt */ width: 100%; max-width: 100%; } .entry-content > .wpcf7, .entry-content > .wp-block-contact-form-7-contact-form-selector { width: 90%; max-width: 1100px; } .is-style-slim-width { max-width: 750px !important; } .wpcf7 input, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="date"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="email"], .wpcf7 input[type="month"], .wpcf7 input[type="number"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="time"], .wpcf7 input[type="url"], .wpcf7 input[type="week"], .wpcf7 textarea, .wpcf7 select { width: 100%; margin-top: 0; } .wpcf7 textarea { height: 6.7em !important; } .wpcf7 input[type="file"] { width: auto !important; padding: 8px 7px 10px 7px !important; border: none !important; background-color: #f5f5f5; } .wpcf7 input[type="submit"] { width: auto; border: none; border: 1px solid var(--color-accent); background: white; color: var(--color-accent); padding: 2px 20px 3px 20px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 150px; display: inline-block !important; text-decoration: none !important; text-shadow: none !important; cursor: pointer !important; -webkit-appearance: none !important; white-space: nowrap !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; -webkit-box-shadow: none !important; box-shadow: none !important; vertical-align: top; } .wpcf7 input[type="submit"]:hover { background: var(--color-accent) !important; color: white; } @media (max-width: 599px) { .entry-content .wpcf7 p + p { margin-top: 0.5em !important; } } @media (min-width: 600px) { .wp-block-column .wpcf7 p + p { margin-top: 0.5em !important; } .wpcf7 form p { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* or inline-flex */ -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; } .wpcf7 form p label { flex-basis: 30%; max-width: 202px; } .wpcf7 form p span { flex-grow: 1; } /* wenn das Formular in einer Spalte ist */ .wp-block-column .wpcf7 form p { display: block; } .wp-block-column .wpcf7 form p label { max-width: 100%; } }