/**
* jp-501-starthilfe-link-boxen.css —
* "Starthilfe für deinen JTL-Wawi Download (lookalike: Link-Boxen)" Update
* treatment for `section.wawi-tutorial-section.orange` per Figma 1039:8500
* (and the sibling "Wir begleiten dein Onboarding" panel per Figma 1039:8808).
*
* Origin ticket: JP-501.
* Figma main: https://www.figma.com/design/OuKNi0en9ZSh5MM06BGibH/JTL-Website-Modules-2?node-id=1039-8500
* Figma webinar tile: https://www.figma.com/design/OuKNi0en9ZSh5MM06BGibH/JTL-Website-Modules-2?node-id=1039-8627
* Figma video tile: https://www.figma.com/design/OuKNi0en9ZSh5MM06BGibH/JTL-Website-Modules-2?node-id=1039-8581
* Figma Wir Begleiten: https://www.figma.com/design/OuKNi0en9ZSh5MM06BGibH/JTL-Website-Modules-2?node-id=1039-8808
*
* Scope (cascading — NOT body-locked):
* `section.wawi-tutorial-section.orange .container-card-wawi-tutorial`
* naturally fires on only the 2 jtl-wawi-download pages (DE page-id 31 +
* EN page-id 268079) because no other page renders the `.orange` variant
* with this chrome combination.
*
* Goal:
* 1. Outer card → JTL Tech Blue panel.
* 2. Header eyebrow → Light Blue `#89d2ff` (was painted teal-mint via
* a `background-clip: text` gradient in the legacy theme).
* 3. Heading → white Kurdis Wide Bold; body → white Inter Regular.
* 4. Video tiles → Figma-exported orange-illustration thumbnails
* (Neu-Installation / Im Überblick), play icon already baked into
* the asset. Hide the legacy FA play overlay + the link bar below
* the tile.
* 5. Webinar tile → JTL Light Blue panel, Inter SemiBold title row with
* lamp icon right, "Mein Start mit JTL" Inter SemiBold 20/28 with
* NO arrow prefix (the legacy `swiper-slide__title` chevron was
* misleading), "Jeden Dienstag um 13 Uhr" small caption, "Jetzt
* anmelden" row with arrow at right.
* 6. "Installationsanleitung im JTL-Guide" → white outline pill on
* Tech-Blue.
* 7. Sibling `.product-subcard-widget` "Wir begleiten dein Onboarding"
* panel → flat WHITE card with Dark-Blue Kurdis heading, Dark-Blue
* body, solid Orange pill primary button (per Figma 1039:8808).
* Also dropped from the right-overlap position into a full-width
* sibling below the Tech-Blue card.
*
* Custom asset URLs (uploaded outside any media-library track —
* registered manually via docker cp into /var/www/html/uploads/2026/06/):
* https://dev-jtl-trung.betterscale.dev/uploads/2026/06/jp501-neu-installation.png
* https://dev-jtl-trung.betterscale.dev/uploads/2026/06/jp501-im-ueberblick.png
*
* Design tokens (hardcoded — Phase 2.2 SCSS tokens file not yet shipped):
* #2722f8 = JTL Tech Blue (outer panel)
* #0b1b45 = JTL Dark Blue (tile text, button text)
* #89d2ff = JTL Light Blue (eyebrow, webinar bg)
* #ffffff = white (headings + Wir Begleiten bg)
* #fb581f = JTL Orange (SERVICE ANFRAGEN pill)
*
* Per CLAUDE.md rule 4 — eyebrow / heading / body / tile labels stay
* editor-set. The Figma's custom video thumbnails are inserted as image
* assets and pinned via CSS over the legacy YouTube auto-thumb URL.
*
* `!important` on most rules: the legacy `.container-card-wawi-tutorial`
* + `.wawi-tutorial-section` + an inline `style="background-image:url(...)"`
* on `.embed-cover` need to be beaten. Inline-style without `!important`
* loses to external CSS with `!important`, which is what we use.
*/
/* ── Outer card — Tech Blue panel ────────────────────────────────────── */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial {
background: #2722f8 !important;
background-color: #2722f8 !important;
background-image: none !important;
border: 0 !important;
border-radius: 32px !important;
box-shadow: none !important;
}
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .card-body {
background: transparent !important;
padding: 56px 64px 40px !important;
}
/* ── Header (eyebrow + heading + body) — Light-Blue eyebrow + white text */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__content {
max-width: 760px;
margin-bottom: 40px;
}
/* Kill the legacy `::after` pseudo "BERATUNG VEREINBAREN" orange pill
* painted by an earlier override. Figma has no in-card CTA on the header. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__content::after,
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__content::before {
content: none !important;
display: none !important;
background: none !important;
}
/* Eyebrow — JTL Light Blue Inter SemiBold 18/24 0.9px uppercase
* (the legacy theme paints this via background-clip:text + a teal→mint
* gradient + transparent text-fill — kill the gradient layer or the
* solid color is invisible). */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__subtitle {
color: #89d2ff !important;
-webkit-text-fill-color: #89d2ff !important;
font-family: Inter, sans-serif !important;
font-weight: 600 !important;
font-size: 18px !important;
line-height: 24px !important;
letter-spacing: 0.9px !important;
text-transform: uppercase !important;
margin: 0 0 8px;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* Heading — Kurdis Wide Bold white 32/46. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-family: "Kurdis Wide", "Kurdis", Inter, sans-serif !important;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 46px !important;
letter-spacing: 0.64px !important;
margin: 0 0 16px;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__title::before,
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__title::after {
content: none !important;
display: none !important;
}
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__text,
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-section__text p {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-family: Inter, sans-serif !important;
font-weight: 400 !important;
font-size: 18px !important;
line-height: 28px !important;
margin: 0;
}
/* ── Tile row — 3 link-boxen, even gap.
* `align-items: start` so each tile sizes to its own intrinsic content
* (video tiles → 16:9 from aspect-ratio; webinar tile → natural height
* from text). With `stretch` the taller webinar tile forced the 16:9
* video tiles to match height, cropping the baked-in illustration. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
margin: 0 0 40px !important;
align-items: start !important;
}
/* ── VIDEO TILES — custom Figma-exported orange-illustration thumbnails
* with baked-in play icon. Hide the legacy FA play overlay AND the
* link bar below the tile (Figma shows none). */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__item.wawi-tutorial-widget__video-item {
background: transparent !important;
border: 0 !important;
border-radius: 24px !important;
box-shadow: none !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
aspect-ratio: 16 / 9 !important;
min-height: 0 !important; /* theme pins min-height: 306px which fights the 16:9 aspect ratio */
height: auto !important;
}
/* The first `.embed-cover` child is a static "click area" duplicate; the
* lazy-loaded one is the visible thumb. Both get the same custom bg. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item .embed-cover {
border-radius: 24px !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
width: 100% !important;
height: 100% !important;
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
}
/* Per-tile thumbnail swap — match by youtube ID. The widget renders
* `data-youtube-id` on the `__video-item` wrapper AND `data-id` on the
* inner `.embed-cover`. Both work; we use the more specific descendant
* selector to be safe. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item[data-youtube-id="yDA9_YFdiVo"] .embed-cover {
background-image: url('/uploads/2026/06/jp501-neu-installation.png') !important;
}
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item[data-youtube-id="sNYv0JgrUlw"] .embed-cover {
background-image: url('/uploads/2026/06/jp501-im-ueberblick.png') !important;
}
/* Add a centered ORANGE play-circle overlay on each video tile (the
* Figma thumbnail illustration is the bg; the play button is a separate
* overlay per Figma node 1039:8581 > Vector). Hide the legacy FA play
* glyph since we paint our own via ::after. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item .embed-play {
display: none !important;
}
/* Both selectors targeted because the live DOM applies `.visually-hidden`
* to each `__video-item` AS A STATE FLAG (not for SR-only) — and the
* legacy `style.css` has `.visually-hidden::after { display:none }` which
* would hide our orange play overlay. Match the legacy specificity AND
* the bare selector to win both ways. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item.visually-hidden::after,
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item::after {
content: "" !important;
display: block !important;
position: absolute !important;
/* `inset` shorthand MUST come before individual top/left/right/bottom
* or it resets them all to `auto`. Without this discipline the play
* overlay anchored at top:0/left:0 instead of centered. */
inset: auto !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
width: 70px !important;
height: 70px !important;
z-index: 3 !important;
pointer-events: none !important;
background-color: transparent !important;
background-image: url("/uploads/2026/06/jp501-play-v2.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 70px 70px !important;
}
/* Hide the link bar (text + arrow) below the tile — Figma has no caption
* under the video card; the message is part of the illustration. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__video-item .wawi-tutorial-widget__video-item--link {
display: none !important;
}
/* ── WEBINAR TILE (Light Blue) — Figma 1039:8627 ─────────────────────── */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__item.wawi-tutorial-widget__text-item {
background: #89d2ff !important;
background-color: #89d2ff !important;
border: 0 !important;
border-radius: 24px !important;
box-shadow: none !important;
padding: 16px 20px !important;
color: #0b1b45 !important;
-webkit-text-fill-color: #0b1b45 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
position: relative !important;
/* Match the 16:9 video-tile height so all 3 cards in the row line up. */
aspect-ratio: 16 / 9 !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
/* The plugin pins `margin-top: 50px` on `.has-hint-icon` inside
* `@media (max-width: 1400px)` — that was meant for the legacy 1-col
* collapse the plugin does at <=1400px. We keep 3 columns down to
* 991.98px (grid rule above), so that 50px shoves THIS tile 50px below
* the two video tiles and breaks the row (visible ~992-1400px, e.g.
* 1200px tablet). The grid's own `gap: 24px` already spaces the tiles in
* both the 3-col and the 1-col (<=991.98px) layouts, so the margin is
* pure breakage — zero it at every width. */
margin-top: 0 !important;
}
/* Swap the legacy plugin lamp/hint icon (86×86 absolute pseudo via
* `.has-hint-icon::before` with a plugin-tree URL) for the Figma lamp
* SVG (Dark-Blue lamp-on icon, 33×33), positioned same row as the
* "Kostenloses Live-Webinar" title, top-right corner. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__text-item.has-hint-icon::before {
content: "" !important;
position: absolute !important;
top: 20px !important;
right: 20px !important;
left: auto !important;
bottom: auto !important;
width: 33px !important;
height: 33px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33' fill='none'%3E%3Cpath d='M26.4137 8.745C24.9837 5.8575 22.22 3.72625 19.0162 3.025C15.6612 2.2825 12.2238 3.08 9.5975 5.1975C6.9575 7.30125 5.45875 10.45 5.45875 13.8187C5.45875 17.38 7.59 21.1062 10.8075 23.265V24.4062C10.7938 24.7912 10.78 25.3825 11.2475 25.8638C11.7288 26.3588 12.4437 26.4137 13.0075 26.4137H20.0613C20.8038 26.4137 21.3675 26.2075 21.7525 25.8225C22.275 25.2863 22.2613 24.5988 22.2475 24.2275V23.265C26.51 20.3912 29.1912 14.3275 26.4137 8.745Z' fill='%230b1b45'/%3E%3Cpath d='M20.9825 30.25C20.9 30.25 20.8038 30.2362 20.7213 30.2087C17.9575 29.425 15.0563 29.425 12.2925 30.2087C11.7838 30.3462 11.2475 30.0575 11.11 29.5488C10.9588 29.04 11.2613 28.5037 11.77 28.3662C14.8775 27.4862 18.15 27.4862 21.2575 28.3662C21.7663 28.5175 22.0688 29.04 21.9175 29.5488C21.78 29.975 21.395 30.25 20.9825 30.25Z' fill='%230b1b45'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 33px 33px !important;
z-index: 2 !important;
transform: none !important;
margin: 0 !important;
}
/* Force Dark-Blue text on EVERY descendant so the legacy theme's
* Tech-Blue/grey overrides on h3/h4/etc. all flip. */
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__text-item,
section.wawi-tutorial-section.wawi-tutorial-section.orange .container-card-wawi-tutorial.container-card-wawi-tutorial .wawi-tutorial-widget__text-item *:not(svg):not(svg *):not(.hint-icon):not(.hint-icon *) {
color: #0b1b45 !important;
-webkit-text-fill-color: #0b1b45 !important;
}
/* DOM inside the webinar tile (live):
*
*