/* ============================================ * Block: Keyvisual Text * ============================================ */ .block-keyvisual-text { --kvt-icon-size: 2rem; /* Die Micro-Spacing-Skala endet bei 24px – die Layout-Abstände dieses Blocks liegen darüber und werden deshalb daraus abgeleitet statt hart gesetzt. */ --kvt-gap: var(--jw-space-24); position: relative; background-color: var(--block-bg, transparent); color: var(--block-text, inherit); } /* ── Layout: Mobile-Basis (eine Spalte, Grafik zuletzt) ── */ .block-keyvisual-text__inner { display: grid; grid-template-columns: 1fr; gap: var(--kvt-gap); } .block-keyvisual-text__col { display: grid; align-content: start; gap: var(--kvt-gap); } .block-keyvisual-text__svg-map { width: 100%; } /* ── Texteintrag ──────────────────────────────── */ .block-keyvisual-text__item { position: relative; /* Bezug für das Klick-Overlay des Kopf-Links */ padding-bottom: var(--kvt-gap); border-bottom: 1px solid var(--block-border, var(--wp--preset--color--gray-800)); /* Zielpunkt für scrollIntoView beim Klick auf ein Segment – hält den fixen Header frei, gleiche Rechnung wie im jw-base accordion-Block. */ scroll-margin-top: calc(var(--header-height, 7.5rem) + var(--jw-space-16, 1rem)); scroll-margin-bottom: var(--jw-space-16); } .block-keyvisual-text__item-head { display: flex; align-items: center; gap: var(--jw-space-20); margin-bottom: var(--jw-space-16); color: inherit; text-decoration: none; } /* Macht den gesamten Eintrag klickbar – nur bei gesetztem Linkziel */ .block-keyvisual-text__item-head[href]::after { content: ""; position: absolute; inset: 0; } .block-keyvisual-text__item-title { margin: 0; font-weight: normal; } .block-keyvisual-text__item-text { margin: 0; padding-left: calc(var(--kvt-icon-size) + var(--jw-space-20)); } /* ── Icon ─────────────────────────────────────── */ .block-keyvisual-text__icon { flex: 0 0 auto; width: var(--kvt-icon-size); height: var(--kvt-icon-size); color: var(--block-heading, var(--wp--preset--color--datacenter)); } .block-keyvisual-text__icon-stroke { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; } /* ── Grafik ───────────────────────────────────── */ .block-keyvisual-text__graphic { display: block; width: 100%; height: auto; overflow: visible; } /* Segmente sind immer klickbar – der Klick rastet die Hervorhebung ein */ .block-keyvisual-text__area { cursor: pointer; } /* ── Hervorhebung (nur über die Grafik ausgelöst) ── */ /* Das Dimming greift auf den Kindern des Texteintrags, nicht auf dem Eintrag selbst: der trägt [data-motion] und damit opacity/transform/transition der Einblend-Animation. Beides auf demselben Element würde die 0.6s-Transition des Motion-Systems überschreiben. */ .block-keyvisual-text__area, .block-keyvisual-text__item > * { transition: opacity 220ms ease; } .block-keyvisual-text[data-active] .block-keyvisual-text__area:not(.is-active), .block-keyvisual-text[data-active] .block-keyvisual-text__item:not(.is-active) > * { opacity: 0.3; } /* ── Fokus ────────────────────────────────────── */ .block-keyvisual-text__item-head:focus-visible { outline: none; } /* Der Fokusring umfasst den ganzen Eintrag, weil auch die ganze Fläche klickbar ist */ .block-keyvisual-text__item:has(.block-keyvisual-text__item-head:focus-visible) { outline: 2px solid var(--block-heading, var(--wp--preset--color--datacenter)); outline-offset: 4px; } /* ── Tooltip (an angehängt) ────────────── */ .block-keyvisual-text__tooltip { position: fixed; z-index: 9999; pointer-events: none; padding: 4px 12px; background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--white); font-size: 16px; font-weight: 700; white-space: nowrap; border-radius: 4px; transform: translate(-50%, -120%); opacity: 0; transition: opacity 120ms ease; } .block-keyvisual-text__tooltip.visible { opacity: 1; } /* ── Tablet: Text zweispaltig, Grafik darunter ── */ @media (min-width: 768px) { .block-keyvisual-text { --kvt-icon-size: 2.5rem; --kvt-gap: calc(var(--jw-space-24) * 2); } /* Die Spalten-Wrapper lösen sich auf, damit beide Spalten dieselben Zeilenhöhen teilen – nur so fluchten die Trennlinien über beide Spalten hinweg. */ .block-keyvisual-text__col { display: contents; } .block-keyvisual-text__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); } .block-keyvisual-text__col--left .block-keyvisual-text__item { grid-column: 1; } .block-keyvisual-text__col--right .block-keyvisual-text__item { grid-column: 2; } .block-keyvisual-text__item:nth-child(1) { grid-row: 1; } .block-keyvisual-text__item:nth-child(2) { grid-row: 2; } .block-keyvisual-text__item:nth-child(3) { grid-row: 3; } .block-keyvisual-text__item:nth-child(4) { grid-row: 4; } .block-keyvisual-text__svg-map { grid-column: 1 / -1; grid-row: 5; justify-self: center; width: min(100%, 480px); } } /* ── Desktop: Grafik zwischen den Textspalten ── */ @media (min-width: 1200px) { .block-keyvisual-text__inner { grid-template-columns: 1fr minmax(0, 34%) 1fr; } .block-keyvisual-text__col--right .block-keyvisual-text__item { grid-column: 3; } /* Die Grafik bleibt beim Scrollen stehen, damit ein hervorgehobenes Segment sichtbar bleibt, während der zugehörige Text gelesen wird. align-self: start ist dabei zwingend – das voreingestellte stretch würde die Zelle auf volle Zeilenhöhe strecken und es bliebe kein Sticky-Spielraum (gleiche Falle wie im jw-base section-Block). */ .block-keyvisual-text__svg-map { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: calc(var(--header-height, 0px) + var(--wp--preset--spacing--s)); width: 100%; } } @media (prefers-reduced-motion: reduce) { .block-keyvisual-text__area, .block-keyvisual-text__item > *, .block-keyvisual-text__tooltip { transition: none; } }