/* Theme Name: Caspo 2024 Theme URI: https://caspo-ev.de Author: gobasil GmbH ~ Lars Zimmer Author URI: https://gobasil.com Description: Das offizielle Wordpress-Theme des Caspo e.V. License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Caspo, Verein Text Domain: caspo2024 Version: 250622-lz1 */ /*-------------------------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------------------------- 1.0 - RESET 2.0 - LAYOUT 2.1 - GENERAL STYLES 2.2 - BLOCKS 2.3 - TABLES 3.0 - HEADER 4.0 - FOOTER 5.0 - PAGES 5.1 - PAGE - HOME 5.2 - PAGE - SOZIALES KAUFHAUS 5.3 - PAGE - INTEGRATIONSBERATUNG 5.4 - PAGE - GEMEINSCHAFT 5.5 - PAGE - UNTERSTUETZEN 5.6 - PAGE - VEREIN 5.7 - PAGE - IMPRESSUM + DATENSCHUTZ 6.0 - POSTS (-X-) 7.0 - WIDGETS 8.0 - SHORTCODES 9.0 - PLUGINS 9.1 - PLUGIN - SMART SLIDER 9.3 - PLUGIN - PAGE SCROLL TO ID 9.3 - PLUGIN - CONTACT FORM 7 9.4 - PLUGIN - COOKIEBOT 9.5 - PLUGIN - KADENCE BLOCKS (TABS-BLOCK) ---------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 1.0 - RESET /*-----------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } figure { margin: 10% 0; } img { border: 0; -ms-interpolation-mode: bicubic;} a:hover, a:active, a:focus, button:focus, v:hover, v:active, v:focus, input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus { outline: none !important; -moz-outline-style: none !important; outline-style: none !important; } input {-webkit-border-radius:0; border-radius:0;} ::-webkit-input-placeholder {color: rgba(255, 255, 255, .66);} :-moz-placeholder {color: rgba(255, 255, 255, .66);} ::-moz-placeholder {color: rgba(255, 255, 255, .66);} :-ms-input-placeholder {color: rgba(255, 255, 255, .66);} *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix */ .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;} .clearfix:after{clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after {clear: both;}☺ /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .vc_gitem_row .vc_gitem-col { /* PAGEBUILDER > SPALTEN-ELEMENTE */ padding: 0 !important; /* VC-Abstaende aushebeln */ } button::-moz-focus-inner { /* 190625 lz: Gepunktete Outline in Firefox entfernen (https://bit.ly/2CpBDbi) */ border: 0; } /*-----------------------------------------------------------------------------------*/ /* 2.0 - LAYOUT /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 2.1 - GENERAL STYLES /*-----------------------------------------------------------------------------------*/ /* Raleway Regular 400 (Fliesstext P2, P3) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: normal; font-weight: 400; src: url('fonts/raleway-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway Regular 400 Italic (Fliesstext P3 kursiv) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: italic; font-weight: 400; src: url('fonts/raleway-v34-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway Medium 500 Medium (Fliesstext P1, P2, P3, Einleitungstext) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: normal; font-weight: 500; src: url('fonts/raleway-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway Medium 500 Medium Italic (Fliesstext P1, P2, P3 kursiv, Einleitungstexts) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: italic; font-weight: 500; src: url('fonts/raleway-v34-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway SemiBold 600 (H2, H3, H4, Fliesstext P1 strong, P2 strong, Testimonial, Menu-Item) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: normal; font-weight: 600; src: url('fonts/raleway-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway SemiBold 600 Italic (H2, H3, H4, Fliesstext P1 strong + P2 strong, Testimonial, Menu-Icon) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: italic; font-weight: 600; src: url('fonts/raleway-v34-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway ExtraBold 800 (H1) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: normal; font-weight: 800; src: url('fonts/raleway-v34-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Raleway ExtraBold 800 Italic (H1) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Raleway'; font-style: italic; font-weight: 800; src: url('fonts/raleway-v34-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Square Peg (Handwriting Testimonials) */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Square Peg'; font-style: normal; font-weight: 400; src: url('fonts/square-peg-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* CASPO Letters (Icons) */ @font-face { font-family: 'caspoletters'; font-weight: normal; font-style: normal; font-display: block; src: url('fonts/caspoletters.woff') format('woff'); } /* THEME-FARBEN */ :root { /* FARB-VARIABLEN GLOBAL */ --blassgrau: #F5F5F5; /* 240618 lz: = Blassgrau (Hintergrundflaechen) */ --hellgrau: #ebebeb; /* 240605 lz: = Hellgrau (Hintergrundflaechen) */ --grau: #aaaaaa; /* 240605 lz: = Grau (Footer) */ --mittelgrau: #D9D9D9; /* 240618 lz: = CASPO-Mittelgrau (Schmuckgrafiken) */ --blau: #2578B9; /* 240605 lz: = CASPO-Blau (Schmuckgrafiken) */ --dunkelblau: #030093; /* 240605 lz: = CASPO-Dunkelblau (Schmuckgrafiken) */ --gelb: #E5C556; /* 240605 lz: = CASPO-Gelb (Schmuckgrafiken) */ --gruen: #72B471; /* 240605 lz: = CASPO-Gruen (Schmuckgrafiken) */ --rot: #CF1B4D; /* 240605 lz: = CASPO-Rot (Schmuckgrafiken) */ --braun: #7F5026; /* 240605 lz: = CASPO-Braun (Schmuckgrafiken) */ } html { /* SEITENHINTERGRUND */ background-color: #F5F5F5; /* 240618 lz: Layoutbreite deckeln */ } body { /* SEITENINHALT */ background-color: #fff; /* 240618 lz: Layoutbreite deckeln */ box-shadow: 0px 0px 60px #ccc2; /* 240822 lz: Randschatten abschwaechen */ margin: 0 auto; /* 240605 lz: Im Browserfenster zentrieren */ color: #000; /* 240605 lz: Schwarz faerben */ font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 240605 lz: Schriftart definieren */ font-size: 18px; /* 240618 lz: Umsetzung Figma-Layout hm */ line-height: 1.4em; /* 240618 lz: Umsetzung Figma-Layout hm */ min-height: 100vh; /* 240605 lz: Umsetzung Figma-Layout hm */ max-width: 1920px; /* 240625 lz: Layoutbreite (Desktop) frueher deckeln */ animation: fadeIn 1s; /* 240714 lz: Preloader ersetzen durch weiche body-Einblendung */ } @keyframes fadeIn { /* SEITENINHALT (LADEANIMATION) */ 0% { opacity: 0; } /* 240714 lz: Preloader ersetzen durch weiche body-Einblendung */ 100% { opacity: 1; } /* 240714 lz: Preloader ersetzen durch weiche body-Einblendung */ } p { /* ABSAETZE GENERELL */ margin-bottom: 20px; /* 240605 lz: Absatz-Abstand definieren */ position: relative; /* 240605 lz: Schmuckgrafiken generell an zugeh. Absaetzen ausrichten */ } p:last-child { /* ABSAETZE (ABSCHLIESSENDER) */ margin-bottom: 0 !important; /* 250403 lz: Absatz-Abstand definieren */ } p.has-small-font-size { /* ABSAETZE (WP-TEXTGROESSE 'S' FORMATIERT) */ font-size: 16px !important; /* 240606 lz: Layout ab 200525 */ line-height: 1.3em !important; /* 240618 lz: Kompakter gestalten */ } #content { /* INHALTS-CONTAINER */ align-items: center; /* 240607 lz: Content hor. zentrieren */ background-color: #fff; /* 190915 lz: Absetzen vom blauen Footer */ display: flex; /* 240607 lz: Content zentrieren */ flex-flow: column wrap; /* 240607 lz: Content hor. zentrieren */ position: relative; /* 190915 lz: Wallpaper nicht ueberdecken */ z-index: 0; /* 190915 lz: Wallpaper nicht ueberdecken */ } .entry-content p:last-child { margin-bottom: 0; } .entry-content blockquote p:last-child { margin-bottom: 24px; } b, strong { font-weight: bold; } p strong { /* ABSAETZE (GEFETTET) */ font-weight: 600; /* 240617 lz: SemiBold statt Bold formattieren */ } em, i { font-style: italic; } s, strike, del { text-decoration: line-through; } :where(.is-layout-flex) { gap: 3em; /* 250407 lz: Std-Spaltensteg erhoeht */ } .zahl { /* ZAHLEN IM CASPO-DESIGN (FAKTEN) */ font-family: 'caspoletters'; /* 240620 lz: Icon-Font einbinden */ letter-spacing: -0.45em; /* 250407 lz: Layout-Feinschliff */ font-size: 5em !important; /* 240620 lz: Icon-Font einbinden */ margin: 0 0 10px -10% !important /* 250407 lz: Layout-Feinschliff */ } /* --- HEADLINES --- */ h1, h2, h3, h4 { font-weight: 600; /* 240606 lz: Schriftschnitt 'SemiBold' */ line-height: 1.2em; /* 240606 lz: Layout ab 200525 */ margin: 40px auto 20px; /* 250307 lz: Erste Headline auf Seite fuer SEO zu neuer H1 machen */ width: 100%; /* 240606 lz: Ueberschriften sollen stets volle Zeilenbereite einnehmen */ } h1, h2 { font-size: 46px !important; /* 250307 lz: Erste Headline auf Seite fuer SEO zu neuer H1 machen */ max-width: 700px; /* 250307 lz: Erste Headline auf Seite fuer SEO zu neuer H1 machen */ } h2.has-text-align-left { margin-left: 0; /* 240710 lz: Std-Zentrierung aufheben */ } h3, h4 { font-size: 28px !important; /* 240617 lz: Umsetzung Figma-Layout hm */ margin-left: 0; /* 250307 lz: Code reduziert */ } /* LINKS */ a, a:link, a:visited { /* LINKS GENERELL */ color: inherit; /* = body statt Standard-Linkfarben */ text-decoration: none; /* Standard-Unterstreichung entfernen */ } p > a, p > a:link, p > a:visited, /* LINKS IN ABSAETZEN */ span > a, span > a:link, span > a:visited, /* LINKS IN SPANS */ strong > a, strong > a:link, strong > a:visited { /* LINKS IN FETT FORMATIERTEM TEXT */ color: inherit; /* 190319 lz: Standardblau verhindern */ border-bottom: 1px solid rgba(0,0,0,0.25); /* 201107 lz: Dezenter gestalten */ line-height: 1.3; /* 190525 lz: Linien-Offset definieren */ } p > a:hover, p > a:active, p > a:focus, /* LINKS IN ABSAETZEN (AKTIV) */ span > a:hover, span > a:active, span > a:focus, /* LINKS IN SPANS (AKTIV)*/ strong > a:hover, strong > a:active, strong > a:focus { /* LINKS IN FETT FORMATIERTEM TEXT (AKTIV) */ color: #000; /* 190319 lz: Schwarz faerben */ } /* PLATZHALTER-TEXTE */ ::-webkit-input-placeholder { /* WebKit browsers */ color: var(--standard); /* 191024 lz: CI-einfaerben */ opacity: 0.5; /* 191024 lz: CI-einfaerben */ } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--standard); /* 191024 lz: CI-einfaerben */ opacity: 0.5; /* 191024 lz: CI-einfaerben */ } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: var(--standard); /* 191024 lz: CI-einfaerben */ opacity: 0.5; /* 191024 lz: CI-einfaerben */ } /* LISTEN */ .wp-block-list { /* BLOCK-ELEMENT 'LISTE' */ margin-bottom: 10px; /* 250324 lz: = p */ } ol { list-style: decimal; } li:not(.kt-title-item) { list-style: none !important; /* 240606 lz: Aufzaehlungspunkte entf */ margin-bottom: 10px; /* 250205 lz: Mailbriefing hm 240923 */ padding-left: 44px; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ position: relative; /* 240606 lz: Indiv. Aufzaehlungszeichen an Listenpunkt ausrichten */ } li:not(.kt-title-item):not(.menu-item):before { /* LISTENPUNKT > AUFZAEHLUNGSZEICHEN (INDIVIDUELL) */ background: var(--gelb); /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ content:''; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ height: 14px; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ left: 0; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ opacity: .85; /* 240606 lz: Teiltransparent gestalten */ position: absolute; /* 240606 lz: Indiv. Aufzaehlungszeichen an Listenpunkt ausrichten */ top: 4px; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ transform: rotate(-5deg); /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ width: 28px; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ } li:not(.kt-title-item):not(.menu-item):nth-child(odd):before { /* LISTENPUNKT > AUFZAEHLUNGSZEICHEN (INDIVIDUELL) > JEDES ZWEITE */ top: 4px; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ transform: rotate(3deg); /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ } ul.rot li:before { /* AUFZAEHLUNGEN MIT ROTEN BULLETPOINTS */ background: var(--rot) !important; /* 240822 lz: Ergaenzen */ } ul.blau li:before { /* AUFZAEHLUNGEN MIT BLAUEN BULLETPOINTS */ background: var(--blau) !important; /* 240822 lz: Ergaenzen */ } ul.gruen li:before { /* AUFZAEHLUNGEN MIT GRUENEN BULLETPOINTS */ background: var(--gruen) !important; /* 240822 lz: Ergaenzen */ } ul.braun li:before { /* AUFZAEHLUNGEN MIT BRAUNEN BULLETPOINTS */ background: var(--braun) !important; /* 240822 lz: Ergaenzen */ } li > ul, li > ol { margin-bottom: 0; margin-left: 0; } .entry-content ul ul li:last-child, .entry-content ol ol li:last-child { margin-bottom: 0; } .entry-content ul ul, .entry-content ol ol { margin-top: 12px; } ul + h3 { /* LISTENTITEL NACH VORIGER LISTE */ margin-top: 20px; /* 180505 lz: Absatzabstand ergaenzen */ } figure { margin: 0; } img { display: block; /* 200926 lz: Abstand unten innerh. figure entf */ height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ min-width: 0; } /* Alignment */ .alignleft, .alignright { display: block; } .alignleft { margin: 5px 30px 5px 0; float: left; } .alignright { margin: 5px 0 0 30px; float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; } img.alignleft, img.alignright { margin-top:10px; margin-bottom:20px; } /* Pages */ .site-content .page { position: relative; margin: 0; padding: 0 0 60px; } .divider { height: 0; padding: 0; margin: 0; } .divider + p { display: none; } #page-wrapper { /* SEITEN-CONTAINER */ height: 415px; /* 190319 lz: Platz fuer Schmuckgrafik erzeugen */ margin: 0 auto; max-width: none; max-width: none; position: relative; width: 100%; } article > * { /* SEITENINHALTS-CONTAINER > INHALTE */ margin: 0 auto !important; /* 190523 lz: CF7 Standard-CSS ueberschreiben */ max-width: 1080px; /* 190329 lz: Auf Satzspiegelbreite beschraenken */ padding: 0 10px !important; /* 190523 lz: CF7 Standard-CSS ueberschreiben */ } /* BUTTONS 'BACK TO TOP' */ #backtotop { /* BUTTON 'BACK TO TOP' (INITIAL) */ background: url("img/arrow-black.svg") center center / contain repeat !important; /* 240620 lz: CSS kombinieren */ bottom: 70px; /* 240620 lz: Button positionieren */ height: 50px; /* 240620 lz: Button definieren */ opacity: 0; /* 240620 lz: Initial ausblenden */ pointer-events: none; /* 240620 lz: Nicht klickbar schalten */ position: fixed; /* 240620 lz: Button positionieren */ right: 60px; /* 240620 lz: = Menuebutton */ transition: .2s ease-out; /* 240620 lz: = weich animieren */ transform: rotate(180deg); /* 240620 lz: Pfeilrichtung umkehren */ width: 50px; /* 240620 lz: Button definieren */ z-index: 1; /* 240620 lz: Von Cookiebanner ueberlagern lassen */ } #backtotop.visible { /* BUTTON 'BACK TO TOP' (GESCROLLT) */ bottom: 30px; /* 240620 lz: = Sticky-Logo */ opacity: 1; /* 240620 lz: Einblenden */ pointer-events: all; /* 240620 lz: Klickbar schalten */ } #backtotop.visible:hover { /* BUTTON 'BACK TO TOP' (GESCROLLT + MOUSEOVER) */ bottom: 50px; /* 240620 lz: Leichte Interaktions-Animation ergaenzen */ } /*--- Accordeon ---*/ .wp-block-group.gb--accordeon { /* AKKORDEON-CONTAINER */ padding-left: 0; /* 240822 lz: Hor. Gruppenrahmen entf */ padding-right: 0; /* 240822 lz: Hor. Gruppenrahmen entf */ } .gb--accordeon .wp-block-group { /* AKKORDEON-ELEMENTE */ border-bottom: 6px solid rgba(235,235,235,0.85); /* 240822 lz: Blassgrau-Transp hinterlegen */ padding: 0; /* 240619 lz: Std-Rahmen entf */ } .wp-block-group.has-background .gb--accordeon .wp-block-group { /* AKKORDEON-ELEMENTE (IN FARBIG HINTERLEGTEN BEREICHEN */ border-bottom: 6px solid rgba(255,255,255,0.85); /* 240822 lz: Weiss-Transp hinterlegen */ padding: 0; /* 240619 lz: Std-Rahmen entf */ } .gb--accordeon .wp-block-group.active ol, .gb--accordeon .wp-block-group.active ul, .gb--accordeon .wp-block-group.active p { opacity: 1; /* 250324 lz: Listen als Inhalt beruecksichtigen */ } .gb--accordeon h4 { cursor: pointer; /* 240619 lz: Als klickbar kennzeichnen */ font-size: 18px !important; /* 240619 lz: = p */ margin: 0; padding: 30px 30px 30px 0; /* 250407 lz: Abstand Tabreitertext zu Icon ergaenzt */ position: relative; } .gb--accordeon ol, .gb--accordeon ul, .gb--accordeon p { /* 250324 lz: Listen als Inhalt beruecksichtigen */ padding: 0; opacity: 0; transition: opacity .2s ease-out; display: none; /* 240619 lz: Initial ausblenden */ margin-bottom: 20px !important; /* 250407 lz: Last-child-Regel regulaerer Absaetze aushebeln */ overflow: hidden; } .gb--accordeon ol:last-child, .gb--accordeon ul:last-child, .gb--accordeon p:last-child { /* AKKORDEON-INHALT > LETZTE ZEILE */ margin-bottom: 30px !important; /* 250407 lz: = Abstand Akkordeon-Zeile oben */ } .gb--accordeon h4::before, .gb--accordeon h4::after { /* AKKORDEON > REITER-ICON (EINZELTEILE) */ background: rgba(0,0,0,0.85); /* 240619 lz: Umsetzung Figma-Layout hm */ content: ''; /* 240619 lz: Umsetzung Figma-Layout hm */ height: 6px; /* 240619 lz: Umsetzung Figma-Layout hm */ position: absolute; /* 240619 lz: Umsetzung Figma-Layout hm */ right: 8px; /* 240619 lz: Umsetzung Figma-Layout hm */ top: 36px; /* 240619 lz: Umsetzung Figma-Layout hm */ transition: transform .5s cubic-bezier(.6, 0, 0, 1); /* 240619 lz: Umsetzung Figma-Layout hm */ transform: rotate(-130deg); /* 240619 lz: Umsetzung Figma-Layout hm */ width: 18px; /* 240619 lz: Umsetzung Figma-Layout hm */ } .gb--accordeon .wp-block-group.active h4::before { /* AKKORDEON (AUSGEKLAPPT) > REITER-ICON (EINZELTEIL 1 VON 2)*/ transform: rotate(130deg); /* 240619 lz: Icon rotieren */ } .gb--accordeon h4::after { /* AKKORDEON > REITER-ICON (EINZELTEIL 2 VON 2) */ background: rgba(0,0,0,0.95); /* 240619 lz: Umsetzung Figma-Layout hm */ right: 0; /* 240619 lz: Umsetzung Figma-Layout hm */ transform: rotate(-50deg); /* 240619 lz: Umsetzung Figma-Layout hm */ } .gb--accordeon .wp-block-group.active h4::after { /* AKKORDEON (AUSGEKLAPPT) > REITER-ICON (EINZELTEIL 2 VON 2) */ transform: rotate(50deg); /* 240619 lz: Icon rotieren */ } /* SHORTCODES */ *:not(body).mobile { /* MOBILE-EXKLUSIVE INHALTE */ display: none; /* 250315: Body exkludieren gegen Darstellungsprobleme LightSlider */ } /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { /* ALLGEMEIN */ body { /* SEITENINHALT */ font-size: 16px; /* 250307 lz: Kompakter gestalten */ } p { /* ABSAETZE */ width: 100%; /* 190930 lz: Stets volle Spaltenbreite einnehmen */ } article { /* SEITENINHALTS-CONTAINER */ overflow: hidden !important; /* 191017 lz: Hor. Scrollbalken durch Beitragsfilter verhindern */ } article > * { /* SEITENINHALTS-CONTAINER > INHALTE */ margin: 0; /* 190916 lz: Aussenabstaende entf */ max-width: none; /* 190916 lz: Breitenbegrenzung aufheben */ padding: 0 20px !important; /* 190916 lz: Fixe Randabstaende definieren */ } h1, /* = SEITEN-TITEL */ h2 { /* = HEADLINES */ hyphens: manual; /* 170319 lz: Silbentrennung bis auf manuell gesetzte verbieten */ line-height: 1.1em !important; /* 191017 lz: Zeilenabstand mobil min. vergroessern */ text-align: center; /* 200913 lz: Headlines zentrieren */ } h1 { /* = SEITEN-TITEL */ font-size: 50px; /* 200913 lz: Vergroessern */ margin: 30px 0 20px !important; /* 201109 lz: Abstand vor ergaenzen */ } h2, h3, h4 { /* = HEADLINES */ font-size: 24px !important; /* 250407 lz: Code reduziert */ margin: 30px 0 15px; /* 250407 lz: Code reduziert */ } h4 { /* = HEADLINES */ font-size: 16px !important; /* 250407 lz: Code reduziert */ } #content { /* INHALTS-CONTAINER */ overflow-x: hidden; /* 200929 lz: Hor. Scollbalken vermeiden */ } /* BUTTON 'BACK TO TOP' */ #backtotop { /* BUTTON 'BACK TO TOP' (INITIAL) */ right: 30px; /* 250308 lz: = Menuebutton */ } header.menue-open #backtotop.visible { /* HEADER > HAUPTMENUE (GEOEFFNET) > BUTTON 'BACK TO TOP' (GESCROLLT) */ display: none; /* 190917 lz: Entf */ } /* SEITENTITEL */ .page .page-title, /* SEITEN > SEITENTITEL */ .archive .page-title { /* KATEGORIESEITEN > SEITENTITEL */ height: 200px; /* 190917 lz: Verkleinern */ } /*--- ACCORDEON ---*/ .wp-block-group.gb--accordeon { /* AKKORDEON-CONTAINER */ padding: 0; /* 250403 lz: Mobiloptimierung */ } /* SHORTCODES */ *:not(body).desktop { /* DESKTOP-EXKLUSIVE INHALTE */ display: none !important; /* 250315: Body exkludieren gegen Darstellungsprobleme LightSlider */ } *:not(body).mobile { /* MOBILE-EXKLUSIVE INHALTE */ display: block; /* 250315: Body exkludieren gegen Darstellungsprobleme LightSlider */ } } /* MOBILE / Max width of 480 pixels (smartphones portrait) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 480px) { .entry-content p, .entry-content li, section p, section li, .ml-responsive-table dl dd { line-height: 1.4em !important; } } /*-----------------------------------------------------------------------------------*/ /* 2.2 - BLOCKS /*-----------------------------------------------------------------------------------*/ /* BLOCK-ELEMENT 'GRUPPE' */ .wp-block-group { /* GRUPPE (CONTAINER) */ max-width: 1080px; /* 240617 lz: = Satzspiegelbreite (Desktop) */ padding: 30px; /* 240619 lz: Std-Innenrahmen definieren */ width: 100%; /* 240617 lz: Zeilenfuellend gestalten */ } .wp-block-group.fullheight { /* GRUPPE (CONTAINER, VOLLE FENSTERHOEHE) */ height: 100vh; /* 240621 lz: Volle Browserhoehe einnehmen */ } .wp-block-group :first-child { /* GRUPPE > ERSTES INHALTS-ELEMENT */ margin-top: 0; /* 250407 lz: Abstand vor entf */ } /* BLOCKELEMENT 'BILD' > CONTAINER */ .wp-block-image { /* BILD IM FLIESSTEXT */ margin-bottom: 0; /* 200926 lz: Entf */ } .wp-block-image .alignleft { /* BILD IM FLIESSTEXT (LINKSBUENDIG) */ margin-right: 2em; /* 190617 lz: Abstand zu Fliesstext erhoehen */ } .wp-block-image .alignright { /* BILD IM FLIESSTEXT (RECHTSBUENDIG) */ margin-left: 2em; /* 190617 lz: Abstand zu Fliesstext erhoehen */ } .wp-block-image figcaption { /* BILDUNTERSCHRIFTEN */ color: #999; /* 191009 lz: Dezenter gestalten */ font-size: 12px !important; /* 191009 lz: Dezenter gestalten */ line-height: 1.5em; /* 190617 lz: = Fliesstext */ margin-bottom: 2em; /* 190617 lz: Abstand zu Fliesstext erhoehen */ } /* BLOCK-ELEMENT 'BUTTON' */ button, /* BUTTONS ALLG. */ button:focus, /* BUTTONS FOCUS. */ button:active, /* BUTTONS ACTIVE */ input::-moz-focus-inner { /* FIREFOX */ outline: none; /* 190625 lz: Buttons stylen */ cursor: pointer; /* 190625 lz: Buttons stylen */ height: 100%; /* 190625 lz: Buttons stylen */ } .wp-block-button { /* BLOCK 'BUTTON' > CONTAINER */ margin: 15px 0 !important; /* 240617 lz: Umsetzung Figma-Layout hm */ } .wp-block-buttons:not(.footer-menu) .wp-block-button .wp-block-button__link { /* BLOCK 'BUTTON' > INHALT */ background: linear-gradient(to bottom, rgba(16,15,15,0.85) 0%, rgba(16,15,15,0.85) 39%, #000 40%, #000 60%, rgba(16,15,15,0.85) 61%, rgba(16,15,15,0.85) 100%); /* 240617 lz: Umsetzung Figma-Layout hm */ border: none !important; /* 240617 lz: = Feiner gestalten */ color: #fff; /* 240617 lz: Umsetzung Figma-Layout hm */ font-weight: 600; /* 240617 lz: Umsetzung Figma-Layout hm */ font-size: 16px; /* 240617 lz: = Verkleinerter Nav */ line-height: 1.2em; /* 240617 lz: = Headlines */ padding: 12px 16px; /* 250326 lz: Staerker an Figma-Layout hm angeglichen */ } /* BLOCK 'COLLAGE' */ #collage .wp-block-group__inner-container { /* BLOCK 'COLLAGE' > INNEN-CONTAINER */ max-width: none !important; /* 240710 lz: Randlos gestalten */ } /* BLOCK-ELEMENT 'SPALTEN' */ .wp-block-columns { /* BLOCK 'SPALTEN' */ margin-bottom: 0; /* 200927 lz: Standardwert aushebeln */ position: relative; /* 200926 lz: Abs. Spalteninhalte rel. an Satzspiegel ausrichten */ } /* BLOCK-ELEMENT 'TABELLE' */ .wp-block-table { /* TABELLEN-ZELLEN */ margin-bottom: 20px; /* 240618 lz: = p */ } .wp-block-table table td { /* TABELLEN-ZELLEN */ border: 0; /* 240618 lz: = p */ padding: 0 20px 0 0; /* 240618 lz: = p, bloss mit Abstand rechts */ } .wp-block-table table td:first-child { /* ERSTE TABELLEN-ZELLE */ white-space: nowrap; /* 240618 lz: Breite des Inhalts annehmen */ width: 1%; /* 240618 lz: Breite des Inhalts annehmen */ } /* BLOCK-ELMENT 'ZITAT' */ blockquote h2 { /* ZITAT */ font-size: 46px !important; /* 240617 lz = h2 */ margin: 40px auto 20px; /* 240617 lz = h2 */ max-width: 750px; /* 240621 lz Breiter gestalten */ } blockquote cite { /* ZITAT > AUTOR */ font-size: 22px !important; /* 240617 lz = h4 */ font-weight: 500; /* 240617 lz = h4 */ font-style: normal; /* 240617 lz = h4 */ margin: 40px auto; /* 240617 lz = h2 */ max-width: 700px; /* 240617 lz = h2 */ } /* BLOCK-FEATURE 'WIDE WIDTH' */ .entry-content .alignwide { margin-left : -80px; margin-right : -80px; } /* BLOCK-FEATURE 'FULL WIDTH' */ #content .alignfull { max-width: 1920px; /* 240625 lz: Layoutbreite (Desktop) frueher deckeln */ width: 100%; /* 240625 lz: Prozent statt vw gegen Scrollbalken-Prob */ } /* BLOCK-ELEMENT 'CALL TO ACTION' (MITWANDERND) */ #cta { /* CALL TO ACTION (CONTAINER) */ width: 500px; /* 250316 lz: Mobiloptimierung */ padding: 25px 30px !important; /* 240822 lz: Figma-Layout hm */ position: fixed; /* 240822 lz: Figma-Layout hm */ right: -320px; /* 240822 lz: Figma-Layout hm */ bottom: 118px; /* 250319 lz: Reduziert */ transition: all .3s cubic-bezier(.5,1.6,.4,.8); /* 240822 lz: Figma-Layout hm */ transform: rotate(-4deg); /* 240822 lz: Figma-Layout hm */ z-index: 999; /* 240822 lz: Figma-Layout hm */ } #cta:hover { /* CALL TO ACTION (CONTAINER) */ right: -30px; /* 240822 lz: Figma-Layout hm */ } #cta .wp-block-columns { /* CALL TO ACTION > SPALTEN-CONTAINER */ flex-wrap: nowrap !important; /* 250308 lz: Mobil Umbruch verhindern */ } #cta .wp-block-column { /* CALL TO ACTION > SPALTEN */ display: block !important; /* 250308 lz: Mobiloptimierung */ margin: 0; /* 240822 lz: Figma-Layout hm */ } #cta h3 { /* CALL TO ACTION > HEADLINE */ margin: 0 20px 0 0; /* 250316 lz: Mobiloptimierung */ } #cta .wp-block-button { /* CALL TO ACTION > BUTTON */ margin-bottom: 0 !important; /* 240822 lz: Figma-Layout hm */ } #cta .wp-block-button .wp-block-button__link { /* CALL TO ACTION > BUTTON > LINK */ font-size: 14px; /* 240822 lz: Figma-Layout hm */ padding: 12px 14px !important; /* 240822 lz: Figma-Layout hm */ } /* The animation code */ @keyframes pulsieren { /* CALL TO ACTION (AUSGEKLAPPT) > ICON > ANIMATION */ 10% {transform: scale(1);} /* 240822 lz: Herz-Icon animieren */ 50% {transform: scale(0.9);} /* 240822 lz: Herz-Icon animieren */ 90% {transform: scale(1);} /* 240822 lz: Herz-Icon animieren */ } #cta:hover img { /* CALL TO ACTION (AUSGEKLAPPT) > ICON */ transform: scale(1); /* 240822 lz: Herz-Icon animieren */ animation-name: pulsieren; /* 240822 lz: Herz-Icon animieren */ animation-duration: 1.5s; /* 240822 lz: Herz-Icon animieren */ animation-iteration-count: infinite; /* 240822 lz: Herz-Icon animieren */ animation-timing-function: ease-in-out; /* 240822 lz: Herz-Icon animieren */ } /* SONDER-BEFEHLE */ .mobilumbruch { /* TEXTUMBRUECHE FUER MOBILANSICHT */ display: none; /* 200913 lz: Nur Mobil einblenden */ } /* DESKTOP / Min width of 1079 pixels (SATZSPIEGELBREITE) ------------------------------------------------------------------------------------ */ @media screen and (min-width: 1079px) { /* BLOCK 'COLLAGE' */ #collage figure { /* BLOCK 'COLLAGE' > BILD-ELEMENT */ margin-left: -30px !important; /* 250403 lz: Randlos gestalten */ width: calc(100vw + 60px) !important; /* 250407 lz: Randlos gestalten */ } #cta h3 { /* CALL TO ACTION > HEADLINE */ font-size: 28px !important; /* 240822 lz: Figma-Layout hm */ } } /* MOBILE / Max width of 1078 pixels (MOBILE > UNTER SATZSPIEGELBREITE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1078px) { .section .wpb_column .vc_column-inner, /* SECTIONS > INHALTSSPALTE */ .page-template-full-width .site-content { /* SEITE 'DATENSCHUTZ' > INHALTSSPALTE */ padding: 0 15px; /* 180511 lz: Seitenrand ergaenzen */ } /* BLOCK-ELEMENT 'GRUPPE' */ .wp-block-group { padding: 0 5% 40px; /* 200928 lz: Abstand vor entf */ } .wp-block-group__inner-container > p, /* BLOCK-ELEMENT 'GRUPPE' > INNENCONTAINER > ABSAETZE */ .wp-block-group__inner-container > h2 { /* BLOCK-ELEMENT 'GRUPPE' > INNENCONTAINER > HEADLINES */ margin: 0 0 20px; /* 200929 lz: Hor. Einrueckung entf */ max-width: none; /* 201011 lz: Hor. Einrueckung entf */ } /* BLOCK-ELEMENT 'BILD' */ .wp-block-image { /* BLOCK-ELEMENT 'BILD' > BILD */ text-align: center; /* 191009 lz: Bildinhalt zentrieren */ width: 100%; /* 250403 lz: SVGs eine Breite zuweisen */ } /* BLOCK-ELEMENT 'SPALTEN' */ .wp-block-columns { /* BLOCK 'SPALTEN' > SPALTEN-SECTIONS */ flex-wrap: wrap !important; /* 220216 lz: Spalten aufloesen */ margin: 0; /* 200929 lz: Entf */ width: 100%; /* 201025 lz: Ganzzeilig gestalten */ } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child), .wp-block-column { /* BLOCK 'SPALTEN' */ display: flex; /* 190929 lz: Inhalte hor. zentrieren */ flex-flow: row wrap; /* 190929 lz: Inhalte hor. zentrieren */ margin: 0 !important; /* 200913 lz: Abstaende und Stege entf */ } .wp-block-column h2 { /* BLOCK 'SPALTEN' > HEADLINE */ margin: 18px 0 18px; /* 191016 lz: Abstaende opt. 50px / 25px */ } /* BLOCK-ELMENT 'ZITAT' */ blockquote { /* ZITAT */ display: block; /* 200927 lz: Ganzzeilig gestalten */ width: 100%; /* 200927 lz: Ganzzeilig gestalten */ } /* BLOCK 'COLLAGE' */ #collage figure { /* BLOCK 'COLLAGE' > BILD-ELEMENT */ margin-left: -30px !important; /* 250427 lz: Randlos gestalten */ width: 100vw !important; /* 250427 lz: Randlos gestalten */ } /* BLOCK-ELEMENT 'CALL TO ACTION' (MITWANDERND) */ #cta { /* CALL TO ACTION (CONTAINER) */ width: fit-content; /* 250316 lz: Mobiloptimierung */ padding: 16px !important; /* 250429 lz: Kompakter gestalten */ position: fixed; /* 250315 lz: Mobiloptimierung */ right: -25px; /* 250429 lz: Kompakter gestalten */ bottom: 100px; /* 250315 lz: Mobiloptimierung */ } body.scrolled #cta { /* CALL TO ACTION (CONTAINER, WENN GESCROLLT) */ right: -155px; /* 250426 lz: Einklappen */ transition: all .3s cubic-bezier(.5,1.6,.4,.8); /* 250321 lz: Bei Swipe nach rechts animiert ausblenden */ } #cta.swipedright, body.scrolled #cta.swipedright { /* CALL TO ACTION (CONTAINER, WENN NACH RECHTS GESWIPED) */ right: -280px; /* 250426 lz: Bei Swipe nach rechts animiert ausblenden */ transition: all .6s cubic-bezier(1,.2,.6,.1); /* 250426 lz: Bei Swipe nach rechts animiert ausblenden */ } #cta.swipedleft, body.scrolled #cta.swipedleft { /* CALL TO ACTION (CONTAINER, WENN NACH LINKS GESWIPED) */ right: -25px; /* 250429 lz: Kompakter gestalten */ transition: all .6s cubic-bezier(1,.2,.6,.1); /* 250426 lz: Bei Swipe nach rechts animiert ausblenden */ } #cta .wp-block-columns { /* CALL TO ACTION > SPALTEN-CONTAINER */ gap: .8em; /* 250321 lz: Kompakter gestalten */ } #cta .wp-block-column { /* CALL TO ACTION > SPALTEN */ flex-basis: content !important; /* 250308 lz: Mobiloptimierung */ flex-grow: 1; /* 250315 lz: Verschwinden des Icons bei groesserer Mobilansicht verhindern */ } #cta .wp-block-column .wp-block-image { /* ELEMENT 'CTA' > ICON */ margin: 0 !important; /* 250308 lz: Sonderregel entf */ width: 85px; /* 250429 lz: Kompakter gestalten */ } #cta h3 { /* CALL TO ACTION > HEADLINE */ font-size: 18px !important; /* 250429 lz: Kompakter gestalten */ line-height: 1em; /* 250429 lz: Kompakter gestalten */ } #cta .wp-block-button { /* CALL TO ACTION > BUTTON */ margin-top: 12px !important; /* 250429 lz: Kompakter gestalten */ } #cta .wp-block-button .wp-block-button__link { /* CALL TO ACTION > BUTTON > LINK */ padding: 9px 12px !important; /* 250429 lz: Kompakter gestalten */ } /* SONDER-BEFEHLE */ .mobilumbruch { /* TEXTUMBRUECHE FUER MOBILANSICHT */ display: inline; /* 200913 lz: Nur Mobil einblenden */ } } /*-----------------------------------------------------------------------------------*/ /* 2.3 - TABLES /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 3.0 - HEADER /*-----------------------------------------------------------------------------------*/ header { /* HEADER */ background: #000; /* 240604 lz: Umsetzung Figma-Layout hm */ display: flex; /* 240604 lz: Umsetzung Figma-Layout hm */ height: 100px; /* 240604 lz: Umsetzung Figma-Layout hm */ justify-content: space-between; /* 240605 lz: Kindelemente hor. verteilen */ max-width: 1920px; /* 240625 lz: Layoutbreite (Desktop) frueher deckeln */ padding: 26px 60px; /* 240605 lz: Umsetzung Figma-Layout hm */ position: fixed; /* 240604 lz: Navi mitwandernd gestalten */ transition: all .3s ease-out; /* 250407 lz: Mobil-Desktop-Wechsel weich animieren */ width: 100%; /* 240604 lz: Volle Browserbreite einnehmen */ z-index: 2; /* 240604 lz: Content ueberlagern */ } #header-logo { /* HEADER > LOGO */ display: block; /* 160823 lz: wichtig fuer hor. zentrierung via margin */ height: 100%; /* 190328 lz: Hoehe = nav */ position: relative; /* 190327 lz: Scrollanimation ergaenzen */ width: calc(100% - 68px); /* 250308 lz: Steg zum Hauptmenuebutton erstellen */ background: url("img/logo-klein.svg") center left / contain no-repeat; /* 240604 lz: Umsetzung Figma-Layout hm */ } #header-menu-btn { /* HEADER > MENUE-BUTTON */ cursor: pointer; /* 240327 lz: Bugfix 'Scroll auf Seitenanfang bei Klick' */ height: 100%; /* 240604 lz: Umsetzung Figma-Layout hm */ width: 48px; /* 240604 lz: Umsetzung Figma-Layout hm */ background: url("img/menu.svg") center center / contain no-repeat; /* 240604 lz: Umsetzung Figma-Layout hm */ } /* --- HAUPTMENUE --- */ #header-menu { /* HAUPTMENUE (CONTAINER) */ align-items: flex-start; /* 250301 lz: Menue-Elemente oben anordnen */ background: var(--mittelgrau); /* 240618 lz: = Mittelgrau */ display: flex; /* 240604 lz: Flexbox definieren */ flex-flow: row nowrap; /* 240604 lz: Menue darf nicht umbrechen */ justify-content: flex-end; /* 240604 lz: Menue rechtsbuendig anordnen */ list-style: none; /* 240604 lz: Aufzaehlungszeichen entfernen */ opacity: 0; /* 240605 lz: Menue erst sichtbar machen bei Hovern des Menuebuttons */ pointer-events: none; /* 240605 lz: Menue erst klickbar machen bei Hovern des Menuebuttons */ position: absolute; /* 240604 lz: Aus dem Dokumentenfluss herausnehmen */ right: 0; /* 240604 lz: Rechtsbuendig anordnen */ top: 100px; /* 240604 lz: = header */ } #header-menu.active { /* HEADER > HAUPTMENUE (AKTIVIERT) */ opacity: 1; /* 240605 lz: Menue erst sichtbar machen bei Hovern des Menuebuttons */ pointer-events: all; /* 240605 lz: Menue erst klickbar machen bei Hovern des Menuebuttons */ } #header-menu li { /* HAUPTMENUE > MENUEPUNKTE */ align-items: center; /* 180408 lz: Kindelemente vert. zentrieren */ border-top: #EBEBEB 3px solid; /* 240605 lz: = Hellgrau */ background: var(--mittelgrau); /* 250301 lz: Mobiloptimierung */ display: flex; /* 180408 lz: Flexbox definieren */ flex-flow: row nowrap; /* 180408 lz: Menue darf nicht umbrechen */ height: 100%; /* 190328 lz: Hoehe = nav */ margin: 0; /* 240618 lz: Std-Stil aushebeln */ padding: 0; /* 240618 lz: Std-Stil aushebeln */ } #header-menu li a { /* HAUPTMENUE > MENUEPUNKTE > LINKS */ font-size: 28px; /* 240605 lz: Umsetzung Figma-Layout hm */ font-weight: 600; /* 240605 lz: Umsetzung Figma-Layout hm */ padding: 14px 50px 16px; /* 240605 lz: Umsetzung Figma-Layout hm */ position: relative; /* 190319 lz: Linkunterstreichung animieren */ text-align: right; /* 240605 lz: Umsetzung Figma-Layout hm */ width: 100%; /* 240605 lz: Umsetzung Figma-Layout hm */ } /* MOBILE / Max width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { header { /* HEADER */ height: 55px; /* 250407 lz: Umsetzung Figma-Layout hm */ padding: 8px 12px 8px 26px; /* 250407 lz: Umsetzung Figma-Layout hm */ } #header-logo { /* HEADER > LOGO */ background: url("img/logo-klein.svg") center left / 200px no-repeat; /* 250407 lz: Umsetzung Figma-Layout hm */ } #header-menu { /* HAUPTMENUE (CONTAINER) */ top: 55px; /* 250407 lz: = header */ } #header-menu li a { /* HAUPTMENUE > MENUEPUNKTE > LINKS */ padding: 14px 30px 16px; /* 250407 lz: Umsetzung Figma-Layout hm */ } } /*-----------------------------------------------------------------------------------*/ /* 4.0 - FOOTER /*-----------------------------------------------------------------------------------*/ footer { /* FOOTER */ background-color: #000; /* 240605 lz: Footer schwarz faerben */ color: #fff; /* 190319 lz: Footerlinks weiss faerben */ display: flex; /* 190319 lz: Zweispaltigen Footer gestalten */ flex-flow: row wrap; /* 240605 lz: Zweispaltigen Footer gestalten */ justify-content: center; /* 180408 lz: Inhalte hor. zentrieren */ max-width: 1920px; /* 240625 lz: Layoutbreite (Desktop) frueher deckeln */ overflow: hidden; /* 250222: Mobil hor. Scrollbalken verhindern */ padding: 80px 30px 40px; /* 250222 lz: Hor. Abstand = Content */ position: absolute; /* 190319 lz: Footer definieren */ width: 100%; /* 190319 lz: Footer definieren */ z-index: -1; /* 240822 lz: Hinter CTA anordnen */ } #footer-widgets { /* FOOTER > WIDGETS (CONTAINER) */ display: flex; /* 240625 lz: Zweispaltig gestalten */ flex-flow: row wrap; /* 240605 lz: Inhalte umbrechen lassen */ max-width: 1040px; /* 240605 lz: = Satzspiegelbreite */ width: 100%; /* 240605 lz: Auf volle Zeilenbreite strecken */ } .footer-widget-column-1 { /* FOOTER > WIDGETS > SPALTE LINKS */ background: url(img/footer-illu.svg) 70% 100% / 320px no-repeat !important; /* 250222 lz: Mobiloptimierung */ position: relative; /* 240606 lz: Hintergrundbild an Container ausrichten */ width: 75%; /* 240605 lz: Breite (Desktop) definieren */ } .footer-widget-column-1 .wp-block-cover .wp-block-cover__image-background { /* FOOTER > WIDGETS > SPALTE LINKS > ILLUSTRATION > BILD */ object-fit: contain !important; /* 240605 lz: Grafik nicht beschneiden */ widtH: 40%; /* 240606 lz: Verkleinern */ } .footer-widget-column-1 .wp-block-cover .has-black-background-color { /* FOOTER > WIDGETS > SPALTE LINKS > ILLUSTRATION > FARBE */ background-color: unset !important; /* 240606 lz: HG-Farbe nur fuer Backend relevant (Lesbarkeit im Editor) */ } .footer-widget-column-2 { /* FOOTER > WIDGETS > SPALTE RECHTS */ align-items: center; /* 240606 lz: Spalteninhalt vert. zentrieren */ display: flex; /* 240606 lz: Spalteninhalt vert. zentrieren */ width: 25%; /* 240605 lz: Breite (Desktop) definieren */ } .kontaktdaten h2 { /* FOOTER > KONTAKTDATEN > UEBERSCHRIFT */ margin-top: 10px !important; /* 250222 lz: Auf eine Hoehe mit Headline links bringen */ padding-left: 44px; /* 240606 lz: = li */ } .kontaktdaten li:before { /* FOOTER > KONTAKTDATEN > AUFZAEHLUNGSZEICHEN (INDIVIDUELL) */ background:#fff !important; /* 240606 lz: Invertieren */ } .kontaktdaten li.listenpunkt-facebook:before { /* LISTENPUNKT 'FACEBOOK' > AUFZAEHLUNGSZEICHEN (INDIVIDUELL) */ background: url(img/facebook.svg) left center / contain no-repeat #0000 !important; /* 240606 lz: Indiv. Aufzaehlungszeichen generieren */ height: 60px !important; /* 240710 lz: Std-Befehl ueberschreiben */ top: -12px !important; /* 240710 lz: Std-Befehl ueberschreiben */ } .footer-widget-column-3 { /* FOOTER > WIDGETS > ABBINDER */ margin-top: 100px; /* 250222 lz: Zeilenabstand ergaenzen */ width: 100%; /* 240605 lz: Volle Zeilenbreite einnehmen */ } .footer-widget-column-3 .wp-block-button { /* FOOTER > WIDGETS > ABBINDER > BUTTONS */ margin-bottom: 0 !important; /* 240605 lz: Entf */ } /* MOBILE / Max width of 1079 pixels (smartphones landscape) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { #footer-widgets { /* FOOTER > WIDGETS (CONTAINER) */ flex-flow: column wrap; /* 250222 lz: Mobil hor. Scrollbalken verhindern */ max-width: 100vw; /* 250222 lz: Mobil hor. Scrollbalken verhindern */ } .widget-area { /* FOOTER > WIDGETS (SPALTEN) */ width: 100% !important; /* 240222 lz: Spalten mobil aufloesen */ } .footer-widget-column-1, /* FOOTER > WIDGETS > SPALTE LINKS */ .footer-widget-column-2 { /* FOOTER > WIDGETS > SPALTE RECHTS */ max-width: 350px; /* 250222 lz: Mobiloptimierung */ margin: 0 auto; /* 250222 lz: Mobiloptimierung */ } .footer-widget-column-1 { /* FOOTER > WIDGETS > SPALTE LINKS */ background: url(img/footer-illu.svg) 110px 40px / 200px no-repeat !important; /* 250222 lz: Mobiloptimierung */ } .kontaktdaten, /* FOOTER > KONTAKTDATEN (CONTAINER) */ .kontaktdaten h2 { /* FOOTER > KONTAKTDATEN > UEBERSCHRIFT */ padding: 0; /* 250222 lz: Mobiloptimierung */ text-align: left; /* 250222 lz: Mobiloptimierung */ } .footer-widget-column-3 { /* FOOTER > WIDGETS > ABBINDER */ margin: 40px 0 200px; /* 250326 lz: Platz schaffen fuer Back-to-Top-Button + CTA */ } .footer-widget-column-3 .wp-block-button a { /* FOOTER > WIDGETS > ABBINDER > BUTTONS */ padding: 0 !important; /* 250222 lz: Mobiloptimierung */ } } /*-----------------------------------------------------------------------------------*/ /* 5.0 - PAGES /*-----------------------------------------------------------------------------------*/ /* --- SECTIONS --- */ #content > .wp-block-group { /* SEITEN ALLG > SECTIONS */ padding: 60px 30px; /* 240619 lz: Vert. Abstaende vergroessern */ } #content > .wp-block-group:not(#testimonials) > .wp-block-group__inner-container { /* SEITEN ALLG > SECTIONS > INNENCONTAINER */ margin: 0 auto; /* 240620 lz: Hor. zentrieren */ max-width: 1080px; /* 240620 lz: = Satzspiegelbreite */ } /* --- SECTION 'WALLPAPER' --- */ #wallpaper { /* SEITENHEADER (CONTAINER) */ margin-top: 100px; /* 240625 lz: = header */ min-height: fit-content; /* 240625 lz: Festes Seitenverhaeltnis 1:0,4 */ padding: 0 0 35% 0; /* 240708 lz: Verschmaelert */ } body:not(.home) #wallpaper .wp-block-cover__inner-container { /* SEITENHEADER (INNEN-CONTAINER) */ position: absolute; /* 240625 lz: Festes Seitenverhaeltnis 1:0,4 */ top: 0; /* 240625 lz: Festes Seitenverhaeltnis 1:0,4 */ left: 0; /* 240625 lz: Festes Seitenverhaeltnis 1:0,4 */ width: 100%; /* 240625 lz: Festes Seitenverhaeltnis 1:0,4 */ height: 100%; /* 240625 lz: Festes Seitenverhaeltnis 1:0,4 */ } .polaroidhaufen { /* WALLPAPER > POLAROIDS */ height: 100%; width: 100vw; padding: 0; /* 240624 lz: Innenabstaende entf */ position: absolute; left: 0; overflow: hidden; /* 240621 lz: Beim Scrollen herausfliegende Polaroids nicht ueber Container herausluschern lassen */ right: 0; pointer-events: none; /* 240620 lz: Nicht klickbar gestalten / Hauptmenu nicht stoeren */ z-index: 2; /* 240620 lz: Wallpaper ueberlagern */ } .polaroidhaufen figure { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID > (CONTAINER) */ position: absolute; /* 240620 lz: Element an Eltern-DIV ausrichten, Veaenderung CSS-Positionen durch JS-Funktion erlauben */ transform: translateX(-50%) translateY(-50%); /* 240620 lz: Bildposition+Skalierung an Bildmitte ausrichten */ width: fit-content; /* 250411 lz: Std-Bildverbreiterung aushebeln */ } .polaroidhaufen figure img { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID > (INHALT) */ max-width: 480px; /* 240708 lz: Deckelung vw-Skalierung, entspricht 25vw bei Seitenbreite 1920px (bis Seitenraender eingrenzen) */ position: relative; /* 240620 lz: Element an Eltern-DIV ausrichten, Veaenderung CSS-Positionen durch JS-Funktion erlauben */ width: 25vw !important; /* 240708 lz: Kompakter gestalten */ height: 100%; transition: all .2s ease-out; } .polaroidhaufen .ebene3 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (DRITTE EBENE / VORDERGRUND) */ z-index: 3; /* 240620 lz: Stapeln */ } .polaroidhaufen .ebene2 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZWEITE EBENE / MITTELGRUND) */ z-index: 2; /* 240620 lz: Stapeln */ } .polaroidhaufen .ebene1 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (ERSTE EBENE / HINTERGRUND) */ z-index: 1; /* 240620 lz: Stapeln */ } .polaroidhaufen .ebene1 img, /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (ERSTE EBENE / HINTERGRUND) > BILD */ .home .polaroidhaufen .ebene1 img { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ERSTE EBENE / HINTERGRUND) > BILD */ max-width: 400px !important; /* 240621 lz: Bildgroesse deckeln (Bei Bildschirmen ueber Satzspiegelbreite) */ width: 19vw !important; /* 240621 lz: Skalieren */ } .polaroidhaufen .polaroid01 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (1. von links) */ left: 18%; /* 240708 lz: Kompakter gestalten */ top: 42%; /* 240625 lz: Umsetzung Figma-Layout hm */ } .polaroidhaufen .polaroid02 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (2. von links) */ left: 39%; /* 240708 lz: Kompakter gestalten */ top: 50%; /* 240708 lz: Kompakter gestalten */ } .polaroidhaufen .polaroid03 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (3. von links) */ right: 15%; /* 240708 lz: Kompakter gestalten */ top: 42%; /* 240625 lz: Umsetzung Figma-Layout hm */ } .polaroidhaufen .polaroid04 { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID (4. von links) */ right: -6%; /* 240708 lz: Kompakter gestalten */ top: 52%; /* 240708 lz: Kompakter gestalten */ } .polaroidhaufen .icon01 { /* WALLPAPER > POLAROIDS > SCHMUCKGRAFIK (1. von links) */ z-index: 4; /* 240710 lz: Figma-Layout fm 240708 lz */ transform: rotate(18deg); /* 240708 lz: Figma-Layout fm 240708 lz */ left: 26%; /* 240708 lz: Figma-Layout fm 240708 lz */ top: 0%; /* 240708 lz: Figma-Layout fm 240708 lz */ } .polaroidhaufen .icon01 img { /* WALLPAPER > POLAROIDS > SCHMUCKGRAFIK (1. von links) > BILD */ width: 13vw !important; /* 240708 lz: Figma-Layout fm 240708 lz */ max-width: 250px; /* 240710 lz: = Skalierung bei max. Satzpiegelbreite (1920px) */ } .polaroidhaufen .icon02 { /* WALLPAPER > POLAROIDS > SCHMUCKGRAFIK (2. von links) */ z-index: 4; /* 240710 lz: Figma-Layout fm 240708 lz */ transform: rotate(-14deg); /* 240710 lz: Figma-Layout fm 240708 lz */ right: 25%; /* 240710 lz: Figma-Layout fm 240708 lz */ bottom: 9%; /* 240710 lz: Figma-Layout fm 240708 lz */ } .polaroidhaufen .icon02 img { /* WALLPAPER > POLAROIDS > SCHMUCKGRAFIK (2. von links) > BILD */ width: 10vw !important; /* 240710 lz: Figma-Layout fm 240708 lz */ max-width: 194px; /* 240710 lz: = Skalierung bei max. Satzpiegelbreite (1920px) */ } .scroll-to-intro { /* WALLPAPER > BUTTON 'SCROLL TO INTRO' */ position: absolute; /* 240625 lz: Im Eltern-DIV anordnen */ bottom: 40px; /* 240625 lz: Im Eltern-DIV anordnen */ left: 50%; /* 240625 lz: Im Eltern-DIV anordnen */ transform: translateX(-50%); /* 240625 lz: Im Eltern-DIV anordnen */ transition: all .2s ease-out; /* 240625 lz: Weich animieren */ z-index: 2; /* 240625 lz: Polaroids im Wallpaper ueberlappen */ } .scroll-to-intro:hover { /* WALLPAPER > BUTTON 'SCROLL TO INTRO' (MOUSEOVER) */ bottom: 20px; /* 240625 lz: Nach unten bewegen */ } /* --- SECTION 'INTRO' --- */ #intro p { /* SEITEN ALLG > SECTION 'INTRO' > ABSAETZE */ margin: 0 auto 20px; /* 240617 lz: Umsetzung Figma-Layout hm */ max-width: 540px; /* 240617 lz: Umsetzung Figma-Layout hm */ } #testimonials { /* SEITEN ALLG > SECTION 'TESTIMONIALS */ padding-top: 0 !important; /* Randlos gestalten */ padding-bottom: 0 !important; /* Randlos gestalten */ } /* MOBILE / Max width of 1079 pixels (smartphones landscape) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { /* --- SECTION 'WALLPAPER' --- */ #wallpaper { /* SEITENHEADER (CONTAINER) */ margin-top: 55px; /* 250407 lz: = header */ padding-bottom: calc(85% + 70px); /* 250410 lz: Festes Seitenverhaeltnis nach Figma-Layout + Platz fuer Scrolldown-BTN */ } .polaroidhaufen { /* WALLPAPER > POLAROIDS */ height: calc(100% - 70px); /* 250411 lz: Platz fuer Scroll-down BTN schaffen */ } .polaroidhaufen .polaroid01, .polaroidhaufen .polaroid02, .polaroidhaufen .polaroid03, .polaroidhaufen .polaroid04 { /* WALLPAPER > POLAROIDS > EINZELMOTIVE */ width: unset; /* 250411 lz: Feste Breite aufheben */ } .polaroidhaufen .polaroid01 { /* WALLPAPER > POLAROIDS (UNTERSEITEN) > EINZELNES POLAROID 1/4 */ left: 12%; /* 250411 lz: Figma-Layout hm */ top: 29%; /* 250411 lz: Figma-Layout hm */ } .polaroidhaufen .polaroid02 { /* WALLPAPER > POLAROIDS (UNTERSEITEN) > EINZELNES POLAROID 2/4 */ left: 45%; /* 250411 lz: Figma-Layout hm */ top: 68%; /* 250411 lz: Figma-Layout hm */ } .polaroidhaufen .polaroid03 { /* WALLPAPER > POLAROIDS (UNTERSEITEN) > EINZELNES POLAROID 3/4 */ right: -14%; /* 250411 lz: Figma-Layout hm */ top: 30%; /* 250411 lz: Figma-Layout hm */ transform: translateX(-50%) translateY(-50%) rotate(3deg); /* 250411 lz: Figma-Layout hm */ } .polaroidhaufen .polaroid04 { /* WALLPAPER > POLAROIDS (UNTERSEITEN) > EINZELNES POLAROID 4/4 */ right: -43%; /* 250411 lz: Figma-Layout hm */ top: 67%; /* 250411 lz: Figma-Layout hm */ transform: translateX(-50%) translateY(-50%) rotate(-6deg); /* 250411 lz: Figma-Layout hm */ } .polaroidhaufen figure img { /* WALLPAPER > POLAROIDS > EINZELNES POLAROID > (INHALT) */ width: 46vw !important; /* 240711 lz: Mobiloptimierung */ } .scroll-to-intro { height: 70px; /* 250407 lz: Mobiloptimierung */ bottom: 0; /* 250407 lz: Mobiloptimierung */ } .scroll-to-intro:hover { /* WALLPAPER > BUTTON 'SCROLL TO INTRO' (MOUSEOVER) */ bottom: 0; /* 250410 lz: Mobiloptimierung */ } .scroll-to-intro figure { align-items: center; /* 250407 lz: Mobiloptimierung */ background-color: #fff; /* 250407 lz: Mobiloptimierung */ display: flex !important; /* 250407 lz: Mobiloptimierung */ height: 100%; /* 250407 lz: Mobiloptimierung */ justify-content: center; /* 250407 lz: Mobiloptimierung */ } .scroll-to-intro img { height: 50px !important; /* 250407 lz: = Scroll-to-Top BTN */ width: 50px !important; /* 250407 lz: = Scroll-to-Top BTN */ } } /*-----------------------------------------------------------------------------------*/ /* 5.1 - PAGES - HOME (STARTSEITE / BUNT) /*-----------------------------------------------------------------------------------*/ /* --- SECTION 'WALLPAPER' --- */ #welcome { /* STARTSEITE > WALLPAPER (CONTAINER) */ align-items: center; /* 240626 lz: Inhalte vert. zentrieren */ padding: 0; /* 240626 lz: Hoehe Untercontainer auf 100vh halten */ } #welcome h1 { /* STARTSEITE > WALLPAPER > UEBERSCHRIFT */ font-size: 120px !important; /* 240606 lz: Umsetzung Figma-Layout hm */ font-weight: 800; /* 240606 lz: = ExtraBold */ line-height: 1em !important; /* 240606 lz: Umsetzung Figma-Layout hm */ margin: 60px auto 40px; /* 240606 lz: Kompakter gestalten */ max-width: none; /* 250407 lz: Std-Begrenzung aushebeln */ text-transform: uppercase; /* 240606 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen { /* STARTSEITE > WALLPAPER > POLAROIDS */ height: 100vh; width: 100vw; position: absolute; left: 0; overflow: hidden; /* 240621 lz: Beim Scrollen herausfliegende Polaroids nicht ueber Container herausluschern lassen */ right: 0; pointer-events: none; /* 240620 lz: Nicht klickbar gestalten / Hauptmenu nicht stoeren */ z-index: 2; /* 240620 lz: Wallpaper ueberlagern */ } .home .polaroidhaufen figure img { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID > (INHALT) */ max-width: 466px; /* 240621 lz: Bildgroesse deckeln (Bei Bildschirmen ueber Satzspiegelbreite) */ width: 22vw !important; /* 240621 lz: Skalieren */ } .home .polaroidhaufen .polaroid01 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (linksoben1) */ left: 8%; /* 240620 lz: Initiale Position */ top: 36%; /* 240620 lz: Initiale Position */ } .home .polaroidhaufen .polaroid02 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (linksoben2) */ left: 22%; /* 240620 lz: Initiale Position */ top: 29%; /* 240620 lz: Initiale Position */ } .home .polaroidhaufen .polaroid03 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (oben1) */ left: 39%; /* 240620 lz: Initiale Position */ right: unset; /* 240625 lz: Pos. Unterseiten-Wallpaper aushebeln */ top: 28%; /* 240620 lz: Initiale Position */ } .home .polaroidhaufen .polaroid04 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (oben2) */ left: 59%; /*40620 lz: Initiale Position */ right: unset; /* 240625 lz: Pos. Unterseiten-Wallpaper aushebeln */ top: 30%; /* 240620 lz: Initiale Position */ } .home .polaroidhaufen .polaroid05 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (rechtsoben1) */ right: 6%; /* 240620 lz: Initiale Position */ top: 30%; /* 240620 lz: Initiale Position */ } .home .polaroidhaufen .polaroid06 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (rechtsoben2) */ right: -14%; /* 240620 lz: Initiale Position */ top: 30%; /* 240620 lz: Initiale Position */ } .home .polaroidhaufen .polaroid07 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (Zeile 2, links) */ left: 20%; /* 240621 lz: Initiale Position */ top: 55%; /* 240621 lz: Initiale Position */ } .home .polaroidhaufen .polaroid08 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (Zeile 2, rechts) */ right: -3%; /* 240621 lz: Initiale Position */ top: 48%; /* 240621 lz: Initiale Position */ } .home .polaroidhaufen .polaroid09 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (Zeile 3, links) */ left: 10%; /* 240621 lz: Initiale Position */ bottom: 4%; /* 240621 lz: Initiale Position */ } .home .polaroidhaufen .polaroid10 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (Zeile 3, mittelinks) */ left: 33%; /* 240621 lz: Initiale Position */ bottom: 2%; /* 240621 lz: Initiale Position */ } .home .polaroidhaufen .polaroid11 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (Zeile 3, mitterechts) */ right: 10%; /* 240621 lz: Initiale Position */ bottom: 5%; /* 240621 lz: Initiale Position */ } .home .polaroidhaufen .polaroid12 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (Zeile 3, rechts) */ right: -5%; /* 240621 lz: Initiale Position */ bottom: 3%; /* 240621 lz: Initiale Position */ } .home .scroll-to-intro { /* STARTSEITE > WALLPAPER > BUTTON 'SCROLL TO INTRO' */ bottom: -80px; /* 250622 lz: Pos. korr (weicht von Unterseiten ab) */ } .home .scroll-to-intro:hover { /* STARTSEITE > WALLPAPER > BUTTON 'SCROLL TO INTRO' (MOUSEOVER) */ bottom: -100px; /* 250622 lz: Pos. korr (weicht von Unterseiten ab) */ } /* --- SECTION 'TEASER' --- */ #teaser { /* SECTION 'TEASER' */ max-width: 1300px; /* 250322 lz: LightSlider ergaenzen */ } #teaser .teaser-inner { /* SECTION 'TEASER' > TEASER-CONTAINER */ align-items: stretch; /* 250322 lz: LightSlider ergaenzen */ display: flex; /* 250322 lz: LightSlider ergaenzen */ max-width: unset; /* 240618 lz: = Breiter gestalten */ padding: 0; /* 250322 lz: LightSlider ergaenzen */ } #teaser .teaser-inner > .wp-block-group { /* SECTION 'TEASER' > EINZELTEASER */ align-content: flex-start; /* 250321 lz: Inhalte oben andocken */ justify-content: center; /* 250321 lz: Inhalte zentrieren */ overflow: hidden; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ padding: 30px 30px 100px; /* 250322 lz: Platz fuer abs. pos. Buttons schaffen */ position: relative; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ } #teaser .teaser-inner > .wp-block-group::before { /* SECTION 'TEASER' > EINZELTEASER > SCHMUCKGRAFIK */ background: url(img/bereich-kaufhaus.svg) 0 0 no-repeat; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ content: ''; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ height: 100%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ left: -5%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ opacity: 0.6; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ pointer-events: none; /* 240623 lz: Buttons innerh. Teaser nicht ueberlagern */ position: absolute; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ top: -10%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ transform: rotate(20deg); /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ width: 105%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ z-index: 0; /* 240618 lz: = HG-Grafik ueberlagern */ } #teaser .teaser-inner > .wp-block-group.grata::before { /* SECTION 'TEASER' > EINZELTEASER 'GRATA' > SCHMUCKGRAFIK */ background: url(img/bereich-grata.svg) 0 0 no-repeat; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ left: 16%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ top: -4%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ transform: rotate(3deg); /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ width: 100%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ } #teaser .teaser-inner > .wp-block-group.gemeinschaft::before { /* SECTION 'TEASER' > EINZELTEASER 'GEMEINSCHAFT' > SCHMUCKGRAFIK */ background: url(img/bereich-gemeinschaft.svg) 0 0 no-repeat; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ left: 24%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ top: -8%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ transform: rotate(-10deg); /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ width: 100%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ } #teaser .teaser-inner > .wp-block-group.unterstuetzen::before { /* SECTION 'TEASER' > EINZELTEASER 'UNTERSTUETZEN' > SCHMUCKGRAFIK */ background: url(img/bereich-unterstuetzen.svg) 0 0 no-repeat; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ left: 18%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ top: 0%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ transform: rotate(3deg); /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ width: 86%; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ } #teaser .teaser-inner > .wp-block-group > h2 { /* SECTION 'TEASER' > HEADLINE */ position: relative; /* 240618 lz: = Hintergrund-Grafiken ergaenzen */ z-index: 1; /* 240618 lz: = HG-Grafik ueberlagern */ } #teaser .teaser-inner > .wp-block-group > .wp-block-buttons { /* SECTION 'TEASER' > BUTTON */ position: absolute; /* 250322 lz: Buttons einheitlich auf y-Achse aufhaengen */ bottom: 15px; /* 250322 lz: Buttons einheitlich auf y-Achse aufhaengen */ } /* --- SECTION 'KONTAKT' --- */ #kontakt .karte { /* SECTION 'KONTAKT' > BILD 'KARTE' */ margin: -70px 20px 0 20px; /* 240619 lz: Bild ausruecken */ position: relative; /* 240619 lz: Bild ausruecken */ z-index: -1; /* 240619 lz: Bild ausruecken */ } /* Minimum width of 1079 pixels (DESKTOP) ------------------------------------------------------------------------------------ */ @media screen and (min-width: 1079px) { #teaser.desktop { /* TEASER (DESKTOP-VERSION / OHNE SLIDER) */ display: flex; /* 250324 lz: Einblenden */ } #teaser:not(.desktop) { /* TEASER (MOBIL-VERSION / MIT SLIDER) */ opacity: 0; /* 250324 lz: Ausblenden o. Skalierungsproblem (display: none) */ position: absolute; /* 250324 lz: Ausblenden o. Skalierungsproblem (display: none) */ right: 99999px; /* 250324 lz: Ausblenden o. Skalierungsproblem (display: none) */ } } /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { /* --- SECTION 'WALLPAPER' --- */ .home .polaroidhaufen figure img, /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID > INHALT */ .home .polaroidhaufen .ebene1 img { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (UNTERSTE EBENE) > INHALT */ width: 38vw !important; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid03 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 1, LINKS) */ left: 17%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 20%; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid02 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 1, MITTE) */ left: 49%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 22%; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 2; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid05 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 1, RECHTS) */ right: -15%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 17%; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid09 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 2, LINKS) */ left: 22%; /* 250421 lz: Umsetzung Figma-Layout hm */ bottom: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 36%; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 3; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid10 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 2, MITTE) */ left: 50%; /* 250421 lz: Umsetzung Figma-Layout hm */ bottom: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 36%; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 2; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid04 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 2, RECHTS) */ left: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ right: -20%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 36%; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 4; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid12 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 3, LINKS) */ bottom: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ left: 19%; /* 250421 lz: Umsetzung Figma-Layout hm */ right: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ top: 50%; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid11 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 3, RECHTS) */ right: -17%; /* 250421 lz: Umsetzung Figma-Layout hm */ bottom: 30%; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 3; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid06 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 4, LINKS) */ bottom: 13%; /* 250421 lz: Umsetzung Figma-Layout hm */ left: 24%; /* 250421 lz: Umsetzung Figma-Layout hm */ right: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ top: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid08 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 4, MITTE) */ bottom: 18%; /* 250421 lz: Umsetzung Figma-Layout hm */ left: 50%; /* 250421 lz: Umsetzung Figma-Layout hm */ right: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ top: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid13 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 4, RECHTS) */ bottom: 13%; /* 250421 lz: Umsetzung Figma-Layout hm */ left: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ right: -20%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid01 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 5, LINKS) */ bottom: 0%; /* 250421 lz: Umsetzung Figma-Layout hm */ left: 20%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 4; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid14 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 5, MITTE) */ bottom: -1%; /* 250421 lz: Umsetzung Figma-Layout hm */ left: 50%; /* 250421 lz: Umsetzung Figma-Layout hm */ right: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ top: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 3; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .polaroidhaufen .polaroid07 { /* STARTSEITE > WALLPAPER > POLAROIDS > EINZELNES POLAROID (ZEILE 5, RECHTS) */ bottom: 1%; /* 250421 lz: Umsetzung Figma-Layout hm */ left: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ right: -17%; /* 250421 lz: Umsetzung Figma-Layout hm */ top: unset; /* 250421 lz: Umsetzung Figma-Layout hm */ z-index: 3; /* 250421 lz: Umsetzung Figma-Layout hm */ } #welcome h1 { /* STARTSEITE > WALLPAPER > UEBERSCHRIFT */ font-size: 11cqw !important; /* 250421 lz: Umsetzung Figma-Layout hm */ margin: 10vh auto 0 !important /* 250421 lz: Umsetzung Figma-Layout hm */ } #welcome blockquote { /* STARTSEITE > WALLPAPER > ZITAT (CONTAINER) */ transform: rotate(-1.5deg); /* 250421 lz: Umsetzung Figma-Layout hm */ } #welcome blockquote h2 { /* STARTSEITE > WALLPAPER > ZITAT */ font-size: 7cqw !important; /* 250421 lz: Umsetzung Figma-Layout hm */ padding: 0 10%; /* 250421 lz: Umsetzung Figma-Layout hm */ margin: 2vh auto; /* 250421 lz: Umsetzung Figma-Layout hm */ } #welcome blockquote cite { /* STARTSEITE > WALLPAPER > ZITAT-QUELLE */ font-size: 5cqw !important; /* 250421 lz: Umsetzung Figma-Layout hm */ margin: 0 auto; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .scroll-to-intro figure { /* STARTSEITE > WALLPAPER > BTN 'SCROLL DOWN' */ background-color: inherit; /* 250421 lz: Umsetzung Figma-Layout hm */ } .home .scroll-to-intro { /* STARTSEITE > WALLPAPER > BUTTON 'SCROLL TO INTRO' */ bottom: -100px; /* 250622 lz: Pos. korr (weicht von Unterseiten ab) */ } .home .scroll-to-intro:hover { /* STARTSEITE > WALLPAPER > BUTTON 'SCROLL TO INTRO' (MOUSEOVER) */ bottom: -120px; /* 250622 lz: Pos. korr (weicht von Unterseiten ab) */ } /* --- SECTION 'TEASER' --- */ #teaser .teaser-inner { /* SECTION 'TEASER' > TEASER-CONTAINER */ display: block; /* 250322 lz: LightSlider ergaenzen */ } #teaser .teaser-inner > .wp-block-group { /* SECTION 'TEASER' > EINZELTEASER */ cursor: grab; /* 250321: LightSlider ergaenzen */ padding: 40px 30px 100px; /* 250321: LightSlider ergaenzen */ } #teaser .teaser-inner > .wp-block-group > h2 { /* SECTION 'TEASER' > HEADLINE */ font-size: 36px !important; /* 260326 lz: Figma-Layout hm */ line-height: 38px !important; /* 260326 lz: Figma-Layout hm */ text-align: left; /* 260326 lz: Figma-Layout hm */ } /* --- SECTION 'KONTAKT' --- */ .ansprechpartner tr { /* SECTION 'KONTAKT' > TABELLE 'ANSPRECHPARTNER' > ZEILEN */ display: flex; flex-flow: row wrap; white-space: unset !important; } .ansprechpartner td { /* SECTION 'KONTAKT' > TABELLE 'ANSPRECHPARTNER' > ZELLEN */ width: 100% !important; } .ansprechpartner tr:not(:first-child) td:first-child { /* SECTION 'KONTAKT' > TABELLE 'ANSPRECHPARTNER' > NAMENSZEILEN */ font-weight: 600; /* 250407 lz: Fetten */ margin-top: 20px !important; /* 250407 lz: Absatzabstand ergeanzen */ } } /*-----------------------------------------------------------------------------------*/ /* 5.2 - PAGES - SOZIALES KAUFHAUS (ROT / BRAUN) /*-----------------------------------------------------------------------------------*/ ul.abgestaubt li:before { /* AUFZAHLUNGSZEICHEN (BEREICH 'ABGESTAUBT') */ background: var(--braun); /* 240710 lz: Umsetzung Figma-Layout hm */ } ul.heimart li:before { /* AUFZAHLUNGSZEICHEN (BEREICH '2. HEIMART') */ background: var(--rot); /* 240710 lz: Umsetzung Figma-Layout hm */ } /* SECTION 'FINDEN' */ #finden figure { /* SECTION 'FINDEN' > ICONS */ height: 160px; /* 240710 lz: Hoehen vereinheitlichen trotz untersch. Bildgroessen */ } #finden .wp-block-column:nth-child(2) figure { /* SECTION 'FINDEN' > ICONS */ display: flex; /* 240710 lz: Bild vert. zentrieren */ align-items: center; /* 240710 lz: Bild vert. zentrieren */ justify-content: center; /* 240710 lz: Bild vert. zentrieren */ width: 130px; /* 240710 lz: Hoehen vereinheitlichen trotz untersch. Bildgroessen */ } /* SECTION 'NICHT NUR KLEIDUNG' */ #nichtnurkleidung figure { /* SECTION 'NICHT NUR KLEIDUNG > ICON */ transform: rotate(20deg) translateX(-50%); /* 240710 lz: Drehung + Pos korr */ left: 60%; /* 240710 lz: Drehung + Pos korr */ position: relative; /* 240710 lz: Drehung + Pos korr */ } /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { .page-id-13 .polaroidhaufen .icon01 { /* SEITE 'KAUFHAUS' > WALLPAPER > SCHMUCKGRAFIK 1/2 */ left: 14%; /* 250411 lz: Umsetzung Figma-Layout hm */ top: 58%; /* 250411 lz: Umsetzung Figma-Layout hm */ } .page-id-13 .polaroidhaufen .icon01 img { /* SEITE 'KAUFHAUS' > WALLPAPER > SCHMUCKGRAFIK 1/2 > BILD */ width: 25vw !important; /* 250411 lz: Umsetzung Figma-Layout hm */ } .page-id-13 .polaroidhaufen .icon02 { /* SEITE 'KAUFHAUS' > WALLPAPER > SCHMUCKGRAFIK 2/2 */ right: 4%; /* 250411 lz: Umsetzung Figma-Layout hm */ bottom: 50%; /* 250411 lz: Umsetzung Figma-Layout hm */ } .page-id-13 .polaroidhaufen .icon02 img { /* SEITE 'KAUFHAUS' > WALLPAPER > SCHMUCKGRAFIK 2/2 > BILD */ width: 14vw !important; /* 250411 lz: Umsetzung Figma-Layout hm */ } .page-id-13 .polaroidhaufen .polaroid03 { /* SEITE 'KAUFHAUS' > WALLPAPER > EINZELNES POLAROID 3/4 */ z-index: 3; /* 250411 lz: Weiter nach vorn bringen */ } .page-id-13 .polaroidhaufen .polaroid04 { /* SEITE 'KAUFHAUS' > WALLPAPER > EINZELNES POLAROID 4/4 */ z-index: 2; /* 250411 lz: Weiter nach hinten bringen */ } } /*-----------------------------------------------------------------------------------*/ /* 5.3 - PAGES - GRATA (BLAU) /*-----------------------------------------------------------------------------------*/ .page-id-339 .polaroidhaufen .icon01 { /* SEITE 'GRATA' > WALLPAPER > SCHMUCKGRAFIK */ transform: rotate(0deg); /* 240710 lz: Umsetzung Figma-Layout hm */ left: 22%; /* 240710 lz: Umsetzung Figma-Layout hm */ top: 14%; /* 240710 lz: Umsetzung Figma-Layout hm */ } .page-id-339 .polaroidhaufen .icon01 img { /* SEITE 'GRATA' > WALLPAPER > SCHMUCKGRAFIK > BILD */ width: 10vw !important; /* 240710 lz: Umsetzung Figma-Layout hm */ max-width: 191px; /* 240710 lz: = Skalierung bei max. Satzspiegelbreite (1920px) */ } .page-id-339 .zahl { /* SEITE 'GRATA' > FAKTEN */ font-size: 8em !important; /* 240710 lz: Umsetzung Figma-Layout hm */ } /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { .page-id-339 .polaroidhaufen .icon01 { /* SEITE 'GRATA' > WALLPAPER > SCHMUCKGRAFIK */ top: 7%; /* 240710 lz: Umsetzung Figma-Layout hm */ } .page-id-339 .polaroidhaufen .icon01 img { /* SEITE 'GRATA' > WALLPAPER > SCHMUCKGRAFIK > BILD */ width: 23vw !important; /* 250411 lz: Umsetzung Figma-Layout hm */ } .page-id-339 .polaroidhaufen .polaroid01 { /* SEITE 'GRATA' > WALLPAPER > POLAROIDS (UNTERSEITEN) > EINZELNES POLAROID 1/4 */ left: 14%; /* 250411 lz: Figma-Layout hm */ top: 29%; /* 250411 lz: Figma-Layout hm */ } .page-id-339 .polaroidhaufen .polaroid03 { /* SEITE 'GRATA' > WALLPAPER > POLAROIDS (UNTERSEITEN) > EINZELNES POLAROID 3/4 */ right: -18%; /* 250411 lz: Figma-Layout hm */ top: 29%; /* 250411 lz: Figma-Layout hm */ } } /*-----------------------------------------------------------------------------------*/ /* 5.4 - PAGES - GEMEINSCHAFT (GRUEN) /*-----------------------------------------------------------------------------------*/ .page-id-377 .polaroidhaufen .icon01 { /* SEITE 'GEMEINSCHAFT' > WALLPAPER > SCHMUCKGRAFIK */ transform: rotate(0deg); /* 240710 lz: Umsetzung Figma-Layout hm */ left: 24%; /* 240710 lz: Umsetzung Figma-Layout hm */ top: 4%; /* 240710 lz: Umsetzung Figma-Layout hm */ } .page-id-377 .polaroidhaufen .icon01 img { /* SEITE 'GEMEINSCHAFT' > WALLPAPER > SCHMUCKGRAFIK > BILD */ width: 13vw !important; /* 240710 lz: Umsetzung Figma-Layout hm */ max-width: 250px; /* 240710 lz: = Skalierung bei max. Satzspiegelbreite (1920px) */ } /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { .page-id-377 .polaroidhaufen .polaroid01, /* SEITE 'GEMEINSCHAFT' > WALLPAPER > POLAROID 1/4' */ .page-id-377 .polaroidhaufen .polaroid03 { /* SEITE 'GEMEINSCHAFT' > WALLPAPER > POLAROID 3/4' */ z-index: 2; /* 250421 lz: Motiv mit Beschriftung nach vorn holen */ } .page-id-377 .polaroidhaufen .polaroid02, /* SEITE 'GEMEINSCHAFT' > WALLPAPER > POLAROID 2/4' */ .page-id-377 .polaroidhaufen .polaroid04 { /* SEITE 'GEMEINSCHAFT' > WALLPAPER > POLAROID 4/4' */ z-index: 1; /* 250421 lz: Motiv mit Beschriftung nach vorn holen */ } .page-id-377 .icon-calendar { /* SEITE 'GEMEINSCHAFT' > ICON 'KALENDER' */ margin: 0 auto; /* 250403 lz: Mobiloptimierung */ width: 50%; /* 250403 lz: Mobiloptimierung */ } .page-id-377 .polaroidhaufen .icon01 { /* SEITE 'GEMEINSCHAFT' > WALLPAPER > SCHMUCKGRAFIK 2/2 */ right: 4%; /* 250411 lz: Umsetzung Figma-Layout hm */ bottom: 50%; /* 250411 lz: Umsetzung Figma-Layout hm */ transform: rotate(6deg); /* 250417 lz: Umsetzung Figma-Layout hm */ } .page-id-377 .polaroidhaufen .icon01 img { /* SEITE 'GEMEINSCHAFT' > WALLPAPER > SCHMUCKGRAFIK 2/2 > BILD */ width: 25vw !important; /* 250417 lz: Umsetzung Figma-Layout hm */ } } /*-----------------------------------------------------------------------------------*/ /* 5.5 - PAGES - UNTERSTUETZEN (GELB) /*-----------------------------------------------------------------------------------*/ /* SECTION 'WALLPAPER' */ .page-id-601 .scroll-to-intro figure { /* SEITE 'UNTERSTUETZEN' > WALLPAPER > BTN 'TO INTRO' */ background-color: inherit; /* 250421 lz: Nicht umfaerben */ } /* SECTION 'INTRO' */ .page-id-601 #intro .wp-block-column:first-child { align-content: flex-start; /* 240821 lz: Umsetzung Figma-Layout hm */ display: flex; /* 240821 lz: Umsetzung Figma-Layout hm */ flex-flow: row wrap; /* 240821 lz: Umsetzung Figma-Layout hm */ } .farbhintergrund { /* Texte mit Farbhinterlegung */ position: relative; /* 240821 lz: Before-Element an Eltern-DIV ausrichten */ transform: rotate(-4deg); /* 240822 lz: Umsetzung Figma-Layout hm */ margin-top: -10px; /* 240821 lz: Umsetzung Figma-Layout hm */ padding: 20px; /* 240821 lz: Umsetzung Figma-Layout hm */ height: fit-content; /* 240821 lz: Umsetzung Figma-Layout hm */ width: fit-content; /* 240821 lz: Umsetzung Figma-Layout hm */ } .farbhintergrund:before { /* Texte mit Farbhinterlegung > Farbhintergrund */ content: ""; /* 240821 lz: Figma-Layout hm */ position: absolute; /* 240821 lz: Umsetzung Figma-Layout hm */ width: 100%; /* 240821 lz: Umsetzung Figma-Layout hm */ height: 100%; /* 240821 lz: Umsetzung Figma-Layout hm */ background: var(--gelb); /* 240821 lz: Umsetzung Figma-Layout hm */ top: 0; /* 240821 lz: Umsetzung Figma-Layout hm */ left: 0; /* 240821 lz: Umsetzung Figma-Layout hm */ transform: rotate(-2deg); /* 240822 lz: Umsetzung Figma-Layout hm */ z-index: -1; /* 240821 lz: Hinter Text anordnen */ } #zeitspenden .wp-block-image, /* Abschnitt 'Zeitspenden' > Bebilderung */ #geldspenden .wp-block-image { /* Abschnitt 'Geldspenden' > Bebilderung */ margin-top: -40px; /* 240822 lz: Bild ausruecken */ } /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { .page-id-601 .polaroidhaufen .polaroid03 { /* SEITE 'UNTERSTUETZEN' > WALLPAPER > POLAROID 3/4' */ z-index: 4; /* 250421 lz: Motiv mit Beschriftung nach vorn holen */ } } /*-----------------------------------------------------------------------------------*/ /* 5.6 - PAGES - VEREIN (GELB) /*-----------------------------------------------------------------------------------*/ /* Maximum width of 1079 pixels (MOBILE) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1079px) { .page-id-406 .polaroidhaufen .icon01 { /* SEITE 'VEREIN' > WALLPAPER > SCHMUCKGRAFIK 2/2 */ left: 5%; /* 250421 lz: Mobiloptimierung */ top: 59%; /* 250421 lz: Mobiloptimierung */ } .page-id-406 .polaroidhaufen .icon01 img { /* SEITE 'VEREIN' > WALLPAPER > SCHMUCKGRAFIK 2/2 > BILD */ width: 25vw !important; /* 250421 lz: Mobiloptimierung */ } .page-id-406 #collage figure { /* BLOCK 'COLLAGE' > BILD-ELEMENT */ margin-left: 0 !important; /* 250427 lz: Da keine Headline anders zu behandeln als andere Unterseiten-Collagen */ } } /*-----------------------------------------------------------------------------------*/ /* 5.7 - PAGES - IMPRESSUM + DATENSCHUTZ /*-----------------------------------------------------------------------------------*/ .page-id-41 #content, /* SEITE 'DATENSCHUTZ' > SEITEN-INHALT */ .page-id-3 #content { /* SEITE 'IMPRESSUM' > SEITEN-INHALT */ padding-top: 100px; /* 250426 lz: Abstand vor Headline ergeanzen */ } .page-id-3 #intro, /* SEITE 'IMPRESSUM' ... */ .page-id-41 #intro { /* SEITE 'DATENSCHUTZ' ... */ padding-top: 0; /* 220217 lz: Abstand vor entf */ } .page-id-41 h1, /* SEITE 'DATENSCHUTZ' > SEITEN-TITEL */ .page-id-3 h1 { /* SEITE 'IMPRESSUM' > SEITEN-TITEL */ line-height: 40px; /* 220218 lz: Seitentitel naeher an Icon ruecken */ margin: 40px 0; /* 220218 lz: Hor. Einrueckung entf */ max-width: none; /* 250426 lz: Std-Wert aushebeln */ } .page-id-3 h2, /* SEITE 'IMPRESSUM' > UEBERSCHRIFTEN */ .page-id-41 h2 { /* SEITE 'DATENSCHUTZ' > UEBERSCHRIFTEN */ font-size: 30px !important; /* 250426 lz: Umsetzung Figma-Layout hm */ margin: 60px 0 10px; /* 220218 lz: Hor. Einrueckung entf */ max-width: none; /* 250426 lz: Std-Wert aushebeln */ } .page-id-41 h3, /* SEITE 'DATENSCHUTZ' > UEBERSCHRIFTEN EBENE 3 */ .page-id-3 h3 { /* SEITE 'IMPRESSUM' > UEBERSCHRIFTEN EBENE 3 */ font-size: 22px !important; /* 250426 lz: Kleiner formatieren */ margin: 40px 0 20px; /* 220218 lz: Hor. Einrueckung entf */ } .page-id-41 h4, /* SEITE 'DATENSCHUTZ' > UEBERSCHRIFTEN EBENE 4 */ .page-id-3 h4 { /* SEITE 'IMPRESSUM' > UEBERSCHRIFTEN EBENE 4 */ font-size: 18px !important; /* 250426 lz: = Fliesstext */ font-weight: bold; /* 2021103 lz: Fett formatieren */ margin: 40px 0 0; /* 220218 lz: Hor. Einrueckung entf */ text-transform: none !important; /* 201103 lz: In Grosskleinschreibung formatieren */ } .page-id-41 p, /* SEITE 'DATENSCHUTZ' > FLIESSTEXT */ .page-id-3 p { /* SEITE 'IMPRESSUM' > FLIESSTEXT */ margin: 0 0 20px; /* 220218 lz: Hor. Einrueckung entf */ } .page-id-41 #content li { /* SEITE 'DATENSCHUTZ' > CONTENT-BEREICH > UEBERSCHRIFTEN EBENE 4 */ margin-bottom: 20px; /* 201103 lz: = p */ margin-left: 40px; /* 220218 lz: Hor. Einrueckung entf */ max-width: calc(100% - 40px); /* 220218 lz: Hor. Einrueckung korr */ } /* Maximum width of 1079 pixels (MOBILE > BIG) ----------------------------------------------------------------*/ @media screen and (max-width: 1079px) { .page-id-41 #content, /* SEITE 'DATENSCHUTZ' > SEITEN-INHALT */ .page-id-3 #content { /* SEITE 'IMPRESSUM' > SEITEN-INHALT */ padding-top: 20px; /* 250426 lz: Abstand vor Headline ergeanzen */ } .page-id-3 #intro::before, /* SEITE 'IMPRESSUM' > ICON-HEADER */ .page-id-41 #intro::before { /* SEITE 'DATENSCHUTZ' > ICON-HEADER */ top: -140px; /* 220218 lz: Vert. Pos. korr */ } .page-id-41 h1, /* SEITE 'DATENSCHUTZ' > SEITEN-TITEL */ .page-id-3 h1 { /* SEITE 'IMPRESSUM' > SEITEN-TITEL */ margin: 20px 0 40px !important; /* 220218 lz: Abstand nach verringern */ } .page-id-41 h2, /* SEITE 'DATENSCHUTZ' > H2 */ .page-id-3 h2 { /* SEITE 'IMPRESSUM' > H2 */ margin-top: 40px; /* 201103 lz: Verringern */ text-align: left; /* 201103 lz: Zentrierung aushebeln */ } .page-id-41 h4, /* SEITE 'DATENSCHUTZ' > UEBERSCHRIFTEN EBENE 4 */ .page-id-3 h4 { /* SEITE 'IMPRESSUM' > UEBERSCHRIFTEN EBENE 4 */ font-size: 16px; /* 220218 lz: = mobiler Fliesstext */ } .page-id-41 #content li { /* SEITE 'DATENSCHUTZ' > CONTENT-BEREICH > UEBERSCHRIFTEN EBENE 4 */ margin-left: 30px; /* 220218 lz: Einrueckung links verringern */ max-width: unset; /* 220218 lz: Einrueckung rechts entf */ } } /*-----------------------------------------------------------------------------------*/ /* 6.0 - POSTS /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 6.1 - POSTS - UEBERSICHTSSEITEN /*-----------------------------------------------------------------------------------*/ /* --- BEITRAGSTEASER --- */ .post-teaser { /* BEITRAGSTEASER */ background-color: #fff; /* = 201018 lz: Farb-Animation bei Hover */ display: flex; /* 201018 lz: Zweispalten-Raster definieren */ flex-flow: row nowrap; /* 201018 lz: Zweispalten-Raster definieren */ margin: 0 0 40px 0; /* 201017 lz: Teaser ganzzeilig gestalten */ position: relative; /* 190530 lz: Hover-Effekt erzeugen */ top: 0; /* 190530 lz: Hover-Effekt erzeugen */ transition: 0.5s ease !important; /* 201018 lz: Weiche Hover-Animation gestalten */ } .post-teaser:hover { /* BEITRAGSTEASER (HOVER) */ /* box-shadow: 0px 10px 60px rgba(0,0,0,0.2); /* 190530 lz: Hover-Effekt (Schatten) erzeugen */ background-color: var(--beige) !important; /* 201018 lz: = CI-Hellbeige faerben */ opacity: 1 !important; /* 201018 lz: Standardstil ueberschreiben */ transition: 0.5s ease; /* 201018 lz: Weiche Hover-Animation gestalten */ } .post-teaser-bildspalte { /* BEITRAGSTEASER > BILDSPALTE */ width: 50%; /* 201018 lz: Zweispalten-Raster definieren */ order: 1; /* 201018 lz: Spaltenfolge definieren */ } .post-teaser:nth-child(even) .post-teaser-bildspalte { /* BEITRAGSTEASER (JEDER GERADE) */ order: 2; /* 201018 lz: Spaltenfolge umdrehen */ } .post-teaser-pic { /* BEITRAGSTEASER > BILDSPALTE */ background-position: center center; /* 180521 lz: Bild in Mobilbeitrag absolut zentrieren */ background-size: 101%; /* 201023 lz: Weiße Blitzer vermeiden */ left: 0; /* 170521 lz: Hor. Scrollbalken entfernen */ padding-bottom: 66.6%; /* 201023 lz: = Teaser Desktop aut. skalieren auf 500 x 333px */ position: relative; /* 170519 lz: Textueberlappung verhindern */ width: 100%; /* 201018 lz: Zweispalten-Raster definieren */ } .post-teaser:hover .post-teaser-pic, /* BEITRAGSTEASER (MOUSEOVER) > THUMBNAIL */ .post-teaser:focus .post-teaser-pic { /* BEITRAGSTEASER (IM FOKUS) > THUMBNAIL */ background-size: 106%; /* 190530 lz: Hover-Effekt (Zoom) erzeugen */ opacity: .5; /* 201018 lz: Hover-Effekt (Abblenden) erzeugen */ } .post-teaser-pic-content { /* BEITRAGSTEASER > BILDSPALTE > INHALT */ bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .post-teaser-textspalte { /* BEITRAGSTEASER > TEXTSPALTE */ display: flex; /* 201018 lz: Inhalte abs. zentrieren */ flex-flow: row wrap; /* 201018 lz: Inhalte umbrechen lassen */ justify-content: center; /* 201018 lz: Inhalte abs. zentrieren */ align-content: center; /* 201018 lz: Inhalte abs. zentrieren */ order: 2; /* 201018 lz: Spaltenfolge definieren */ padding: 20px; /* 201031 lz: Zu knappe Textraender verhindern */ width: 50%; /* 201018 lz: Zweispalten-Raster definieren */ } .post-teaser:nth-child(even) .post-teaser-textspalte { /* BEITRAGSTEASER (JEDER GERADE) */ order: 1; /* 201018 lz: Spaltenfolge umdrehen */ } .post-teaser-category { /* BEITRAGSTEASER > KATEGORIE */ font-family: 'Walkout'; /* 201018 lz: = Zitate */ font-size: 30px; /* 201018 lz: Verkleinern */ font-style: normal !important; /* 201018 lz: = Zitate */ font-weight: normal; /* 201018 lz: = Zitate */ line-height: 1em; /* 201018 lz: = Zitate */ margin: -10px 0 20px !important; /* 201018 lz: = Zitate */ } .post-teaser-title { /* BEITRAGSTEASER > TITEL */ text-align: center; /* 201018 lz: Hor. zentrieren */ } .post-teaser-date { /* BEITRAGSTEASER > DATUM */ font-size: 16px; /* 201018 lz: Verkleinern */ text-align: center; /* 201018 lz: Hor. zentrieren */ } /* MAX. SIZE OF 1079px (MOBILE > BIG) ----------------------------------------------------------------*/ @media screen and (max-width: 1079px) { .post-teaser { /* BEITRAGSTEASER > BILDSPALTE */ background-color: var(--beige) !important; /* 220216 lz: Mobil dauerhaft hervorheben */ flex-flow: row wrap; /* 201018 lz: Spalten umbrechen lassen */ } .post-teaser-bildspalte { /* BEITRAGSTEASER > BILDSPALTE */ width: 100%; /* 201018 lz: Einspalten-Raster definieren */ order: 1 !important; /* 201018 lz: Spaltenordnung fixieren */ } .post-teaser-textspalte { /* BEITRAGSTEASER > BILDSPALTE */ width: 100%; /* 201018 lz: Einspalten-Raster definieren */ order: 2 !important; /* 201018 lz: Spaltenordnung fixieren */ } .post-teaser-category { /* BEITRAGSTEASER > KATEGORIE */ font-size: 24px; /* 201018 lz: Verkleinern */ margin: 20px 0 0 0 !important; /* 201018 lz: Abstand vor erhoehen */ } .post-teaser-title { /* BEITRAGSTEASER > TITEL */ font-size: 24px; /* 200704 lz: = h2 */ margin: 20px 0 0 0; /* 201018 lz: Verringern */ } .post-teaser-date { /* BEITRAGSTEASER > DATUM */ font-size: 16px; /* 201018 lz: Verkleinern */ text-align: center; /* 201018 lz: Hor. zentrieren */ margin: 10px 0 20px 0; /* 201018 lz: Verringern */ } } /*-----------------------------------------------------------------------------------*/ /* 6.2 - POSTS - BEITRAGSSEITE /*-----------------------------------------------------------------------------------*/ .single-post #main-wrap { /* BEITRAG > INHALTSCONTAINER */ background: #f6e0dd; /* 180508 lz: CI-Rosa faerben */ } #post-container { /* BEITRAG > SPALTENCONTAINER */ margin: 0 auto; /* 170519 lz: = .entry-content */ max-width: 800px; /* 190319 lz: Satzspiegel hor. begrenzen */ padding: 150px 0 80px 0; /* 190915 lz: Abstand zum Footer ergaenzt */ } /* BEITRAGSKOPF */ #post { /* BEITRAGSSEITE > SECTION 'POST' */ padding-bottom: 0; /* 201018 lz: Abstand zum Footer verringern */ } #post-header { /* BEITRAGSSEITE > HEADERBANNER */ display: flex; /* 201018 lz: Inhalte layouten */ flex-flow: row wrap; /* 201018 lz: Inhalte layouten */ justify-content: center; /* 201018 lz: Inhalte hor. zentrieren */ align-items: center; /* 201018 lz: Inhalte vert. zentrieren */ width: 100%; /* 191018 lz: Mobil randabfallend gestalten */ } #post-title { /* BEITRAG > HEADLINE */ font-family: 'Raleway'; /* 201018 lz: = H1 Seite 'BARBARA' */ font-weight: 100; /* 201018 lz: = H1 Seite 'BARBARA' */ font-size: 48px; /* 201018 lz: = H1 Seite 'BARBARA' */ line-height: 1.2em; /* 201018 lz: = H1 Seite 'BARBARA' */ margin: 20px 0 50px !important; /* 201025 lz: Auch mobil nutzen */ text-transform: uppercase; /* 201018 lz: = H1 Seite 'BARBARA' */ text-align: center; /* 201018 lz: Hor. zentrieren */ width: 100%; /* 201018 lz: Ganzzeilig gestalten */ } #post-category { /* BEITRAG > KATEGORIE */ font-family: 'Walkout'; /* 201018 lz: = .post-teaser-category */ font-size: 30px; /* 201018 lz: = .post-teaser-category */ font-style: normal !important; /* 201018 lz: = .post-teaser-category */ font-weight: normal; /* 201018 lz: = .post-teaser-category */ line-height: 1em; /* 201018 lz: = .post-teaser-category */ margin: 0 0 0 40px !important; /* 201018 lz: Steg zw. Datum & Kategorie ergaenzen */ } /* CONTENT */ #post-content h2 { /* BEITRAG > INHALTSCONTAINER > ZWISCHEN-ÜBERSCHRIFTEN */ font-size: 24px; /* 190617 lz: Dezenter gestalten */ text-transform: none; /* 190617 lz: Dezenter gestalten */ } #post-content h2:first-child, /* BEITRAGS-INHALT > ERSTE SUBHEAD 1 */ #post-content h3:first-child { /* BEITRAGS-INHALT > ERSTE SUBHEAD 2 */ margin-top: 0 !important; /* 170514 lz: Abstand vor entfernen */ } /* MAX. SIZE OF 1079px (MOBILE > BIG) ----------------------------------------------------------------*/ @media screen and (max-width: 1079px) { #post-container { /* BEITRAG > SPALTENCONTAINER */ padding: 75px 0 0 0; /* 191018 lz: Inhalt unter Mobilheader verschieben */ } #post-title { /* BEITRAG > HEADLINE */ font-size: 36px !important; /* 201105 lz: Verkleinern fuer lange Headlines */ hyphens: auto !important; /* 201025 lz: Mobiloptimierung */ margin: 20px 0 40px !important; /* 201105 lz: Abstand nach verringern */ } } /* MAX. SIZE OF 820px (MOBILE > VOR UNTERSCHREITUNG BEITRAGS-SATZSPIEGEL) ----------------------------------------------------------------*/ @media screen and (max-width: 820px) { #post-content { /* BEITRAGS-INHALT */ padding: 0 6% 20px; /* 200704 lz: Hor. Innenabstand relativ gestalten */ overflow: hidden; /* 200704 lz: Hor. Scrollbalken verhindern */ } #post-header { /* BEITRAG > HEADER */ margin-top: 10px; /* 201025 lz: Beschnitt Oberlaengen Schreibschrift vermeiden */ } #post-header.slider { /* BEITRAGSSEITE > HEADERBANNER (SLIDER STATT BILD) */ padding-bottom: calc(57% + 24px); /* 200704 lz: SLIDER-PAGINIERUNG AUSGLEICHEN */ } } /*-----------------------------------------------------------------------------------*/ /* 7.0 - WIDGETS /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 8.0 - SHORTCODES /*-----------------------------------------------------------------------------------*/ .randlos { /* RANDLOSE ELEMENTE z.B. GRUPPEN */ margin: 0 !important; /* 240820 lz: Aussenabstaende entf */ padding: 0 !important; /* 240820 lz: Aussenabstaende entf */ } /*-----------------------------------------------------------------------------------*/ /* 9.0 - PLUGINS /*-----------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------*/ /* 9.1 - PLUGIN - SMART SLIDER (SLIDESHOWS, TESTIMONIALS) /*-----------------------------------------------------------------------------------*/ .slide_testimonial_innencontainer { /* SLIDER-TEMPLATE (LZ) > SLIDER-INNENCONTAINER */ max-width: 1300px !important; /* 240618 lz: = .teaser */ } .slide_testimonial_polaroid { /* SLIDER-TEMPLATE (LZ) > SLIDER-SPALTE 'BILD* */ align-items: center; /* 250330 lz: Bildverzerrung mobil beheben */ flex-flow: row !important; /* 250330 lz: Bildverzerrung mobil beheben */ } .slide_testimonial_zitat:before { /* SLIDER-TEMPLATE (LZ) > ZITAT > SCHMUCKGRAFIK */ background: url(img/slider-zitat-schmuckgrafik.svg) no-repeat; /* 240619 lz: Schmuckgrafik ergaenzen */ display: block !important; /* 240619 lz: Schmuckgrafik ergaenzen */ content: ''; /* 240619 lz: Schmuckgrafik ergaenzen */ position: absolute; /* 240619 lz: Schmuckgrafik ergaenzen */ left: 12px; /* 240619 lz: Schmuckgrafik ergaenzen */ top: -10px; /* 240619 lz: Schmuckgrafik ergaenzen */ width: 85px; /* 240619 lz: Schmuckgrafik ergaenzen */ height: 85px; /* 240619 lz: Schmuckgrafik ergaenzen */ } .slide_testimonial_bild { /* SLIDER-TEMPLATE (LZ) > FOTO (CONTAINER) */ height: 0; /* 250330 lz: Bildverzerrung mobil beheben */ padding-top: 100%; /* 250330 lz: Bildverzerrung mobil beheben */ position: relative; /* 250330 lz: Bildverzerrung mobil beheben */ } .slide_testimonial_bild > div { /* SLIDER-TEMPLATE (LZ) > FOTO (INNEN-CONTAINER) */ position: absolute; /* 250330 lz: Bildverzerrung mobil beheben */ top: 0; /* 250330 lz: Bildverzerrung mobil beheben */ left: 0; /* 250330 lz: Bildverzerrung mobil beheben */ bottom: 0; /* 250330 lz: Bildverzerrung mobil beheben */ right: 0; /* 250330 lz: Bildverzerrung mobil beheben */ } .slide_testimonial_bild > div > img { /* SLIDER-TEMPLATE (LZ) > FOTO */ max-height: 100% !important; /* 250330 lz: Bildverzerrung mobil beheben */ } @media screen and (max-width: 1079px) { .slide_testimonial_container > div { /* SLIDER-TEMPLATE (LZ) > SLIDER-AUSSENCONTAINER */ display: block !important; /* 250403 lz: Bugfix ' Hoehenabweichung zu Inhalt' */ padding: 0 !important; /* 250403 lz: Mobiloptimierung */ } .slide_testimonial_innencontainer { /* SLIDER-TEMPLATE (LZ) > SLIDER-INNENCONTAINER */ margin: 50px 30px 90px !important; /* 250403 lz: Kompakter gestalten */ } .slide_testimonial_innencontainer > div > div { /* SLIDER-TEMPLATE (LZ) > SPALTEN-CONTAINER */ justify-content: center !important; /* 250330 lz: Mobiloptimierung */ } .slide_testimonial_polaroid { /* SLIDER-TEMPLATE (LZ) > BILD-SPALTE */ margin: 0 16% !important; /* 250403 lz: Polaroidgroesse responsiv verringern */ } .slide_testimonial_polaroid > div { /* SLIDER-TEMPLATE (LZ) > SLIDER-SPALTE 'BILD* > INNEN-CONTAINER */ padding: 5% 5% 0 !important; /* 250405 lz: Polaroidrahmen responsiv verkleinern */ } .slide_testimonial_name { /* SLIDER-TEMPLATE (LZ) > SLIDER-SPALTE 'BILD* > BILDUNTERSCHRIFT */ margin: 0 !important; /* 250405 lz: Mobiloptimierung */ } .slide_testimonial_name > div > div { /* SLIDER-TEMPLATE (LZ) > SLIDER-SPALTE 'BILD* > BILDUNTERSCHRIFT > TEXT-CONTAINER */ container-type: size; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ margin: 0 -5%; /* 250405 lz: Textfeld vergroessern */ padding-bottom: 25%; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ position: relative; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ } .slide_testimonial_name p { /* SLIDER-TEMPLATE (LZ) > SLIDER-SPALTE 'BILD* > BILDUNTERSCHRIFT > TEXT-INHALT */ font-size: 13cqw !important; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ left: 50%; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ line-height: 0.8em !important; /* 250405 lz: Textfeld soll bei Zweizeiligkeit nicht zerschiessen */ position: absolute; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ top: 50%; /* 250405 lz: Namen proportional nach Containerbreite skalieren */ transform: translateX(-50%) translateY(-52%); /* 250405 lz: Namen proportional nach Containerbreite skalieren */ width: 110% !important; /* 250405 lz: Textfeld vergroessern */ } .slide_testimonial_textspalte { /* SLIDER-TEMPLATE (LZ) > TEXT-SPALTE */ margin: 30px 4% 0 8% !important; /* 250405 lz: Mobiloptimierung */ } .slide_testimonial_zitat > div { /* SLIDER-TEMPLATE (LZ) > ZITAT */ font-size: 18px !important; /* 250330 lz: = Fliesstext */ padding: 0 !important; /* 250403 lz: Mobiloptimierung */ } .slide_testimonial_zitat:before { /* SLIDER-TEMPLATE (LZ) > ZITAT > SCHMUCKGRAFIK */ left: -34px; /* 250330 lz: Mobiloptimierung */ top: -18px; /* 250403 lz: Mobiloptimierung */ width: 50px; /* 250330 lz: Mobiloptimierung */ height: 50px; /* 250330 lz: Mobiloptimierung */ } } /*-----------------------------------------------------------------------------------*/ /* 9.2 - PLUGIN - PAGE SCROLL TO ID /*-----------------------------------------------------------------------------------*/ #ps2id-dummy-offset { /* SCROLL-ZIEL VON ANKERLINKS > VERTIKALER VERSATZ */ height: 100px; /* 240619 lz: = header */ } @media screen and (max-width: 1079px) { #ps2id-dummy-offset { /* SCROLL-ZIEL VON ANKERLINKS > VERTIKALER VERSATZ */ height: 55px; /* 250407 lz: = header */ } } /*-----------------------------------------------------------------------------------*/ /* 9.3 - PLUGIN - CONTACT FORM 7 /*-----------------------------------------------------------------------------------*/ form { /* FORMULARE */ clear: both; display: flex; /* 201031 lz: Zweispalten-Raster erzeugen */ flex-flow: row wrap; /* 201031 lz: Zweispalten-Raster erzeugen */ justify-content: space-between; /* 201031 lz: Zweispalten-Raster erzeugen */ } form p { /* FORMULARE > FELDER (ALLG) */ width: 100%; /* 220216 lz: Gesamte Zeilenbreite einnehmen */ } form p:nth-child(5) { /* FORMULARE > FORMULARFELD 'HONEYPOT 1' */ margin: 0 !important; /* 220216 lz: Verstecken */ } .cf7-field-broccoli, /* FORMULARFELD 'MAIL' */ .cf7-field-tel, /* FORMULARFELD 'TEL' */ .cf7-field-themen, /* FORMULARFELD 'THEMEN' */ .cf7-field-zeiten { /* FORMULARFELD 'ZEITEN' */ width: calc(50% - 50px) ; /* 201031 lz: Zweispalten-Raster erzeugen */ margin: 20px 0; /* 201031 lz: Abstand vor erhoehen */ } input, /* EINGABEFELDER ALLG. */ textarea { /* TEXTFELDER */ -webkit-appearance: none; /* 201107 lz: Bugfix 'Abweichende Senden-Button-Darstellung in iOS' (https://bit.ly/2U18zND) */ -moz-appearance: none; /* 201107 lz: Bugfix 'Abweichende Senden-Button-Darstellung in iOS' (https://bit.ly/2U18zND) */ appearance: none; /* 201107 lz: Bugfix 'Abweichende Senden-Button-Darstellung in iOS' (https://bit.ly/2U18zND) */ background-color: rgba(0,0,0,0); /* 201031 lz: Transparent gestalten */ border: none; /* 190525 lz: Kontur entfernen */ border-bottom: 2px solid #000 !important; /* 201031 lz: Unterstreichung erstellen */ color: #000; font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 190523 lz: = body */ font-size: 100%; /* 201031 lz: = body */ line-height: 1.5em; /* 190523 lz: = body */ margin: 0 !important; /* 170326 lz: Aussenabstaende unterbinden */ padding: 10px 15px 10px 0; /* 201031 lz: Linksbuendig gestalten */ transition: all .5s ease-out; /* 190525 lz: Weichen Uebergang erzeugen */ width: 100%; } .cf7-field-themen label, /* FORMULARFELD 'THEMEN' > BESCHRIFTUNG */ .cf7-field-zeiten label, /* FORMULARFELD 'ZEITEN' > BESCHRIFTUNG */ .cf7-field-nachricht label { /* FORMULARFELD 'NACHRICHT' > BESCHRIFTUNG */ display: block; /* 220218 lz: Als Subheadline formatieren */ font-weight: bold; /* 220218 lz: Als Subheadline formatieren */ margin: 10px 0 20px; /* 220218 lz: Als Subheadline formatieren */ } .wpcf7-form-control-wrap.your-time1 { /* FORMULARFELD 'ZEITEN' > UNTER-OPTION 'TAGE' */ display: block; /* 220218 lz: Steg ergaenzen */ margin-bottom: 30px; /* 220218 lz: Steg ergaenzen */ } /* CHECKBOXEN */ .wpcf7-checkbox, /* CHECKBOXEN */ .wpcf7-acceptance { /* ZUSTIMMUNG */ display: block; /* 180331 lz: Abstand zu vorigem Element erzeugen */ margin: 0; /* 180331 lz: Abstand zu vorigem Element erzeugen */ position: relative; /* 220216 lz: input-Feld rel. zu Eltern-DIV positionieren */ } .wpcf7-checkbox .wpcf7-list-item, /* CHECKBOXEN > OPTION */ .wpcf7-acceptance .wpcf7-list-item { /* ZUSTIMMUNG > OPTION */ display: block; /* 220216 lz: Auswahlen nebeneinander anordnen */ margin: 5px 60px 0 0; /* 220218 lz: Abstand rechts verringern */ } .wpcf7-checkbox .wpcf7-list-item input[type=checkbox], /* CHECKBOXEN > OPTION > ORIGINALFELD (CHECK) */ .wpcf7-acceptance .wpcf7-list-item input[type=checkbox] { /* ZUSTIMMUNG > OPTION > ORIGINALFELD (CHECK) */ appearance: unset; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ background: transparent; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ border: 0 !important; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ border-radius: 30px; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ cursor: pointer; /* 220217 lz: Hand-Cursor zeigen */ height: 30px; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ padding: 0; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ position: absolute; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ width: 30px; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ z-index: 1; /* 220216 lz: Umgestalten fuer Funktion 'exclusive' */ } .wpcf7-checkbox .wpcf7-list-item-label::before, /* CHECKBOXEN > OPTION > KAESTCHEN */ .wpcf7-acceptance .wpcf7-list-item-label::before { /* ZUSTIMMUNG > OPTION > KAESTCHEN */ background: var(--beige) url("img/check.svg") center center / 0px no-repeat !important; /* 220216 lz: CSS kombinieren */ border-radius: 15px; /* 201031 lz: Button abrunden */ content: ""; /* 180331 lz: Kaestchen-Symbol bei Aktivieren aus der Mitte wachsen lassen */ height: 30px; /* 180331 lz: Kaestchen vergroessern */ left: -45px; /* 190525 lz: Kaestchen links ausruecken */ position: absolute; /* 180331 lz: Kaestchen frei anordnen */ top: 2px; /* 201031 lz: Kaestchen vert. mit Textzeile zentrieren */ transition: all .3s ease-out; /* 180331 lz: Uebergangsanimation Kaestchenrahmen */ width: 30px; /* 180331 lz: Kaestchen vergroessern */ } .wpcf7-checkbox .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, /* CHECKBOXEN > OPTION > KAESTCHEN (AKTIVIERT) */ .wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before { /* ZUSTIMMUNG > OPTION > KAESTCHEN (AKTIVIERT) */ background-size: 20px !important; /* 190525 lz: Kaestchen-Symbol vergroessern */ } .wpcf7-checkbox .wpcf7-list-item-label, /* CHECKBOXEN > OPTION > LABEL */ .wpcf7-acceptance .wpcf7-list-item-label { /* ZUSTIMMUNG > OPTION > LABEL */ display: inline-block; hyphens: manual; /* 220218 lz: Aut. Silbentrennung deaktivieren */ left: 45px; /* 190525 lz: Einrueckung durch Kaestchen definiert */ margin: 0 0 10px; /* 180331 lz: Abstand zw. Kaestchen definiert */ position: relative; } .wpcf7-checkbox .wpcf7-list-item-label:hover, /* CHECKBOXEN > OPTION (HOVER) */ .wpcf7-acceptance .wpcf7-list-item-label:hover { /* ZUSTIMMUNG > OPTION (HOVER) */ cursor: pointer; /* 180331 lz: Mousezeiger in Hand verwandeln */ } /* BUTTON 'ABSENDEN' */ article input.wpcf7-submit { /* FORMULARE CF7 > BUTTON 'SENDEN' */ clear: both; overflow: hidden; width: auto; } .cf7-field-submit { /* BUTTON 'SENDEN' > CONTAINER */ align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; margin: 0 0 20px 0; /* 180331 lz: Abstand nach angleichen an restl. Formularfelder */ justify-content: center; /* 201031 lz: Button zentrieren */ width: 100%; } .cf7-field-submit input { /* BUTTON 'SENDEN' > INHALT */ background-color: var(--beige); /* 201031 lz: = INFO > BUTTON */ border: none !important; /* 201031 lz: Zeilenunterstreichung entf */ font-size: 20px; /* 201031 lz: = Buttons */ hyphens: manual; /* 201031 lz: = Buttons */ letter-spacing: 0.04em; /* 201031 lz: = Buttons */ line-height: 1.2em; /* 201031 lz: = Buttons */ margin-left: 70px !important; /* 220217 lz: Position ausgleichen */ padding: 14px 60px; /* 201031 lz: Breiter gestalten */ text-transform: uppercase; /* 201031 lz: = Buttons */ transition: .5s ease; /* 201031 lz: = Buttons */ width: auto; /* 201031 lz: Nicht zeilenfuellend verbreitern */ z-index: 1; /* 170326 lz: Icon soll Button ueberlagern */ } .cf7-field-submit input:hover, /* BUTTON 'SENDEN' > INHALT */ .cf7-field-submit input:active { /* BUTTON 'SENDEN' > INHALT */ cursor: pointer; /* 180331 lz: Mousezeiger in Hand verwandeln */ opacity: .5; /* 201031 lz: Abblenden */ } .cf7-field-submit .ajax-loader { /* BUTTON 'SENDEN' > LADE-ICON */ margin-left: 20px !important; /* 201031 lz: Button inkl. Ajax-Loader hor. zentrieren */ width: 20px !important; /* 201031 lz: Button inkl. Ajax-Loader hor. zentrieren */ z-index: 2; /* 170326 lz: Icon soll Button ueberlagern */ } /* VALIDIERUNG */ .wpcf7-not-valid-tip, .wpcf7-response-output { /* STATUSMELDUNGEN ALLGEMEIN */ background-color: #B20038; /* 201031 lz: By Default rot faerben */ color: #fff !important; border: none !important; line-height: 1.5; /* 190525 lz: = Eingabefelder */ margin: -3px 0 0 0 !important; /* 201031 lz: Korrekturmeldung ueber Unterkante Textfeld legen */ padding: 10px 15px !important; /* 190525 lz: = Eingabefelder */ text-align: center; /* 170326 lz: Zentrieren vgl. Submit-Button */ width: 100%; position: relative; /* 190525 lz: https://leaverou.github.io/bubbly/ */ } .wpcf7-not-valid-tip:before { /* FEHLERMELDUNGEN > PFEILSPITZEN */ content: ''; /* 190525 lz: Inhalt erzeugen */ position: absolute; /* 190525 lz: https://leaverou.github.io/bubbly/ */ top: 0; left: 50%; /* 190525 lz: https://leaverou.github.io/bubbly/ */ width: 0; /* 190525 lz: https://leaverou.github.io/bubbly/ */ height: 0; /* 190525 lz: https://leaverou.github.io/bubbly/ */ border: 15px solid transparent; /* 190525 lz: https://leaverou.github.io/bubbly/ */ border-bottom-color: #B20038; /* 190525 lz: Rot faerben */ border-top: 0; margin-left: -15px; /* 190525 lz: https://leaverou.github.io/bubbly/ */ margin-top: -15px; /* 190525 lz: https://leaverou.github.io/bubbly/ */ } .wpcf7-response-output { /* STATUSMELDUNG (UNTERHALB SENDEN-BUTTON) */ background-color: #000; /* 201031 lz: Neutral gestalten (invertieren) */ color: #fff; /* 201031 lz: Neutral gestalten (invertieren) */ margin-top: 25px !important; /* 190525 lz: Abstand zwischen Senden-Button und Statusmeldung ergaenzen */ display: flex; /* 201031 lz: Text vert. zentrieren */ align-items: center; /* 201031 lz: Text vert. zentrieren */ justify-content: center; /* 201031 lz: Text hor. zentrieren */ } .wpcf7-response-output.wpcf7-mail-sent-ok { /* STATUSMELDUNG 'OK' */ background-color: #00843d !important; /* 170326 lz: Gruen faerben */ } .wpcf7-not-valid-tip:before { /* STATUSMELDUNG 'FEHLER' > ICON */ color: #B20038 !important; /* 170326 lz: Rot faerben */ } /* MAX. SIZE OF 1079px (MOBILE > BIG) ----------------------------------------------------------------*/ @media screen and (max-width: 1079px) { .cf7-field-broccoli, /* FORMULARFELD 'MAIL' */ .cf7-field-tel, /* FORMULARFELD 'TEL' */ .cf7-field-themen, /* FORMULARFELD 'THEMEN' */ .cf7-field-zeiten { /* FORMULARFELD 'ZEITEN' */ width: 100%; /* 201031 lz: Mobil Einspalten-Raster erzeugen */ } .wpcf7-checkbox .wpcf7-list-item-label::before, /* CHECKBOXEN > OPTION > KAESTCHEN */ .wpcf7-acceptance .wpcf7-list-item-label::before { /* ZUSTIMMUNG > OPTION > KAESTCHEN */ top: -2px; /* 220218 lz: Position ausgleichen */ } .cf7-field-acceptance { /* FORMULARFELD 'ZUSTIMMUNG' */ margin-top: 10px; /* 220218 lz: Steg zu vorigem Formularfeld erhoehen */ } } /*-----------------------------------------------------------------------------------*/ /* 9.4 - PLUGIN - COOKIEBOT /*-----------------------------------------------------------------------------------*/ #CybotCookiebotDialog { /* COOKIE-BANNER (AUSSEN-CONTAINER) */ border-radius: 0 !important; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialog * { /* COOKIE-BANNER > INHALTE */ color: #000 !important; /* 220217 lz: = Website-Stil */ font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* 220217 lz: = Website-Stil */ font-size: 18px !important; /* 220217 lz: = Website-Stil */ font-weight: 300 !important; /* 220217 lz: = Website-Stil */ letter-spacing: 0.02em !important; /* 220217 lz: = Website-Stil */ line-height: 1.5em !important; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialogPoweredbyLink { /* COOKIE-BANNER > LOGO 'POWERED BY' */ background: url("img/logo-bildmarke.svg") center left / contain no-repeat !important; /* 220217 lz: = Website-Stil */ height: 50px; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialogPoweredbyLink img { /* COOKIE-BANNER > LOGO 'POWERED BY' > URSPR. BILD */ display: none !important; /* 220217 lz: Entf */ } #CybotCookiebotDialog h2 { /* COOKIE-BANNER > UEBERSCHRIFTEN */ font-size: 24px !important; /* 220217 lz: = Website-Stil */ font-weight: 300 !important; /* 220217 lz: = Website-Stil */ line-height: 1.2em !important; /* 220217 lz: = Website-Stil */ margin: 0 0 20px !important; /* 220217 lz: = Website-Stil */ text-transform: uppercase !important; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive { /* COOKIE-BANNER > MENUE > AKTIVER LINK */ border-bottom: 1px solid #000 !important; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialog button { /* COOKIE-BANNER > BUTTONS */ background-color: transparent !important; /* 220217 lz: = Website-Stil */ border: 1px solid #000 !important; /* 220217 lz: = Website-Stil */ border-radius: 0 !important; /* 220217 lz: = Website-Stil */ color: #000 !important; /* 220217 lz: = Website-Stil */ font-family: 'Raleway' !important; /* 220217 lz: = Website-Stil */ font-weight: 300 !important; /* 220217 lz: = Website-Stil */ font-size: 20px !important; /* 220217 lz: = Website-Stil */ letter-spacing: 0.04em !important; /* 220217 lz: = Website-Stil */ line-height: 1.2em !important; /* 220217 lz: = Website-Stil */ padding: 14px 20px 16px !important; /* 220217 lz: = Website-Stil */ text-transform: uppercase; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { /* COOKIE-BANNER > BUTTON 'ZUSTIMMUNG' */ flex-grow: 2; /* 220217 lz: Vergroessern */ } #CybotCookiebotDialog button#CybotCookiebotDialogBodyLevelButtonCustomize { /* COOKIE-BANNER > BUTTON 'ANPASSEN' */ background-color: var(--beige) !important; /* 220217 lz: = Website-Stil */ border: 1px solid var(--beige) !important; /* 220217 lz: = Website-Stil */ } #CybotCookiebotDialogBodyUnderlay { /* COOKIE-BANNER > LIGHTBOX */ background-color: #fff !important; /* 220217 lz: Invertieren */ } .CybotCookiebotDialogDetailBodyContentCookieContainerButton.CybotCookiebotDialogCollapsed:before { /* COOKIE-BANNER > DETAIL-SETTINGS > DROPDOWN-ICONS */ top: 0.5em !important; /* 220217 lz: Vertikal zentrieren */ } #CookiebotWidget { /* 220217 lz: Mitwanderndes Cookieeinstellungs-Badge */ opacity: 0 !important; /* 220217 lz: Verstecken */ pointer-events: none !important; /* 220217 lz: Verstecken */ } /* MAX. SIZE OF 1300px (BREAKPOINT COOKIEBOT) ----------------------------------------------------------------*/ @media screen and (max-width: 1300px) { #CybotCookiebotDialogPoweredbyLink { /* COOKIE-BANNER > LOGO 'POWERED BY' */ background-position: center center !important; /* 220217 lz: Bildmarke zentrieren */ width: 100% !important; /* 220217 lz: Bildmarke zentrieren */ } #CybotCookiebotDialogPoweredbyCybot { /* COOKIE-BANNER > LOGO 'POWERED BY' (URSPR. BILD) */ display: none !important; /* 220217 lz: Entf */ } } /*-----------------------------------------------------------------------------------*/ /* 9.5 - PLUGIN - KADENCE BLOCKS (TABS-BLOCK) /*-----------------------------------------------------------------------------------*/ .wp-block-kadence-tabs { /* BLOCK 'TABS' (CONTAINER) */ max-width: 700px; /* 240820 lz: Breite deckeln */ margin: 0 auto; /* 240820 lz: Hor. zentrieren */ } .wp-block-kadence-tabs .kt-tabs-title-list { /* TABREITER > ZEILE */ justify-content: center; /* 240820 lz: Tabs hor. zentrieren */ margin-bottom: 6px !important; /* 240820 lz: Angleichen an Steg Headline zu Tabzeile */ } #jahresbericht .wp-block-buttons { /* TABREITER > ZEILE */ margin-top: -22px !important; /* 240820 lz: Angleichen an Abstand Headline zu Tabreitern */ } /* MAX. SIZE OF 1079px (MOBILE > BREAKPOINT KADENCE) ----------------------------------------------------------------*/ @media screen and (max-width: 1079px) { .wp-block-kadence-tabs .kt-tabs-id406_185d78-f3 > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title { justify-content: center !important; /* 240820 lz: Jahreszahlen mobil zentrieren */ } }