/* Section H2 titles: fully bold Kurdis Wide Bold, per Figma (nodes 2248:11432 /
   11801 / 11929 / 12363 / 12392). They were rendering half-regular because the base
   weight was pinned to 400 while only the editor's .font-weight-bold spans stayed
   bold - which is the bold/regular mix the client reported. Setting the whole title
   (and its inline spans) to 700 makes each heading uniform regardless of how the
   words were split in the editor. */
body.page-id-288453 main section:not(.section-1690) .redesign-styles__title,
body.page-id-288453 main section:not(.section-1690) .redesign-styles__title .font-weight-bold,
body.page-id-288453 main section:not(.section-1690) .redesign-styles__title strong {
    font-family: "Kurdis Wide Bold", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
}

/* Exception - section 9 ("Nutzerfreundlichkeit, UX & SEO-Signale im Onlineshop",
   EN "User-friendliness, UX & SEO signals in the online store"). Figma node
   2248:12560 draws THIS title differently from the other six: Inter, with the lead
   phrase bold and the trailing " im Onlineshop" / " in the online store" regular.
   The heading already carries the lead in a .font-weight-bold span and the tail as
   bare text, so keep that split and switch the family to Inter. Both twins share
   this section position (nth-of-type 9 on DE and EN); page-id-288453 is stamped on
   both, and #content adds the specificity to beat the all-bold rule above. */
body.page-id-288453 #content > section:nth-of-type(9) .redesign-styles__title {
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
}
body.page-id-288453 #content > section:nth-of-type(9) .redesign-styles__title .font-weight-bold,
body.page-id-288453 #content > section:nth-of-type(9) .redesign-styles__title strong {
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
}

body.page-id-288453 main section:has(.decorated-container) > .container,
body.page-id-288453 main section.product-management-section > .container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

body.page-id-288453 main section.hero-product-section > .container {
    padding-bottom: 32px;
}

@media (min-width: 992px) {
    body.page-id-288453 main > section.product-management-section:last-of-type > .container {
        padding-top: 96px !important;
    }
}


body.page-id-288453 .decorated-container-inner.topic-gap-compact {
  /* !important beats the DecoratedContainer widget's own inner top padding. */
  padding-top: 0 !important;
}


body.page-id-288453 .decorated-container-inner .decorated-container-wrapper,
body.page-id-288453 .decorated-container-inner .decorated-container-wrapper .decorated-container {
    background: #fff !important;
}

/* Purple corner "square" overlays are decorative blobs from the same variant
   and are not in the redesign. Remove them. */
body.page-id-288453 .decorated-container-inner .decorated-container-square-overlay {
    display: none !important;
}

/* -- Accents: violet #814FF0 -> tech blue -------------------------------- */

/* Every list arrow carries an author-set inline color:#814FF0 (a leftover
   placeholder violet, not a brand token); the numbered-list numbers and any
   other inline #814FF0 accent share it. Repaint them all tech blue. !important
   is required because the colour is an inline style attribute, which no selector
   outranks without it. */
body.page-id-288453 [style*="#814FF0"],
body.page-id-288453 [style*="#814ff0"],
body.page-id-288453 .list-widget__item--icon,
body.page-id-288453 .list-widget__item--icon i,
body.page-id-288453 .numbered-list-widget__item--number {
    color: #2722f8 !important;
}

/* -- Sub-headings inside the bands -------------------------------------- */

/* Size, weight and line-height (24/32/700) already come from the heading
   component and are correct. The face is not: a site-wide
   `:is(h3, h4, h5, h6)` rule pins the Kurdis display font on every heading on
   the site, which outranks the component. These sub-headings are Inter in the
   design, so the family is restored here for this page's headings only.
   !important is what beats that blanket; nothing less does. */
body.page-id-288453 #content h3.redesign-styles__heading {
    font-family: Inter, sans-serif !important;
}

/* Colour splits by band, the same way it does on the sibling Ratgeber pages
   (UX-Design Onlineshop, Shopsystem Checkliste): tech blue inside the decorated
   bands, dark blue in the product-management bands. Without the second rule
   those nine headings inherit the product-landing template's gray #333, which
   is the theme's base text colour rather than a designed value. The bands' own
   main titles use .redesign-styles__title and are left alone. */
body.page-id-288453 .decorated-container-inner h3.redesign-styles__heading {
    color: #2722f8 !important;
}
body.page-id-288453 .product-management-section .redesign-styles__heading {
    color: #0b1b45 !important;
}

/* -- Table of contents / anchor navigation ------------------------------ */

/* The "Inhalt" table of contents and the anchor-navigation tabs render in the
   widget's purple colour scheme. Retint them to the brand tech-blue primary /
   light-blue secondary via the widgets' own CSS custom properties. */
