/* ============================================================ * Wonnegau-Berggemeinden · Phase 2 · Pattern- und Block-Style-CSS * ------------------------------------------------------------ * Wird sowohl im Frontend (wp_enqueue_scripts) als auch im * Block-Editor (add_editor_style) eingebunden — die Block-Styles * .is-style-eins, .is-style-polaroid, .is-style-card etc. * sollen in der Editor-Vorschau identisch wirken. * * Alle Token-Referenzen via var(--wp--preset--…) bzw. * var(--wp--custom--…) — WordPress generiert die aus theme.json. * ============================================================ */ /* ------------------------------------------------------------ * 0 · Globale Mechanik * ------------------------------------------------------------ */ /* Fokus-Ring überall sichtbar — doppelter Ring trägt auf hell und dunkel. Werte aus settings.custom.focus. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), .wp-block-button__link, .wp-block-navigation-item__content):focus-visible { outline: var(--wp--custom--focus--ring--width, 3px) solid var(--wp--custom--focus--ring--color, #171311); outline-offset: var(--wp--custom--focus--ring--offset, 2px); box-shadow: 0 0 0 calc(var(--wp--custom--focus--ring--offset, 2px) + 1px) var(--wp--preset--color--paper, #fdfaf3); border-radius: var(--wp--custom--radius--md, 10px); } /* prefers-reduced-motion: Mikroanimationen abschalten. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip-Link: visuell versteckt, bei Fokus sichtbar. */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--ink, #171311); color: var(--wp--preset--color--paper, #fdfaf3); font-family: var(--wp--preset--font-family--sans); font-weight: 600; text-decoration: none; z-index: var(--wp--custom--z-index--toast, 900); } .skip-link:focus { left: 1rem; top: 1rem; } /* ------------------------------------------------------------ * 1 · Senf-Highlight auf "eins." · Hybrid + Squiggle * ------------------------------------------------------------ * Markup: * eins. * * Hintergrund: transparent. Squiggle als wiederholendes SVG * unten, abgeleitet aus der Bildmarken-Senf-Welle. * ------------------------------------------------------------ */ mark.is-style-eins, .is-style-eins { background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-position: 0 100%; background-size: auto 0.32em; padding-bottom: 0.18em; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ------------------------------------------------------------ * 2 · Button-Variationen * ------------------------------------------------------------ */ /* Senf-CTA · Primary Action */ .wp-block-button.is-style-senf-cta > .wp-block-button__link, .wp-block-button.is-style-senf-cta .wp-block-button__link { background-color: var(--wp--preset--color--mustard, #d5a849); color: var(--wp--preset--color--ink, #171311); border-radius: var(--wp--custom--radius--md, 10px); font-family: var(--wp--preset--font-family--sans); font-weight: 600; padding: 0.875rem 1.5rem; box-shadow: var(--wp--custom--shadow--sm); transition: transform var(--wp--custom--motion--duration--base, 200ms) var(--wp--custom--motion--easing, ease), box-shadow var(--wp--custom--motion--duration--base, 200ms) var(--wp--custom--motion--easing, ease); } .wp-block-button.is-style-senf-cta > .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: var(--wp--custom--shadow--md); } .wp-block-button.is-style-senf-cta > .wp-block-button__link:active { transform: translateY(0); box-shadow: var(--wp--custom--shadow--sm); } /* Outline · Secondary */ .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--ink, #171311); border: 2px solid var(--wp--preset--color--ink, #171311); border-radius: var(--wp--custom--radius--md, 10px); padding: calc(0.875rem - 2px) calc(1.5rem - 2px); font-family: var(--wp--preset--font-family--sans); font-weight: 600; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background-color: var(--wp--preset--color--ink, #171311); color: var(--wp--preset--color--paper, #fdfaf3); } /* ------------------------------------------------------------ * 3 · Polaroid · Bild-Rahmung * ------------------------------------------------------------ * Markup: *
* ... *
...
(optional) *
* * Werte aus settings.custom.polaroid: * padding 12/12/36/12 · BG cream · shadow md · Tape-Highlight Senf * ------------------------------------------------------------ */ .wp-block-image.is-style-polaroid, .wp-block-image.is-style-polaroid-tilt-left, .wp-block-image.is-style-polaroid-tilt-right { position: relative; padding: var(--wp--custom--polaroid--padding, 12px 12px 36px 12px); background: var(--wp--custom--polaroid--background, #fbf7ef); box-shadow: var(--wp--custom--polaroid--shadow, 0 12px 28px -16px rgba(23,19,17,0.36)); max-width: max-content; margin-inline: auto; } .wp-block-image.is-style-polaroid > img, .wp-block-image.is-style-polaroid-tilt-left > img, .wp-block-image.is-style-polaroid-tilt-right > img { display: block; border-radius: 0; } .wp-block-image.is-style-polaroid > figcaption, .wp-block-image.is-style-polaroid-tilt-left > figcaption, .wp-block-image.is-style-polaroid-tilt-right > figcaption { margin-top: 0.875rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--mute); text-align: center; } /* Tape · kleines Senf-Rechteck oben Mitte */ .wp-block-image.is-style-polaroid::before, .wp-block-image.is-style-polaroid-tilt-left::before, .wp-block-image.is-style-polaroid-tilt-right::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 64px; height: 18px; background: var(--wp--custom--polaroid--tape, rgba(213,168,73,0.55)); z-index: 1; } .wp-block-image.is-style-polaroid-tilt-left { transform: rotate(-1.5deg); } .wp-block-image.is-style-polaroid-tilt-right { transform: rotate( 1.5deg); } /* ------------------------------------------------------------ * 4 · Group-Variationen * ------------------------------------------------------------ */ /* Karte · cream-BG + sm-Shadow + lg-Radius */ .wp-block-group.is-style-card { background: var(--wp--preset--color--cream, #fbf7ef); border-radius: var(--wp--custom--radius--lg, 14px); box-shadow: var(--wp--custom--shadow--sm); padding: var(--wp--preset--spacing--50, 1.5rem); } /* Karte · gestrichelter Rahmen (CTA-Variante 4) */ .wp-block-group.is-style-card-dashed { background: transparent; border: 2px dashed var(--wp--preset--color--ink, #171311); border-radius: var(--wp--custom--radius--lg, 14px); padding: var(--wp--preset--spacing--60, 2rem); } /* ------------------------------------------------------------ * 5 · Gemeinde-Kachel-Helfer * ------------------------------------------------------------ * Wird in sechs-gemeinden.html als Wrapper-Klasse mit * inline-Stil background-color: var(--wp--preset--color--) * ergänzt — Hover-Lift kommt von hier. * ------------------------------------------------------------ */ .wb-gemeinde-tile { display: block; text-decoration: none; color: inherit; border-radius: var(--wp--custom--radius--lg, 14px); padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--60, 2rem); transition: transform var(--wp--custom--motion--duration--base, 200ms) var(--wp--custom--motion--easing, ease), box-shadow var(--wp--custom--motion--duration--base, 200ms) var(--wp--custom--motion--easing, ease); box-shadow: var(--wp--custom--shadow--sm); } .wb-gemeinde-tile:hover { transform: translateY(-3px); box-shadow: var(--wp--custom--shadow--md); } /* ------------------------------------------------------------ * 6 · Status-Pille (Phase 3 vorbereitet — schon nutzbar) * ------------------------------------------------------------ */ .wb-status { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.25rem 0.625rem; border-radius: var(--wp--custom--radius--sm, 6px); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--paper); } .wb-status--urlaub { background: var(--wp--custom--status--urlaub, #5b8aa7); } .wb-status--hinweis { background: var(--wp--custom--status--hinweis, #855b7e); } .wb-status--verschiebung { background: var(--wp--custom--status--verschiebung, #d5a849); color: var(--wp--preset--color--ink); } .wb-status--ausfall { background: var(--wp--custom--status--ausfall, #8a3c33); } .wb-status--neu { background: var(--wp--custom--status--neu, #6f9669); } /* ------------------------------------------------------------ * 7 · Gemeinde-Pille (für Termine-Liste, Aktuelles-Tags) * ------------------------------------------------------------ */ .wb-pill { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--wp--custom--radius--pill, 999px); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-decoration: none; line-height: 1.4; } /* Defaults für die sechs Gemeinden — Textfarben gewählt nach Kontrastregel aus farbsystem.md. */ .wb-pill--westhofen { background: var(--wp--preset--color--westhofen); color: var(--wp--preset--color--ink); } .wb-pill--osthofen { background: var(--wp--preset--color--osthofen); color: var(--wp--preset--color--ink); } .wb-pill--bechtheim { background: var(--wp--preset--color--bechtheim); color: var(--wp--preset--color--ink); } .wb-pill--monzernheim { background: var(--wp--preset--color--monzernheim); color: var(--wp--preset--color--paper); } .wb-pill--dittelsheim { background: var(--wp--preset--color--dittelsheim); color: var(--wp--preset--color--ink); } .wb-pill--dorn { background: var(--wp--preset--color--dorn); color: var(--wp--preset--color--paper); } /* ------------------------------------------------------------ * 8 · Trenner-Familie · 5 Varianten als Block-Styles auf core/separator * ------------------------------------------------------------ */ /* (a) Linie · feine Tinte-Linie über contentSize */ .wp-block-separator.is-style-wb-line { border: 0; border-top: 1px solid var(--wp--preset--color--rule); margin-block: var(--wp--preset--spacing--60, 2rem); height: 0; max-width: var(--wp--style--global--content-size, 720px); width: 100%; opacity: 1; } /* (b) Sechs Punkte · in den sechs Gemeindefarben */ .wp-block-separator.is-style-wb-sechs-punkte { border: 0; background: none; margin-block: var(--wp--preset--spacing--60, 2rem); height: auto; text-align: center; overflow: visible; /* Sechs CSS-Generated-Punkte */ display: flex; justify-content: center; align-items: center; gap: 0.875rem; opacity: 1; } .wp-block-separator.is-style-wb-sechs-punkte::before { content: ""; display: block; width: 100%; height: 0; } .wp-block-separator.is-style-wb-sechs-punkte::after { content: ""; display: inline-flex; gap: 0.875rem; width: auto; height: 10px; background-image: radial-gradient(circle, var(--wp--preset--color--westhofen) 60%, transparent 62%), radial-gradient(circle, var(--wp--preset--color--osthofen) 60%, transparent 62%), radial-gradient(circle, var(--wp--preset--color--bechtheim) 60%, transparent 62%), radial-gradient(circle, var(--wp--preset--color--monzernheim) 60%, transparent 62%), radial-gradient(circle, var(--wp--preset--color--dittelsheim) 60%, transparent 62%), radial-gradient(circle, var(--wp--preset--color--dorn) 60%, transparent 62%); background-repeat: no-repeat; background-size: 10px 10px; background-position: 0 center, 18px center, 36px center, 54px center, 72px center, 90px center; width: 100px; } /* (c) Senf-Welle */ .wp-block-separator.is-style-wb-welle { border: 0; background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-position: center; background-size: 64px 16px; height: 16px; margin-block: var(--wp--preset--spacing--60, 2rem); max-width: 280px; margin-inline: auto; opacity: 1; } /* (d) Hügel · weiche Doppelhügel-Silhouette */ .wp-block-separator.is-style-wb-huegel { border: 0; background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center bottom; background-size: 240px 24px; height: 24px; margin-block: var(--wp--preset--spacing--60, 2rem); opacity: 1; } /* (e) Bibelvers · Trenner kommt als eigenes Pattern (bibelvers-block), nicht als Separator-Style — der Vers ist Inhalt, kein Separator. */ /* ------------------------------------------------------------ * 9 · Termine-Liste-Helfer * ------------------------------------------------------------ */ .wb-termin { display: grid; grid-template-columns: 88px 1fr auto; gap: 1.5rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); } .wb-termin:last-child { border-bottom: 0; } .wb-termin__datum { font-family: var(--wp--preset--font-family--display); font-weight: 800; line-height: 1; text-align: center; color: var(--wp--preset--color--ink); } .wb-termin__datum-tag { display: block; font-size: 2.25rem; letter-spacing: -0.02em; } .wb-termin__datum-monat { display: block; margin-top: 0.25rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--mute); } .wb-termin__titel { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--h3); line-height: 1.2; margin: 0 0 0.25rem 0; color: var(--wp--preset--color--ink); } .wb-termin__meta { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--mute); line-height: 1.5; } .wb-termin__pille { align-self: start; } /* ------------------------------------------------------------ * 10 · Sprach-Pille DE / EN / LS (im Header) * ------------------------------------------------------------ */ .wb-lang-pill { display: inline-flex; gap: 1px; background: var(--wp--preset--color--rule); padding: 2px; border-radius: var(--wp--custom--radius--pill, 999px); overflow: hidden; } .wb-lang-pill__item { padding: 0.375rem 0.75rem; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); text-decoration: none; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: var(--wp--custom--radius--pill, 999px); min-height: 32px; display: inline-flex; align-items: center; } .wb-lang-pill__item[aria-current="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); } /* ------------------------------------------------------------ * 11 · Eyebrow (Mono-Label über Section-Headlines) * ------------------------------------------------------------ */ .wb-eyebrow { display: inline-block; margin-bottom: 0.75rem; font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; /* a11y: dunkler als --mute, damit Mono-Eyebrow auf Bone/Cream >= 4.5:1 (AA) erreicht */ color: #645b4e; } /* ── Hero · Startseite (Original hero-area.png) ─────────────────────── */ .wb-hero { display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch; } .wb-hero__text { align-self:center; padding:clamp(48px,6vw,84px) clamp(28px,3.5vw,56px) clamp(48px,6vw,84px) clamp(24px,6vw,130px); } .wb-hero__media { position:relative; align-self:stretch; } .wb-hero__img { display:block; width:100%; height:100%; min-height:540px; object-fit:cover; border-radius:18px 0 0 18px; } /* „eins." gefüllter Senf-Kasten (kein Squiggle) */ mark.is-style-eins, .is-style-eins { background:var(--wp--preset--color--mustard) !important; color:var(--wp--preset--color--ink) !important; display:inline-block; line-height:.9; padding:0 .14em .04em !important; border-radius:8px !important; box-decoration-break:clone; -webkit-box-decoration-break:clone; } /* Senf-Badge · ragt links heraus */ .wb-hero__badge { position:absolute; left:-36px; bottom:40px; display:inline-flex; align-items:center; gap:14px; background:var(--wp--preset--color--mustard); color:var(--wp--preset--color--ink); padding:12px 20px 12px 12px; border-radius:14px; box-shadow:0 14px 34px rgba(23,19,17,.22); } .wb-hero__badge-logo { display:block; width:44px; height:44px; border-radius:9px; } .wb-hero__badge-text { display:flex; flex-direction:column; line-height:1; } .wb-hero__badge-title { font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:18px; white-space:nowrap; } .wb-hero__badge-sub { font-family:var(--wp--preset--font-family--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-top:6px; color:var(--wp--preset--color--ink-soft); } /* Ink-CTA Button */ .wp-block-button.is-style-ink-cta > .wp-block-button__link, .wp-block-button.is-style-ink-cta .wp-block-button__link { background-color:var(--wp--preset--color--ink); color:var(--wp--preset--color--bone); border:none; border-radius:10px; padding:16px 28px; font-family:var(--wp--preset--font-family--sans); font-weight:600; font-size:16px; line-height:1; } .wp-block-button.is-style-ink-cta > .wp-block-button__link:hover { background-color:#2a2320; } @media (max-width:900px){ .wb-hero { grid-template-columns:1fr; } .wb-hero__text { padding:40px clamp(20px,5vw,40px) 24px; } .wb-hero__media { min-height:340px; } .wb-hero__img { border-radius:0; min-height:340px; } .wb-hero__badge { left:16px; bottom:16px; } .wb-hero__badge-title { white-space:normal; } } /* ── Lebensfeste · Maße/Struktur exakt aus GM-Handoff, Farben aus Palette (Original) ── */ .wb-lf-block { width:100%; } .wb-lf-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 16px; } .wb-lf-card { display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:220px; padding:22px; border-radius:14px; } .wb-lf-card h3 { font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:28px; line-height:1.05; letter-spacing:-.01em; margin:0; } .wb-lf-card > p:not(.wb-lf-cta) { font-size:15px; line-height:1.5; margin:8px 0 0; } .wb-lf-cta { font-size:15px; font-weight:600; margin:0; } .wb-lf-cta a { text-decoration:none; color:inherit; } .wb-lf-card--taufe { background:var(--wp--preset--color--mustard); color:var(--wp--preset--color--ink); } .wb-lf-card--konfi { background:var(--wp--preset--color--wine); color:var(--wp--preset--color--bone); } .wb-lf-card--trauung { background:var(--wp--preset--color--sky); color:var(--wp--preset--color--bone); } .wb-lf-card--jubel { background:var(--wp--preset--color--viola); color:var(--wp--preset--color--bone); } .wb-lf-card--veranstaltung { background:var(--wp--preset--color--tanne); color:var(--wp--preset--color--bone); } .wb-lf-card--taufe p, .wb-lf-card--taufe a, .wb-lf-card--taufe h3 { color:var(--wp--preset--color--ink); } .wb-lf-card--konfi h3, .wb-lf-card--trauung h3, .wb-lf-card--jubel h3, .wb-lf-card--veranstaltung h3 { color:var(--wp--preset--color--bone); } .wb-lf-bestattung__title { color:var(--wp--preset--color--bone); } .wb-lf-bestattung { margin-top:16px; padding:22px 26px; background:var(--wp--preset--color--ink); color:var(--wp--preset--color--bone); border-radius:14px; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; } .wb-lf-bestattung__bar { width:8px; height:40px; background:var(--wp--preset--color--mute); border-radius:4px; } .wb-lf-bestattung__title { font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:22px; line-height:1.1; margin:0; } .wb-lf-bestattung__text p { font-size:15px; color:rgba(244,238,226,.85); margin:4px 0 0; } .wb-lf-bestattung__link { color:var(--wp--preset--color--bone); font-weight:600; font-size:15px; border-bottom:2px solid var(--wp--preset--color--bone); padding-bottom:2px; white-space:nowrap; text-decoration:none; } @media(max-width:960px){ .wb-lf-cards{ grid-template-columns:repeat(2,1fr);} } @media(max-width:640px){ .wb-lf-cards{ grid-template-columns:1fr;} .wb-lf-bestattung{ grid-template-columns:1fr;} .wb-lf-bestattung__bar{ display:none;} } .wb-lf-card--konfi p, .wb-lf-card--konfi a, .wb-lf-card--trauung p, .wb-lf-card--trauung a, .wb-lf-card--jubel p, .wb-lf-card--jubel a, .wb-lf-card--veranstaltung p, .wb-lf-card--veranstaltung a { color: var(--wp--preset--color--bone); } /* ------------------------------------------------------------ * Screenreader-only (WCAG) — visuell versteckt, für AT lesbar. * Wird für versteckte H1 (z. B. /termine/) und Drawer-Titel genutzt. * ------------------------------------------------------------ */ .screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed !important; top: 1rem; left: 1rem; width: auto; height: auto; padding: 12px 20px; clip: auto; white-space: normal; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); z-index: 1000; }