/* ========================================================================== W&W Design-System für Kadence + Block-Editor -------------------------------------------------------------------------- Grundsatz: Farben, Schriftarten, Schriftgrößen (H1–H6, Fließtext), Buttons und Inhaltsbreite kommen aus dem Kadence-Customizer (CSS-Variablen --global-*). Diese Datei gibt nur die Form der W&W-Bausteine vor (Block-Stile „W&W …“). Ausnahmen pro Seite: Customizer > Zusätzliches CSS bzw. Block > Erweitert > „Zusätzliche CSS-Klasse(n)“. Hilfsklassen (Block > Erweitert > Zusätzliche CSS-Klasse): ww-gap-xl großer Abstand im Raster (Text neben Bild/Kontaktbox) ww-v-center Rasterinhalte vertikal mittig ww-narrow Abschnitt mit schmaler Lesebreite (Stellenanzeigen) ww-cols-2 Bildraster mit 2 Bildern ww-60 Bild + Text im Verhältnis 60/40 ========================================================================== */ :root{ --ww-green:var(--global-palette1,#238A4E); --ww-dark:var(--global-palette2,#125D38); --ww-ink:var(--global-palette3,#1B2922); --ww-text:var(--global-palette4,#2A3A31); --ww-gray:var(--global-palette5,#52605C); --ww-pale:var(--global-palette7,#E2EFE6); --ww-cream:var(--global-palette8,#F4F7F3); --ww-white:var(--global-palette9,#FFFFFF); --ww-yellow:var(--global-palette15,#FFC400); --ww-deep:#0B4129; --ww-night:#09331F; --ww-border:#DCE8DF; --ww-shadow:0 14px 45px rgba(23,63,41,.07); --ww-w:var(--global-content-width,1310px); --ww-edge:var(--global-content-edge-padding,2.5rem); --ww-px:max(var(--ww-edge),calc((100% - var(--ww-w)) / 2 + var(--ww-edge))); --ww-px-vw:max(var(--ww-edge),calc((100vw - var(--ww-w)) / 2 + var(--ww-edge))); --ww-section-y:100px; --ww-sy:var(--ww-section-y); } @media (max-width:850px){:root{--ww-sy:calc(var(--ww-section-y) * .75)}} @media (max-width:580px){:root{--ww-sy:calc(var(--ww-section-y) * .62)}} html{scroll-padding-top:100px} .has-ww-tiefgruen-background-color{background-color:var(--ww-deep)!important} .has-ww-tiefgruen-color{color:var(--ww-deep)!important} .has-ww-kontaktgruen-background-color{background-color:var(--ww-night)!important} .has-ww-kontaktgruen-color{color:var(--ww-night)!important} /* -------------------------------------------------------------------------- 1. Gemeinsame Text-Regeln in allen W&W-Bausteinen -------------------------------------------------------------------------- */ :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-split-light,.is-style-ww-strip,.is-style-ww-card,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout,.is-style-ww-contact-panel,.is-style-ww-benefits,.is-style-ww-job-card) :is(h1,h2,h3,h4,h5,h6){margin:0 0 .45em} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-split-light,.is-style-ww-card,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout,.is-style-ww-contact-panel,.is-style-ww-benefits,.is-style-ww-job-card) p{margin:0 0 18px} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-split-light,.is-style-ww-card,.is-style-ww-job-card) p{color:var(--ww-gray);line-height:1.8} :root :is(h1,h2,h3,h4) em{font-style:normal;color:var(--ww-green)} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-split-light,.is-style-ww-card,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout,.is-style-ww-contact-panel,.is-style-ww-benefits,.is-style-ww-job-card,.is-style-ww-heading-row,.is-style-ww-row) > :last-child{margin-bottom:0} /* Dunkle Bausteine: weiße Schrift, Hervorhebung in Gelb */ :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout,.is-style-ww-brand-panel){color:#fff} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout,.is-style-ww-brand-panel) :is(h1,h2,h3,h4,h5,h6){color:#fff} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout) :is(h1,h2,h3,h4) em{color:var(--ww-yellow)} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout) p{color:#D5E8DB;line-height:1.8} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout,.is-style-ww-contact-panel) a:not(.wp-block-button__link){color:inherit} /* -------------------------------------------------------------------------- 2. Abschnitte (Gruppe > Stil „W&W Abschnitt …“) -------------------------------------------------------------------------- */ :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact){padding:var(--ww-sy) var(--ww-px);margin-top:0;margin-bottom:0;max-width:none} :root .is-style-ww-section{background-color:#fff} :root .is-style-ww-section-tint{background-color:var(--ww-cream)} :root .is-style-ww-section-dark{background-color:var(--ww-dark)} :root .is-style-ww-section-deep{background-color:var(--ww-deep)} :root .is-style-ww-section-contact{background-color:var(--ww-night)} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact) > p:not([class*="is-style-"]){max-width:850px;font-size:16px} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact) > :is(h2,p) + :is(.is-style-ww-grid-2,.is-style-ww-grid-3,.is-style-ww-grid-4,.is-style-ww-gallery-grid,.wp-block-buttons,.is-style-ww-callout,.wp-block-list){margin-top:45px} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact) > :is(.is-style-ww-grid-2,.is-style-ww-grid-3,.is-style-ww-grid-4) + :is(.is-style-ww-grid-2,.is-style-ww-grid-3,.is-style-ww-grid-4){margin-top:21px} :root :is(.is-style-ww-section,.is-style-ww-section-tint,.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact) > * + .is-style-ww-heading-row{margin-top:70px} :root .ww-narrow{--ww-w:1060px} /* Fließtext schmal (Rechtstexte, lange Texte) */ :root .wp-block-group.is-style-ww-text{max-width:820px;margin-left:0;margin-right:0} :root .wp-block-group.is-style-ww-text > :first-child{margin-top:0} :root .wp-block-group.is-style-ww-text h2{font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.01em;margin:44px 0 12px} :root .wp-block-group.is-style-ww-text h3{font-size:19px;line-height:1.3;margin:28px 0 8px} :root .wp-block-group.is-style-ww-text :is(p,li){font-size:16px;line-height:1.75;color:var(--ww-gray)} :root .wp-block-group.is-style-ww-text p{margin:0 0 14px} :root .wp-block-group.is-style-ww-text ul{margin:0 0 18px;padding-left:22px} :root .wp-block-group.is-style-ww-text li{margin-bottom:4px} :root .wp-block-group.is-style-ww-text a{color:var(--global-palette1,#238A4E);text-decoration:underline;text-underline-offset:3px} /* Überschrift links, Text rechts */ :root .is-style-ww-heading-row{display:grid;grid-template-columns:1.2fr .8fr;gap:90px;align-items:end;margin:0 0 43px} :root .is-style-ww-heading-row > *{margin:0} :root .is-style-ww-heading-row :is(h1,h2){margin:0} :root .is-style-ww-heading-row > p{font-size:16px;line-height:1.8;max-width:440px;margin:0 0 7px} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep) .is-style-ww-heading-row > p{color:#C9DED0} /* -------------------------------------------------------------------------- 3. Titelbild Startseite & Seitenkopf (Block „Cover“ > Stil „W&W Titelbild …“) Bild, Fokuspunkt, Farbverlauf (Overlay) und Mindesthöhe werden direkt im Block eingestellt. Hier stehen nur Innenabstände und Textbreiten. -------------------------------------------------------------------------- */ :root .wp-block-cover:is(.is-style-ww-hero,.is-style-ww-page-hero){justify-content:flex-start;margin-top:0;margin-bottom:0;max-width:none} :root .wp-block-cover.is-style-ww-hero{min-height:max(635px,min(790px,calc(100svh - 100px)));padding:55px var(--ww-px) 110px;background-color:var(--ww-deep)} :root .wp-block-cover.is-style-ww-page-hero{min-height:420px;padding:86px var(--ww-px) 78px;background-color:#0A4A2C} :root :is(.is-style-ww-hero,.is-style-ww-page-hero) > .wp-block-cover__inner-container{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;max-width:none;margin:0} :root :is(.is-style-ww-hero,.is-style-ww-page-hero) > .wp-block-cover__inner-container > *{margin-left:0!important;margin-right:0!important;max-width:none} :root .is-style-ww-hero .wp-block-cover__inner-container > :is(h1,h2){max-width:730px} :root .is-style-ww-page-hero .wp-block-cover__inner-container > :is(h1,h2){max-width:850px;margin-bottom:23px} :root .is-style-ww-hero .wp-block-cover__inner-container > p:not([class*="is-style-"]),:root .is-style-ww-hero p.is-style-ww-lead{max-width:570px;font-size:18px;line-height:1.75;color:#E6F4EA;margin-bottom:35px} :root .is-style-ww-page-hero .wp-block-cover__inner-container > p:not([class*="is-style-"]){max-width:700px;font-size:17px;line-height:1.8;color:#DEEEE1;margin:0} :root h1.is-style-ww-display,:root h2.is-style-ww-display{font-size:clamp(66px,7.8vw,113px);line-height:.95;letter-spacing:-.055em;margin:0 0 31px} /* -------------------------------------------------------------------------- 4. Kleine Textbausteine (Absatz > Stil „W&W …“) -------------------------------------------------------------------------- */ :root p.is-style-ww-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 26px;font-size:11px;line-height:1.4;font-weight:900;letter-spacing:.19em;text-transform:uppercase;color:var(--ww-green)} :root p.is-style-ww-eyebrow::before{content:"";flex:none;width:28px;height:4px;background:var(--ww-yellow)} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-callout) p.is-style-ww-eyebrow{color:#E9F7EC} :root p.is-style-ww-kicker{margin:0 0 6px;font-size:10px;line-height:1.5;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--ww-green)} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-contact-panel,.is-style-ww-hero,.is-style-ww-page-hero) p.is-style-ww-kicker{color:var(--ww-yellow)} :root .is-style-ww-brand-panel p.is-style-ww-kicker{color:#BFD1C7} :root p.is-style-ww-lead{font-size:18px;line-height:1.75} :root p.is-style-ww-caption{position:absolute;left:0;bottom:-68px;display:flex;align-items:center;gap:13px;margin:0;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#D5E6DC} :root p.is-style-ww-caption::before{content:"";width:30px;height:2px;background:var(--ww-yellow)} :root p.is-style-ww-crumb{margin:33px 0 0;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#C6E1CD} :root p.is-style-ww-crumb a{text-decoration:underline;text-decoration-color:var(--ww-yellow);text-underline-offset:5px} :root p.is-style-ww-note{border-left:4px solid var(--ww-yellow);background:#FFF8D9;color:#304133;padding:17px 21px;font-size:13px;line-height:1.7;margin-top:26px} :root p.is-style-ww-small{font-size:12px;line-height:1.6;color:var(--ww-gray);margin-top:18px} :root p.is-style-ww-brand{margin:0;font-size:clamp(30px,3vw,43px);line-height:1;font-weight:900;letter-spacing:-.035em;color:#fff} :root p.is-style-ww-subtitle{font-size:18px;font-weight:700;color:var(--ww-yellow)} :root p.is-style-ww-avatar{display:grid;place-items:center;width:50px;height:50px;margin:0 0 14px;background:var(--ww-pale);color:var(--ww-dark);font-size:15px;font-weight:900;letter-spacing:-.02em;line-height:1} :root p.is-style-ww-badge{display:inline-flex;flex-direction:column;gap:2px;margin:0;padding:18px 24px 16px;background:var(--ww-yellow);color:#162B1F;font-size:9px;line-height:1.3;font-weight:900;letter-spacing:.12em;text-transform:uppercase} :root p.is-style-ww-badge strong{font-size:21px;letter-spacing:.07em} /* Überschrift mit gelbem Balken (Stellenanzeigen) */ :root h2.is-style-ww-bar,:root h3.is-style-ww-bar{font-size:29px;letter-spacing:-.02em;color:var(--ww-dark);border-left:5px solid var(--ww-yellow);padding-left:18px;margin:0 0 19px} /* -------------------------------------------------------------------------- 5. Raster, Karten, Leisten -------------------------------------------------------------------------- */ :root :is(.is-style-ww-grid-2,.is-style-ww-grid-3,.is-style-ww-grid-4){display:grid;gap:22px;margin-top:0;margin-bottom:0} :root .is-style-ww-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} :root .is-style-ww-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} :root .is-style-ww-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} :root :is(.is-style-ww-grid-2,.is-style-ww-grid-3,.is-style-ww-grid-4) > *{margin:0;min-width:0} :root .ww-gap-xl{column-gap:clamp(40px,7vw,94px)} :root .ww-v-center{align-items:center} :root :is(.is-style-ww-card,.is-style-ww-card-highlight){display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:31px;background:#fff;border:1px solid #E1E9E3;box-shadow:var(--ww-shadow);color:var(--ww-ink);transition:transform .23s} :root .is-style-ww-card-highlight{background:var(--ww-dark);border-color:var(--ww-dark);color:#fff} :root :is(.is-style-ww-card,.is-style-ww-card-highlight) > *{margin-top:0} :root :is(.is-style-ww-card,.is-style-ww-card-highlight) h3{margin:12px 0 12px} :root :is(.is-style-ww-card,.is-style-ww-card-highlight) p:not([class*="is-style-"]){font-size:14px;line-height:1.75} :root .is-style-ww-card-highlight p:not([class*="is-style-"]){color:#D5E6DB} :root :is(.is-style-ww-card,.is-style-ww-card-highlight,.is-style-ww-card-dark) > .wp-block-buttons:last-child{margin-top:auto;padding-top:8px} :root .is-style-ww-card:has(> .wp-block-image:first-child):hover{transform:translateY(-5px)} :root .is-style-ww-card > .wp-block-image:first-child{margin:-31px -31px 28px;width:calc(100% + 62px);max-width:none;overflow:hidden;background:#EAF0ED} :root .is-style-ww-card > .wp-block-image:first-child img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .5s} :root .is-style-ww-card > .wp-block-image:first-child a{display:block;height:100%} :root .is-style-ww-card:hover > .wp-block-image:first-child img{transform:scale(1.04)} :root .is-style-ww-card:has(> .is-style-ww-avatar){padding:26px} :root .is-style-ww-card:has(> .is-style-ww-avatar) :is(h3,h4){font-size:22px;margin:4px 0 2px} :root .is-style-ww-card:has(> .is-style-ww-avatar) p:not([class*="is-style-"]){font-size:13px;line-height:1.55;margin:0 0 6px} :root .is-style-ww-card:has(> .is-style-ww-avatar) p a{color:var(--ww-dark);font-weight:800;overflow-wrap:anywhere} :root .is-style-ww-card :is(h5,h6){margin:0 0 15px} /* Marken-Kopf oben in einer Karte (GEDA, LISSMAC, EICHINGER) */ :root .is-style-ww-card > .is-style-ww-brand-panel:first-child{margin:-31px -31px 29px;width:calc(100% + 62px)} :root .is-style-ww-brand-panel{display:flex;flex-direction:column;justify-content:space-between;min-height:176px;padding:25px 29px;background:linear-gradient(135deg,#0A3522,#12623B 75%,#207344)} :root .is-style-ww-brand-panel > *{margin:0} /* Karte auf dunklem Grund (Videos) */ :root .is-style-ww-card-dark{display:flex;flex-direction:column;min-width:0;padding:0 28px 30px;background:rgba(255,255,255,.045);border:1px solid rgba(86,132,102,.45);overflow:hidden} :root .is-style-ww-card-dark > :is(.wp-block-video,.wp-block-image,.wp-block-embed):first-child{margin:0 -28px 26px;width:calc(100% + 56px);max-width:none} :root .is-style-ww-card-dark:not(:has(> :is(.wp-block-video,.wp-block-image,.wp-block-embed):first-child)){padding-top:28px} :root .is-style-ww-card-dark p:not([class*="is-style-"]){font-size:14px;line-height:1.6;color:#D0DFD4} :root .wp-block-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#071C11} /* Leiste mit 4 Kennzahlen (Nummern zählen automatisch 01, 02, …) */ :root .is-style-ww-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:26px var(--ww-px);margin-top:0;margin-bottom:0;max-width:none;background:#F7FAF7;border-bottom:1px solid #E1EAE3;counter-reset:ww-stat} :root .is-style-ww-strip > *{margin:0} :root p.is-style-ww-stat{position:relative;margin:0 24px 0 0;padding:8px 22px 8px 46px;border-right:1px solid #CFDED2;font-size:11px;line-height:1.45;color:var(--ww-gray)} :root p.is-style-ww-stat:last-child{border-right:0;margin-right:0} :root p.is-style-ww-stat::before{counter-increment:ww-stat;content:counter(ww-stat,decimal-leading-zero);position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:24px;font-weight:900;letter-spacing:-.08em;color:var(--ww-green)} :root p.is-style-ww-stat strong{font-size:12.5px;color:var(--ww-ink);line-height:1.45} /* Grüner Hinweisbalken */ :root .is-style-ww-callout{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:45px 0 0;padding:40px 44px;background:var(--ww-dark)} :root .is-style-ww-callout > *{margin:0} :root .is-style-ww-callout :is(h2,h3){font-size:clamp(26px,3vw,40px);line-height:1.13;margin:0 0 8px} :root .is-style-ww-callout p:not([class*="is-style-"]){font-size:15px;line-height:1.7;color:#C9E3D1;margin:0} :root .is-style-ww-callout .wp-block-buttons{flex:none} /* Kontaktbox */ :root .is-style-ww-contact-panel{display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:38px 43px;background:rgba(255,255,255,.03);border:1px solid #538168;color:#fff} :root .is-style-ww-contact-panel > *{margin:0} :root .is-style-ww-contact-panel :is(h3,h4){font-size:23px;line-height:1.4;letter-spacing:-.02em;color:#fff} :root .is-style-ww-contact-panel p:not([class*="is-style-"]){font-size:15px;line-height:1.6;color:#E4F3E8;overflow-wrap:anywhere} :root .is-style-ww-contact-panel .wp-block-buttons{margin-top:18px} /* Gelbe Leistungsbox (Stellenanzeigen) */ :root .is-style-ww-benefits{margin:35px 0 52px;padding:31px 37px 25px;background:#FFF3C0;border-top:6px solid var(--ww-yellow)} :root .is-style-ww-benefits :is(h2,h3){font-size:29px;color:var(--ww-dark);margin:0 0 21px} :root .is-style-ww-benefits li{color:#314738;line-height:1.7;margin-bottom:7px} /* Zeile nebeneinander (z. B. Text + Button) */ :root .is-style-ww-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px} :root .is-style-ww-row > *{margin:0} /* Stellenkarte mit Flyer */ :root .is-style-ww-job-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #E0E8E2;box-shadow:0 13px 50px rgba(31,111,61,.06);transition:transform .2s,box-shadow .2s} :root .is-style-ww-job-card:hover{transform:translateY(-5px);box-shadow:0 19px 45px rgba(18,93,56,.13)} :root .is-style-ww-job-card > *{margin:0} :root .is-style-ww-job-card > p.is-style-ww-kicker{display:flex;align-items:center;gap:11px;min-height:53px;padding:16px 20px;color:var(--ww-dark);font-size:11px} :root .is-style-ww-job-card > p.is-style-ww-kicker::before{content:"";flex:none;width:9px;height:9px;background:var(--ww-yellow)} :root .is-style-ww-job-card > .wp-block-image img{display:block;width:100%;height:auto} :root .is-style-ww-job-card > .is-style-ww-row{margin-top:auto;padding:18px 17px 20px;border-top:1px solid #EAF0EB} :root .is-style-ww-job-card > .is-style-ww-row p{font-size:11px;font-weight:700;line-height:1.5;color:var(--ww-gray)} :root .is-style-ww-job-card .wp-block-button__link{font-size:10px;padding:12px;min-height:0;gap:10px} /* -------------------------------------------------------------------------- 6. Bild + Text (volle Breite, 50/50) -------------------------------------------------------------------------- */ :root :is(.is-style-ww-split,.is-style-ww-split-light){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:560px;margin-top:0;margin-bottom:0;padding:0;max-width:none;background-color:var(--ww-dark)} :root .is-style-ww-split-light{background-color:var(--ww-cream);color:var(--ww-ink)} :root .ww-60{grid-template-columns:3fr 2fr} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-cover{margin:0;min-height:560px;height:100%} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:0;padding:90px clamp(36px,6.5vw,118px)} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group:first-child{padding-left:var(--ww-px-vw)} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group p:not([class*="is-style-"]){font-size:16px;max-width:550px} :root .is-style-ww-split-light p:not([class*="is-style-"]){color:var(--ww-gray)} /* -------------------------------------------------------------------------- 7. Bildflächen (Block „Cover“ > Stil „W&W Bildfläche“), Bildraster „Einblicke“, Bilderserie, Fotocollage Bildausschnitt: Block markieren > rechts „Fokuspunkt“ verschieben. -------------------------------------------------------------------------- */ :root .wp-block-cover:is(.is-style-ww-media,.is-style-ww-media-corner){min-height:0;margin:0;padding:30px 32px} :root :is(.is-style-ww-media,.is-style-ww-media-corner) > .wp-block-cover__inner-container p{margin:0;color:#fff;font-size:11px;line-height:1.4;font-weight:900;letter-spacing:.14em;text-transform:uppercase} :root .is-style-ww-media-corner::before{content:"";position:absolute;z-index:2;top:0;right:0;width:65px;height:65px;background:var(--ww-yellow);clip-path:polygon(100% 0,100% 100%,0 0);pointer-events:none} :root .is-style-ww-gallery-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:18px;margin-top:0;margin-bottom:0} :root .is-style-ww-gallery-grid.ww-cols-2{grid-template-columns:1fr .68fr} :root .is-style-ww-gallery-grid > :is(figure,.wp-block-cover){position:relative;height:365px;margin:0;overflow:hidden;background:#D3DCD5;min-width:0} :root .is-style-ww-gallery-grid > .wp-block-cover{padding:22px 23px} :root .is-style-ww-gallery-grid.ww-cols-2 > :is(figure,.wp-block-cover){height:460px} :root .is-style-ww-gallery-grid > figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s} :root .is-style-ww-gallery-grid > .wp-block-cover > img{transition:transform .5s} :root .is-style-ww-gallery-grid > :is(figure,.wp-block-cover):hover img{transform:scale(1.04)} :root .is-style-ww-gallery-grid > figure::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(0deg,rgba(8,27,17,.72),transparent);pointer-events:none;z-index:1} :root .is-style-ww-gallery-grid > figure > figcaption,:root .is-style-ww-gallery-grid > .wp-block-gallery > figcaption{position:absolute;z-index:3;left:23px;bottom:22px;margin:0;padding:0;color:#fff;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;text-align:left;background:none} :root .wp-block-gallery.is-style-ww-slides{display:block;position:relative;gap:0} :root .wp-block-gallery.is-style-ww-slides > .wp-block-image{position:absolute!important;inset:0;display:none;width:100%!important;height:100%;margin:0!important} :root .wp-block-gallery.is-style-ww-slides > .wp-block-image.is-active,:root .wp-block-gallery.is-style-ww-slides:not(.ww-ready) > .wp-block-image:first-of-type{display:block} :root .wp-block-gallery.is-style-ww-slides > .wp-block-image img{width:100%;height:100%!important;object-fit:cover} :root .wp-block-gallery.is-style-ww-slides > button{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:36px;height:40px;padding:0;border:1px solid rgba(255,255,255,.67);border-radius:0;background:rgba(11,65,41,.78);color:#fff;font:26px/1 Arial,sans-serif;cursor:pointer} :root .wp-block-gallery.is-style-ww-slides > button:hover{background:var(--ww-dark)} :root .wp-block-gallery.is-style-ww-slides > .ww-slide-prev{left:9px} :root .wp-block-gallery.is-style-ww-slides > .ww-slide-next{right:9px} :root .is-style-ww-photo-stack{position:relative;min-height:550px;margin:0} :root .is-style-ww-photo-stack > *{margin:0} :root .is-style-ww-photo-stack > .wp-block-cover:first-child{height:520px} :root .is-style-ww-photo-stack > .wp-block-cover:nth-child(2){position:absolute;z-index:1;right:-33px;bottom:-28px;width:42%;height:267px;border:11px solid #fff;box-shadow:0 8px 33px rgba(18,44,28,.15)} :root .is-style-ww-photo-stack > p.is-style-ww-badge{position:absolute;z-index:2;left:22px;bottom:48px} :root .wp-block-image.is-style-ww-focus-top img{object-position:50% 10%!important} /* -------------------------------------------------------------------------- 8. Buttons und Listen -------------------------------------------------------------------------- */ :root .wp-block-buttons{gap:13px} :root .wp-block-button__link{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;transition:transform .2s,background-color .2s,color .2s} :root .wp-block-button__link:hover{transform:translateY(-2px)} :root .wp-block-button.is-style-ww-green .wp-block-button__link{background-color:var(--ww-green);color:#fff} :root .wp-block-button.is-style-ww-green .wp-block-button__link:hover{background-color:var(--ww-dark);color:#fff} :root .wp-block-button.is-style-ww-outline-light .wp-block-button__link{background-color:rgba(7,45,28,.22);color:#fff;border:1px solid rgba(239,255,242,.7)} :root .wp-block-button.is-style-ww-outline-light .wp-block-button__link:hover{background-color:rgba(255,255,255,.13);color:#fff} :root .wp-block-button.is-style-ww-arrow .wp-block-button__link{min-height:0;padding:0 0 9px;gap:16px;background:none;color:var(--ww-dark);border:0;border-bottom:2px solid var(--ww-yellow);border-radius:0;box-shadow:none;font-size:12px;font-weight:900;letter-spacing:0;text-transform:none} :root .wp-block-button.is-style-ww-arrow .wp-block-button__link:hover{color:var(--ww-green);background:none;transform:none} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout) .wp-block-button.is-style-ww-arrow .wp-block-button__link{color:#fff} :root :is(.is-style-ww-section-dark,.is-style-ww-section-deep,.is-style-ww-section-contact,.is-style-ww-hero,.is-style-ww-page-hero,.is-style-ww-split,.is-style-ww-card-highlight,.is-style-ww-card-dark,.is-style-ww-callout) .wp-block-button.is-style-ww-arrow .wp-block-button__link:hover{color:var(--ww-yellow)} :root .wp-block-button.is-style-ww-chip .wp-block-button__link{min-height:0;padding:13px 16px;background:#fff;color:var(--ww-dark);border:1px solid #D0DFD5;border-radius:0;font-size:12px;font-weight:800;letter-spacing:0;text-transform:none} :root .wp-block-button.is-style-ww-chip .wp-block-button__link:hover{border-color:var(--ww-green);transform:none} :root ul.is-style-ww-check{list-style:none;padding:0;margin:20px 0 30px} :root ul.is-style-ww-check li{padding:10px 0;margin:0;border-bottom:1px solid #DDE8E0;font-size:15px;color:var(--ww-gray)} :root ul.is-style-ww-check li::before{content:"✓";font-weight:900;color:var(--ww-green);margin-right:12px} :root ul.is-style-ww-dots{list-style:none;padding:0;margin:0 0 20px} :root ul.is-style-ww-dots li{position:relative;margin:0 0 13px;padding-left:24px;font-size:16px;line-height:1.65;color:#415448} :root ul.is-style-ww-dots li::before{content:"";position:absolute;top:10px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--ww-green)} :root ul.is-style-ww-chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:23px 0 30px} :root ul.is-style-ww-chips li{margin:0;padding:8px 11px;font-size:13px;font-weight:700;line-height:1.3;color:#153D2B;background:#F4F7F2;border:1px solid #DDE8DF} /* -------------------------------------------------------------------------- 9. Kadence-Header: LIEBHERR-Werkshändler-Zeichen (Header > HTML) -------------------------------------------------------------------------- */ .ww-partner-mark{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:146px;padding-left:10px;border-left:1px solid #DCE8DF;line-height:1;text-align:center;white-space:nowrap} .ww-partner-mark img{display:block;width:130px;max-width:100%;height:auto;object-fit:contain} .ww-partner-mark > span{margin-top:3px;font-family:Arial,Helvetica,sans-serif;font-size:8px;font-weight:800;letter-spacing:.16em;color:#52605C} .site-header .header-html-inner p{margin:0} @media (max-width:1100px){.ww-partner-mark{min-width:116px;padding-left:6px}.ww-partner-mark img{width:112px}} @media (max-width:580px){.ww-partner-mark{min-width:103px;padding-left:5px}.ww-partner-mark img{width:101px}.ww-partner-mark > span{font-size:7px}} @media (max-width:380px){.ww-partner-mark{min-width:89px}.ww-partner-mark img{width:89px}} /* -------------------------------------------------------------------------- 10. Karriere-Microsite (Template „Karriere-Microsite“) -------------------------------------------------------------------------- */ .ww-career-site{background:#fff} .ww-career-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #E8EEE9;box-shadow:0 2px 20px rgba(7,45,26,.03)} .admin-bar .ww-career-header{top:32px} .ww-career-header__inner{display:flex;align-items:center;gap:18px;max-width:1336px;min-height:89px;margin:auto;padding:10px 36px} .ww-career-brand{display:block;flex:none} .ww-career-brand img{display:block;width:151px;height:auto} .ww-career-nav{margin-left:auto} .ww-career-menu{display:flex;align-items:center;gap:34px;margin:0;padding:0;list-style:none} .ww-career-menu a{font-size:13px;font-weight:700;color:var(--ww-ink);text-decoration:none;transition:color .2s} .ww-career-menu a:hover{color:var(--ww-green)} .ww-career-shortcut{display:none;font-size:12px;font-weight:800;text-transform:uppercase;color:var(--ww-dark);text-decoration:none} .ww-career-contact{display:inline-flex;align-items:center;justify-content:center;min-width:132px;padding:13px 17px;background:var(--ww-green);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .2s} .ww-career-contact:hover{background:var(--ww-dark);color:#fff} .ww-career-header .ww-partner-mark{min-width:139px} .ww-career-main{margin:0} .ww-career-footer{background:#082D1C;color:#ACC7B5;font-size:11px} .ww-career-footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 18px;padding:21px var(--ww-px)} .ww-career-footer-menu{display:flex;gap:17px;margin:0;padding:0;list-style:none} .ww-career-footer a{color:#ACC7B5;text-decoration:underline;text-decoration-color:#6B9A7B} @media (max-width:1160px){.ww-career-header__inner{padding-inline:24px}.ww-career-brand img{width:130px}.ww-career-menu{gap:20px}.ww-career-header .ww-partner-mark{min-width:116px}} @media (max-width:800px){.ww-career-header__inner{min-height:74px;gap:10px}.ww-career-brand img{width:117px}.ww-career-menu{gap:12px}.ww-career-menu a{font-size:11px}.ww-career-contact{display:none}} @media (max-width:782px){.admin-bar .ww-career-header{top:46px}} @media (max-width:600px){.admin-bar .ww-career-header{top:0}} @media (max-width:580px){.ww-career-header__inner{min-height:71px;padding-inline:15px}.ww-career-brand img{width:111px}.ww-career-nav{display:none}.ww-career-shortcut{display:block;margin-left:auto;padding:12px 0}.ww-career-footer__inner{flex-direction:column;gap:8px}} @media (max-width:360px){.ww-career-brand img{width:93px}.ww-career-header__inner{gap:7px}} /* -------------------------------------------------------------------------- 11. Kran-Finder (Plugin „Kran-Finder“, Shortcode [kranfinder]) -------------------------------------------------------------------------- */ .ww-finder{background:#fff;border:1px solid #DBE7DE;box-shadow:0 18px 48px rgba(25,59,37,.08);padding:36px;color:var(--ww-ink)} .ww-finder .field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px} .ww-finder label{display:block;margin-bottom:8px;font-size:12px;font-weight:900;color:var(--ww-dark)} .ww-finder input,.ww-finder select{width:100%;min-height:52px;padding:12px 14px;border:1px solid #C9D9CE;border-radius:0;background:#F9FBF9;color:var(--ww-ink);font:inherit;font-size:15px} .ww-finder input:focus,.ww-finder select:focus{outline:3px solid #FFDC55;outline-offset:1px} .ww-finder .field-helper{margin-top:12px;font-size:12px;line-height:1.6;color:var(--ww-gray)} .ww-finder .finder-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:27px} .ww-finder .plain-button{min-height:52px;padding:17px 23px;border:1px solid #C6D5CA;background:#fff;color:var(--ww-dark);font-size:12px;font-weight:900;text-transform:uppercase;cursor:pointer} .ww-finder .finder-results{margin-top:35px;scroll-margin-top:110px} .ww-finder .finder-results h2{margin:0 0 10px;font-size:32px} .ww-finder .result-lead{margin:0 0 22px;font-size:14px;line-height:1.7;color:var(--ww-gray)} .ww-finder .result-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid #DCE8DF} .ww-finder .result-item h3{margin:0 0 5px;font-size:21px} .ww-finder .result-item p{margin:0;font-size:13px;line-height:1.55;color:var(--ww-gray)} .ww-finder .result-item form{flex:none;margin:0} .ww-finder .result-request{display:inline-block;min-height:0;padding:14px 16px;border:0;border-radius:0;background:var(--ww-yellow);color:#1E3023;font:inherit;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .2s} .ww-finder .result-request:hover{background:#FFDC4E} .ww-finder .result-sheet{font-weight:800;color:var(--ww-dark);border-bottom:2px solid var(--ww-yellow);padding-bottom:3px;text-decoration:none} .ww-finder .result-sheet:hover{color:var(--ww-green)} .ww-finder .result-empty{padding:27px;border:1px solid #DFEBDF;background:#F5F8F4;line-height:1.75;color:var(--ww-gray)} .ww-finder .result-empty a{font-weight:800;color:var(--ww-dark)} .ww-finder > h2{margin:0 0 10px;font-size:32px} .ww-finder .field-wide{grid-column:1 / -1} .ww-finder textarea{width:100%;padding:12px 14px;border:1px solid #C9D9CE;border-radius:0;background:#F9FBF9;color:var(--ww-ink);font:inherit;font-size:15px} .ww-finder textarea:focus{outline:3px solid #FFDC55;outline-offset:1px} .ww-finder input:disabled{background:var(--ww-pale);color:var(--ww-dark);font-weight:800} .ww-finder a.plain-button{display:inline-flex;align-items:center;text-decoration:none} .ww-finder .notice{margin:0 0 18px;padding:14px 18px;border-left:4px solid #B82105;background:#FDF1EE;color:#5A1A0C;font-size:14px} .ww-finder .notice p{margin:0} .ww-finder .notice-success{border-left-color:var(--ww-green);background:var(--ww-pale);color:var(--ww-dark)} /* -------------------------------------------------------------------------- 11b. Ergänzungen: Abstände, News-Liste, Stellenanzeigen -------------------------------------------------------------------------- */ :root .ww-mt{margin-top:36px!important} :root .is-style-ww-card-highlight a:not(.wp-block-button__link){color:var(--ww-yellow)} :root :is(.is-style-ww-section,.is-style-ww-section-tint) > :is(h2,p) + .wp-block-query{margin-top:45px} .ww-career-main > .is-style-ww-split:first-child{min-height:635px} :root .ww-60 h1{font-size:clamp(39px,4.4vw,66px);line-height:1.08;margin-bottom:18px} :root .ww-narrow > p.is-style-ww-lead{color:#3D5044;line-height:1.8} :root .ww-narrow > p.is-style-ww-lead:has(+ h2){padding-bottom:39px;margin-bottom:50px;border-bottom:1px solid var(--ww-border)} :root .ww-narrow > * + h2.is-style-ww-bar{margin-top:47px} :root .ww-narrow > .is-style-ww-callout{margin-top:0} :root .ww-news .wp-block-post-template{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none} :root .ww-news .wp-block-post{display:flex;flex-direction:column;margin:0;padding:0 0 26px;background:#fff;border:1px solid #E1E9E3;box-shadow:var(--ww-shadow)} :root .ww-news .wp-block-post > *{margin:0 26px 10px} :root .ww-news .wp-block-post > .wp-block-post-featured-image{margin:0 0 22px} :root .ww-news .wp-block-post-featured-image img{width:100%;object-fit:cover} :root .ww-news .wp-block-post-title{font-size:24px;line-height:1.15} :root .ww-news .wp-block-post-title a{color:var(--ww-ink);text-decoration:none} :root .ww-news .wp-block-post-title a:hover{color:var(--ww-green)} :root .ww-news .wp-block-post-date{font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--ww-green)} :root .ww-news .wp-block-post-excerpt{font-size:14px;color:var(--ww-gray)} :root .ww-news .wp-block-post-excerpt__more-link{display:inline-block;margin-top:10px;font-size:12px;font-weight:900;color:var(--ww-dark);border-bottom:2px solid var(--ww-yellow);padding-bottom:6px;text-decoration:none} :root .ww-news .wp-block-query-pagination{margin-top:36px;font-weight:800} @media (max-width:850px){:root .ww-news .wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))}.ww-career-main > .is-style-ww-split:first-child{min-height:0}} @media (max-width:580px){:root .ww-news .wp-block-post-template{grid-template-columns:1fr}} /* -------------------------------------------------------------------------- 12. Responsiv (Umbrüche wie in der Vorschau: 1120 / 850 / 580 px) -------------------------------------------------------------------------- */ @media (max-width:1120px){ :root .is-style-ww-heading-row{gap:50px} :root h1.is-style-ww-display,:root h2.is-style-ww-display{font-size:clamp(68px,7.6vw,98px)} :root .is-style-ww-photo-stack > .wp-block-cover:nth-child(2){right:-15px} } @media (max-width:850px){ :root .wp-block-cover.is-style-ww-hero{min-height:620px} /* Auf Tablet und Handy steht der Text über dem ganzen Bild: Verlauf kräftiger (überschreibt den Verlauf aus dem Block). */ :root .is-style-ww-hero > .wp-block-cover__background{background:linear-gradient(90deg,rgba(5,46,27,.91),rgba(11,55,34,.65) 60%,rgba(11,43,27,.22))!important} :root p.is-style-ww-caption{display:none} :root h1.is-style-ww-display,:root h2.is-style-ww-display{font-size:clamp(64px,10vw,90px)} :root .is-style-ww-heading-row{grid-template-columns:1fr;gap:23px} :root .is-style-ww-heading-row > p{max-width:660px} :root .is-style-ww-grid-2{grid-template-columns:1fr} :root :is(.is-style-ww-grid-3,.is-style-ww-grid-4){grid-template-columns:repeat(2,minmax(0,1fr));gap:13px} :root .ww-gap-xl{row-gap:40px} :root .is-style-ww-card{padding:24px 20px} :root .is-style-ww-card > .wp-block-image:first-child,:root .is-style-ww-card > .is-style-ww-brand-panel:first-child{margin:-24px -20px 24px;width:calc(100% + 40px)} :root .is-style-ww-brand-panel{min-height:133px;padding:20px} :root .is-style-ww-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:25px;padding-bottom:25px} :root p.is-style-ww-stat{border:0;margin:0} :root .is-style-ww-callout{flex-direction:column;align-items:flex-start} :root :is(.is-style-ww-split,.is-style-ww-split-light),:root .ww-60{grid-template-columns:1fr;min-height:0} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-cover{min-height:360px} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group,:root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group:first-child{padding:70px 35px} :root .is-style-ww-gallery-grid{gap:12px} :root .is-style-ww-gallery-grid > :is(figure,.wp-block-cover){height:290px} :root .is-style-ww-gallery-grid.ww-cols-2 > :is(figure,.wp-block-cover){height:370px} :root .is-style-ww-photo-stack{min-height:430px} :root .is-style-ww-photo-stack > .wp-block-cover:first-child{height:440px} :root .is-style-ww-photo-stack > .wp-block-cover:nth-child(2){width:37%;height:232px} .ww-finder .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:580px){ :root .wp-block-cover.is-style-ww-hero{min-height:730px;padding-top:88px;padding-bottom:120px} :root .is-style-ww-hero > .wp-block-cover__inner-container{justify-content:flex-start} :root .is-style-ww-hero > .wp-block-cover__background{background:linear-gradient(180deg,rgba(5,40,25,.84) 0%,rgba(5,40,25,.73) 53%,rgba(5,40,25,.5) 100%)!important} :root h1.is-style-ww-display,:root h2.is-style-ww-display{font-size:clamp(54px,13vw,73px);margin-bottom:24px} :root .is-style-ww-hero .wp-block-cover__inner-container > p:not([class*="is-style-"]),:root .is-style-ww-hero p.is-style-ww-lead{font-size:15.5px} :root .is-style-ww-hero .wp-block-buttons{flex-direction:column;align-items:flex-start;gap:10px} :root .is-style-ww-hero .wp-block-button{width:min(100%,350px)} :root .is-style-ww-hero .wp-block-button__link{width:100%} :root .wp-block-cover.is-style-ww-page-hero{min-height:350px;padding-top:65px;padding-bottom:65px} :root .is-style-ww-page-hero .wp-block-cover__inner-container > p:not([class*="is-style-"]){font-size:15px} :root :is(.is-style-ww-grid-3,.is-style-ww-grid-2){grid-template-columns:1fr;gap:19px} :root .is-style-ww-strip{gap:6px} :root p.is-style-ww-stat{padding:11px 5px 11px 36px} :root p.is-style-ww-stat::before{font-size:20px} :root .is-style-ww-callout{padding:28px} :root .is-style-ww-contact-panel{padding:27px 24px} :root .is-style-ww-benefits{padding:25px} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-cover{min-height:280px} :root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group,:root :is(.is-style-ww-split,.is-style-ww-split-light) > .wp-block-group:first-child{padding:62px 24px} :root .is-style-ww-gallery-grid,:root .is-style-ww-gallery-grid.ww-cols-2{grid-template-columns:1fr 1fr;gap:10px} :root .is-style-ww-gallery-grid > :is(figure,.wp-block-cover):first-child:not(:only-child){grid-column:span 2;height:320px} :root .is-style-ww-gallery-grid > :is(figure,.wp-block-cover):not(:first-child),:root .is-style-ww-gallery-grid.ww-cols-2 > :is(figure,.wp-block-cover){height:245px} :root .is-style-ww-gallery-grid.ww-cols-2 > :is(figure,.wp-block-cover):first-child{grid-column:auto;height:300px} :root .is-style-ww-gallery-grid.ww-cols-2 > :is(figure,.wp-block-cover){height:300px} :root .is-style-ww-gallery-grid > .wp-block-cover{padding:14px 12px} :root .is-style-ww-gallery-grid > figure > figcaption,:root .is-style-ww-gallery-grid > .wp-block-gallery > figcaption{left:12px;bottom:14px;font-size:10px} :root .is-style-ww-photo-stack{min-height:380px} :root .is-style-ww-photo-stack > .wp-block-cover:first-child{height:370px} :root .is-style-ww-photo-stack > .wp-block-cover:nth-child(2){right:-9px;bottom:-11px;width:45%;height:186px;border-width:7px} :root .is-style-ww-photo-stack > p.is-style-ww-badge{left:12px;bottom:21px;padding:13px 14px} :root h2.is-style-ww-bar,:root .is-style-ww-benefits :is(h2,h3){font-size:25px} .ww-finder{padding:23px} .ww-finder .field-grid{grid-template-columns:1fr;gap:14px} .ww-finder .result-item{flex-direction:column;align-items:stretch} .ww-finder .result-request{width:100%} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} :root [class*="is-style-ww-"],:root [class*="is-style-ww-"] *{transition:none!important} } /* -------------------------------------------------------------------------- 13. Nur im Editor: Bilderserie aufgeklappt zeigen, damit alle Bilder bearbeitbar sind -------------------------------------------------------------------------- */ .editor-styles-wrapper .wp-block-gallery.is-style-ww-slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;height:auto} .editor-styles-wrapper .wp-block-gallery.is-style-ww-slides > .wp-block-image{position:relative!important;display:block;height:120px} .editor-styles-wrapper .is-style-ww-gallery-grid > figure.wp-block-gallery{height:auto;min-height:240px} .editor-styles-wrapper .is-style-ww-gallery-grid > figure.wp-block-image img{height:240px}