body.page-id-288453 .toc-widget.purple-scheme,
body.page-id-288453 .toc-widget-scroll-to-top.purple-scheme {
    --toc-widget-primary-color: #2722f8;
    --toc-widget-secondary-color: #89d2ff;
    --toc-widget-stt-primary-color: #2722f8;
}
body.page-id-288453 .anchor-navigation-tabs.purple-scheme {
    --an-widget-primary-color: #2722f8;
    --an-widget-secondary-color: #89d2ff;
}

/* Only the entry for the section you are on is coloured by the widget (via the
   primary-colour variable set above). Every other entry sets no colour of its
   own and inherits the product-landing template's gray #333, so the list reads
   as gray with one blue item. Bring the inactive entries to dark blue and leave
   the active one to the widget. */
body.page-id-288453 .toc-widget__content--item:not(.is-primary)
    .toc-widget__content--item-button--content__text {
    color: #0b1b45 !important;
}

/* -- Body copy: theme gray #333 -> navy ---------------------------------- */

/* Figma sets body copy to navy #0b1b45 (Inter 16/24); the theme default is gray
   #333. Repaint it across the page. The CTA band's white copy out-specifies this
   rule, so it stays white on the navy card. */
/* The page now renders from an Elementor document, whose own colour choices are
   author-set per element and must not be repainted by this page-wide default -
   the download panel's white copy on the navy card is the case that showed it.
   The exclusion is inert on a legacy render, where there is no Elementor
   subtree, so the rule keeps working unchanged for that markup. */
body.page-id-288453 #content p:not(.elementor *),
body.page-id-288453 #content li:not(.elementor *),
body.page-id-288453 #content strong:not(.elementor *),
body.page-id-288453 #content .figure-caption:not(.elementor *),
body.page-id-288453 #content .redesign-styles__text:not(.elementor *),
body.page-id-288453 #content .redesign-styles__subtitle:not(.elementor *) {
    color: #0b1b45 !important;
}

body.page-id-288453 #content .product-subcard-widget.jtl-box--blue,
body.page-id-288453 #content .basic-br.jtl-box--blue {
    border-radius: 46px !important;
}

/* Card corners: 24px, the radius the Shopsystem Ratgeber cluster gives a content
   card. The topic hub and the comparison checklist already set it exactly this
   way, and the two remaining cluster pages carry it per card via the box
   component's grey variant.

   Five cards on this page - three in the intro band, two in the closing band -
   were matched by no page rule at all and fell through to the component
   library's `.basic-br` default of 46px. 46px is the radius of the light-blue
   info boxes, not of a content card, so those five read as noticeably rounder
   than every other card in the cluster.

   Only the corner is set here. The Light Sand fill on the GAIO comparison cards
   and the white fill on the rest are both intentional and are set elsewhere.

   The two "Weitere Infos / Jetzt weiterlesen" info boxes must keep their 46px,
   and they are excluded by `themenwelten-last-card` rather than by the
   `jtl-box--blue` marker beside it. The marker is written into post_content by a
   migration script that has run on staging but NOT on production: measured on
   both twins, staging renders six `jtl-box--blue` and production renders none.
   A `:not(.jtl-box--blue)` guard on its own therefore selects 20 elements on
   staging and 22 on production, taking both info boxes down to 24px there the
   moment this sheet lands. `themenwelten-last-card` is authored content, present
   on every environment and both languages, and is already the hook the sibling
   checklist and shop-und-wawi sheets use. The blue marker is kept in the
   selector so the rule still reads correctly once that script does run.

   `#app` buys specificity, not scope - it wraps everything from the header to
   the footer. The only thing confining this rule to one page is the page id.

   The German page id is used because WPML stamps it on the English twin's
   <body> too, so this single rule covers both language versions.

   Note this out-specifies the grey variant in the shared `jtl-boxes.css`, which
   sets the same 24px for `jtl-box--grey`. Same value today; a future change to
   the component's corner would not reach this page without editing here too. */
body.page-id-288453 #app .basic-br:not(.jtl-box--blue):not(.themenwelten-last-card) {
    border-radius: 24px !important;
}

/* Sand comparison / content cards: Light Sand fill. The corner is owned by the
   page-wide card rule above and is deliberately not repeated here - two rules
   owning one corner is how the value drifts. (JP-1513 set 20px on this rule;
   no card in the cluster is drawn at 20px, and the value never took effect
   because a leftover sheet on the servers was already forcing 24px.) */
body.page-id-288453 #content > section:nth-of-type(6) .decorated-container-wrapper .basic-br:not(.jtl-box--blue) {
    background: #eeeee7 !important;
}

body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-inner .decorated-container-wrapper,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-inner .decorated-container-wrapper .decorated-container {
    background: #0b1b45 !important;
}

body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .redesign-styles__title,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .redesign-styles__title *,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .col-lg-6 > p,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .col-lg-6 > p *,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .list-widget__item--content,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .list-widget__item--content * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.page-id-288453 #content > section:nth-of-type(7) .list-widget__item--icon,
body.page-id-288453 #content > section:nth-of-type(7) .list-widget__item--icon i {
    color: #89d2ff !important;
}

/* CTA title: one uniform Kurdis Wide Bold weight (Figma 2248:12363 is a single
   weight, not the split lead/tail weight the content-band titles carry). This
   overrides the split-weight rule at the top of the sheet for this band only. */
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .redesign-styles__title,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .redesign-styles__title .font-weight-bold,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .redesign-styles__title strong,
body.page-id-288453 #content > section:nth-of-type(7) .decorated-container-wrapper .redesign-styles__title * {
    font-family: "Kurdis Wide Bold", "Kurdis", "Inter", sans-serif !important;
    font-weight: 700 !important;
}

/* -- Intro cards: the lead line ------------------------------------------ */

/* Each of the three cards in the intro band opens with a lead-in line that
   introduces the arrow list beneath it. It is drawn one step up from body copy
   at 20/24 semibold; today it is the same 16/24 regular as the list, so the
   card reads as one flat block.

   Only the card's own direct-child paragraph is addressed, so the list items
   below it (which are paragraphs too, one level deeper) keep the body size.

   No !important: nothing declares a size, weight or line-height on this
   paragraph anywhere in the loaded CSS - the 16px it renders at is inherited -
   and a declaration always beats an inherited value regardless of specificity.
   The line-height is restated because the inherited one is a ratio, and would
   otherwise grow with the larger font size.

   Colour and family are already correct (navy from this sheet's body-copy rule,
   Inter from the theme) and are deliberately not repeated here - one value, one
   owner, or the two copies drift apart.

   Both page ids are named on this rule and the one below. The German id reaches
   the English twin only through a body-class bridge installed per box rather
   than shipped with the theme, so on a box missing it the rule would apply to
   German alone - the failure a German-only check cannot see. */
body.page-id-288453 #content > section:nth-of-type(3) .grid-item > p,
body.page-id-293972 #content > section:nth-of-type(3) .grid-item > p {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

/* -- Light-blue callouts nested inside a white card: 20px corner ----------
 *
 * A light-blue callout that sits INSIDE the white decorated-container card takes
 * the 20px card corner, not the 46px the page's standalone callouts carry (set by
 * this sheet's page-wide rule above). Keyed structurally on the .decorated-container
 * ancestor so EVERY nested callout is covered: the previous rule pinned only the
 * section-9 band by position and missed a second nested callout in another band,
 * which stayed at 46px - the inconsistency this fixes. On this page the only
 * decorated-containers that hold a blue callout are white (the navy GAIO-Guide box
 * has none), so this cannot reach a callout on a non-white card. The doubled class
 * lifts specificity past the page-wide 46px rule; standalone callouts (not inside a
 * decorated-container) are untouched and stay 46px. page-id-288453 is stamped on
 * both twins. */
body.page-id-288453 #app .decorated-container .jtl-box--blue.jtl-box--blue {
    border-radius: 20px !important;
}

/* -- SEO-factors band: title line-height --------------------------------- */

/* The design draws this title at 32/38. The heading component already asks for
   exactly that - app.css sets `.redesign-styles__title { line-height: 38px }` -
   but the product-landing template overrides every section h2 to 40px, and wins,
   so the component's value never lands. This restores it for this one title.

   !important is unavoidable: the rule being outranked carries it too.

   Scoped by band position rather than by the section anchor, because the anchors
   here are translated (`#anchor-grundlegende-seo-faktoren` against
   `#anchor-fundamental-seo-factors-in-the-online-store`), so an anchor-keyed rule
   would reach one language only.

   Only the line-height is set. The same heading's weight is also wrong, and that
   half is NOT fixed here - which words are bold is authored content, the split
   weight on this page is deliberate, and a stylesheet exception would not reach
   the Elementor build of this page at all. See
   scripts/db/gaio-seo-factors-heading-full-bold.php. */
body.page-id-288453 #content > section:nth-of-type(4) .redesign-styles__title,
body.page-id-293972 #content > section:nth-of-type(4) .redesign-styles__title {
    line-height: 38px !important;
}

/* -- SEO-factors checklist: render the portrait diagram narrower and centred --
   Both language twins now carry the same new portrait illustration; at full
   column width it dominates the band. Cap it (undistorted, height auto) so it
   sits at the scale of the page's other diagrams, centred in its column. Keyed
   on the two asset filenames so each twin is reached and a duplicated page keeps
   the rule. The single width value below is the knob - raise or lower to taste. */
img[src*="seo-grundlagen-onlineshop-sieben-faktoren-checkliste.svg"],
img[src*="seo-basics-online-shop-seven-factors-checklist.svg"] {
    width: min(285px, 55.5%) !important;
    height: auto !important;
    display: block;
    margin-inline: auto;
}