/*
 * divi.world — design corrections that Divi 5 module options cannot express.
 *
 * This file is deliberately short. Everything achievable through Global Colors,
 * presets or module attributes belongs there, not here. Each block below states
 * why the builder could not do it.
 *
 * Colours are referenced through the Global Color custom properties Divi emits,
 * with the design hex as a fallback, so editing a Global Color still propagates.
 */

:root {
  --dw-clay: var(--gcid-bfd69bd6-59c2-4ae9-a1bf-0084cd86f52a, #ea8e64);
  --dw-ink: var(--gcid-bfa19597-ab38-4cd0-92c6-58de984e5b21, #17100f);
  --dw-sage: var(--gcid-d3a9477d-e0ab-416b-9aaa-1454efa9216e, #347764);
  --dw-sage-light: var(--gcid-a864ccdc-af13-4b8b-a374-e06132a112b3, #bdead5);
  --dw-sand: var(--gcid-46bea0bd-089b-418d-ab15-c4c6bbf2a6a9, #fbece3);
  --dw-paper: var(--gcid-48af5080-453c-471d-a9e9-c19045e98786, #fffdfb);
  --dw-creme: #fff3e8;
  --dw-line: #e7e0d9;
  --dw-meta: #6b6259;
  --dw-ink-hover: #3d2b22;
  /* oklch(0.52 0.14 42), converted to the binding support value. */
  --dw-clay-dark: #a8471b;
  /* Hover on a Sand surface: the mocks' oklch(0.9 0.04 55), converted. */
  --dw-sand-hover: #f4d8c5;
}

/* ---------------------------------------------------------------------------
   Kaufen pricing lists.

   A Text module owns rich-text list semantics but has no native control for a
   list marker's colour. Keep the content as a real UL/LI tree in the builder;
   this narrow child-theme rule supplies the Clay markers from the Kaufen comp.
   It deliberately targets only the module hook, not generic site lists. */
.dw-kaufen-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dw-kaufen-list li {
  position: relative;
  padding-left: 20px;
}

.dw-kaufen-list li + li {
  margin-top: 12px;
}

.dw-kaufen-list li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dw-clay);
  content: "";
}

/* ---------------------------------------------------------------------------
   Footer link lists.
   The lists live inside a Text module, and Divi has no list-style control, so
   the theme's default bullets and indent survive. */
.et-l--footer ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.et-l--footer li {
  margin: 0 0 10px;
  line-height: 1.4;
}

.et-l--footer a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #d9d1ca;
}

.et-l--footer a:hover {
  text-decoration-color: var(--dw-ink);
}

/* td-a458d9: the footer's four block groups use the styleguide's space-8
   column gap on desktop. Grid replaces Divi's float/gutter calculation while
   leaving its phone flex-wrap layout untouched. */
@media (min-width: 981px) {
  .et-l--footer .et_pb_row_0_tb_footer.et_pb_row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 48px;
  }

  .et-l--footer .et_pb_row_0_tb_footer.et_pb_row > .et_pb_column {
    width: auto !important;
    margin-right: 0 !important;
  }
}

/* The Mobil comp reduces the global footer to its two useful link blocks.
   The content hub remains reachable from the header/menu, while the brand,
   product and legal destinations stay legible rather than becoming three tiny
   lists on a 375px screen. Desktop keeps the four-column layout above. */
@media (max-width: 767px) {
  .et-l--footer .et_pb_row_0_tb_footer.et_pb_row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .et-l--footer .et_pb_row_0_tb_footer.et_pb_row > .et_pb_column {
    width: 100% !important;
    margin: 0 !important;
  }

  .et-l--footer .et_pb_row_0_tb_footer.et_pb_row > .et_pb_column:first-child {
    margin-bottom: 10px !important;
  }

  .et-l--footer .et_pb_row_0_tb_footer.et_pb_row > .et_pb_column:nth-child(3) {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Blog grid cards.
   The Blog module renders each post as a bordered, boxed article. The design
   wants a borderless card whose separation comes from spacing, and a rounded
   featured image — neither is exposed as a per-post option.
   td-f174f5: a fixed 3:2 frame keeps grid cards aligned regardless of the
   uploaded image dimensions. */
.et_pb_blog_posts .et_pb_post {
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 40px;
}

.et_pb_blog_posts .entry-featured-image-url,
.et_pb_blog_posts .et_pb_image_container {
  margin: 0 0 14px;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  overflow: hidden;
  display: block;
}

body #page-container .et_pb_blog_posts .entry-featured-image-url img,
body #page-container .et_pb_blog_posts .et_pb_image_container img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 24px;
}

/* td-f174f5: the standalone featured module on /blog uses the 4:3 ratio from
   the comp, while the archive grid above remains 3:2. */
.et_pb_blog_0_tb_body .entry-featured-image-url,
.et_pb_blog_0_tb_body .et_pb_image_container {
  aspect-ratio: 4 / 3;
}

/* td-2d6bc3: Divi 5's fullwidth Blog module emits the image, title, meta and
   excerpt as sibling elements. Its saved fullwidth setting does not emit the
   two-column card layout, so scope the missing layout to the one featured
   section. The grid keeps the existing title, metadata and image treatments
   intact while placing the text left and the 4:3 image right on desktop. */
.dw-featured .et_pb_post {
  display: grid;
  grid-template-areas:
    "title"
    "meta"
    "excerpt"
    "image";
  grid-template-columns: minmax(0, 1fr);
}

.dw-featured .entry-featured-image-url {
  grid-area: image;
  margin: 0;
}

.dw-featured .entry-title {
  grid-area: title;
}

.dw-featured .post-meta {
  grid-area: meta;
}

.dw-featured .post-content {
  grid-area: excerpt;
}

@media (min-width: 981px) {
  .dw-featured .et_pb_post {
    grid-template-areas:
      ". image"
      "title image"
      "meta image"
      "excerpt image"
      ". image";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    column-gap: 64px;
  }
}

body #page-container .et_pb_blog_0_tb_body .et_pb_post .entry-title,
body #page-container .et_pb_blog_0_tb_body .et_pb_post .entry-title a {
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.et_pb_blog_0_tb_body .post-content,
.et_pb_blog_0_tb_body .post-content p,
.et_pb_blog_1_tb_body .post-content,
.et_pb_blog_1_tb_body .post-content p {
  font-size: 17px;
  line-height: 1.6;
}

/* Post titles in the grid. Divi styles these through a long
   `body #page-container …` selector, so the hover needs matching weight or it
   is simply ignored. */
body #page-container .et_pb_blog_posts .entry-title a,
.et_pb_blog_posts .entry-title a {
  transition: color 150ms ease;
}

body #page-container .et_pb_blog_posts .entry-title a:hover,
.et_pb_blog_posts .entry-title a:hover {
  color: var(--dw-clay);
}

/* Whole-card hover from the binding styleguide. The Blog module cannot make
   an article a single anchor, but its rendered article is the card surface;
   keep the page-paper rest state and provide the Sand hover feedback. */
body #page-container .dw-featured .et_pb_blog_posts .et_pb_post,
body #page-container .dw-related-cards .et_pb_blog_posts .et_pb_post {
  background: var(--dw-paper);
  transition: background-color 150ms ease;
}

body #page-container .dw-featured .et_pb_blog_posts .et_pb_post:hover,
body #page-container .dw-related-cards .et_pb_blog_posts .et_pb_post:hover {
  background: var(--dw-sand);
}

/* Homepage teaser cards run two lines in the design. The Blog module's
   excerptLength only applies to auto-generated excerpts: every post here has a
   hand-written one, and Divi prints that in full. Setting
   post.advanced.excerptManual to "off" saves but is not honoured by this build,
   so the two-line limit is enforced here rather than by truncating editorial
   copy in the database. Scoped to the homepage — the archive shows more. */
.dw-blogteaser .et_pb_blog_posts .post-content-inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The design puts the category chip between image and title. Divi's Blog
   module emits title, then meta, then excerpt, in that fixed order, so the card
   becomes a flex column and the chip is reordered into place. */
.dw-blogteaser .et_pb_blog_posts .et_pb_post {
  display: flex;
  flex-direction: column;
}

.dw-blogteaser .et_pb_blog_posts .entry-featured-image-url {
  order: 1;
}

.dw-blogteaser .et_pb_blog_posts .post-meta {
  order: 2;
  margin: 0 0 10px;
}

.dw-blogteaser .et_pb_blog_posts .entry-title {
  order: 3;
  margin: 0 0 10px;
}

.dw-blogteaser .et_pb_blog_posts .post-content {
  order: 4;
}

/* td-876356: category links ahead of the date read as mono chips in the
   design. The body selector overrides Divi's generated Blog-meta typography;
   Sand/Ink is the fallback for every category not explicitly mapped. */
body #page-container .et_pb_blog_posts .post-meta a[rel~="category"],
body #page-container .et_pb_blog_posts .post-meta a[rel~="tag"],
.et_pb_blog_posts .post-meta a[rel~="category"],
.et_pb_blog_posts .post-meta a[rel~="tag"] {
  display: inline-block;
  background: var(--dw-sand);
  color: var(--dw-ink) !important;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

body #page-container .et_pb_blog_posts .et_pb_post.category-news .post-meta a[href*="/category/news"] {
  background: var(--dw-clay);
  color: var(--dw-ink) !important; /* 3.1: text on clay always dw-ink */
}

body #page-container .et_pb_blog_posts .et_pb_post.category-tutorial .post-meta a[href*="/category/tutorial"] {
  background: var(--dw-sage-light);
  color: var(--dw-ink) !important;
}

body #page-container .et_pb_blog_posts .et_pb_post.category-test .post-meta a[href*="/category/test"] {
  background: var(--dw-sand);
  color: var(--dw-ink) !important;
}

/* ---------------------------------------------------------------------------
   Pagination.
   td-fcfe50: numbered archive pages replace Divi's prev/next text links. */
.dw-archive-grid .dw-numbered-pagination {
  display: flex;
  clear: both;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
}

.dw-archive-grid .dw-numbered-pagination .page-numbers {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--dw-line);
  background: var(--dw-sand);
  color: var(--dw-ink) !important;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dw-archive-grid .dw-numbered-pagination .page-numbers.current {
  border-color: var(--dw-ink);
  background: var(--dw-ink);
  color: var(--dw-creme) !important;
}

.dw-archive-grid .dw-numbered-pagination a.page-numbers:hover,
.dw-archive-grid .dw-numbered-pagination a.page-numbers:focus-visible {
  border-color: var(--dw-sand-hover);
  background: var(--dw-sand-hover);
  color: var(--dw-ink) !important;
}

.dw-archive-grid .dw-numbered-pagination .page-numbers.dots {
  cursor: default;
}

.dw-archive-grid .dw-numbered-pagination .page-numbers.is-disabled {
  border-color: var(--dw-line);
  background: var(--dw-paper);
  color: var(--dw-meta) !important;
}

@media (max-width: 767px) {
  .dw-archive-grid .dw-numbered-pagination {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

/* ---------------------------------------------------------------------------
   Heading padding.
   td-2f9457: Divi's theme default h1-h6 padding-bottom: 10px adds to module
   spacing; keep it from changing the visual gap. */
.et_pb_module_header,
.et_pb_post_title .entry-title,
.et_pb_post_content h1,
.et_pb_post_content h2,
.et_pb_post_content h3,
.et_pb_post_content h4 {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Post-template typography.
   td-388a77: Divi's post modules retain the old body colour and heading
   defaults, while the post-title preset needs a fluid article H1 size. */
body #page-container .et_pb_post_content {
  color: #4a423f;
}

body #page-container .et_pb_post_content h2 {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: #17100f;
}

body #page-container .et_pb_post_content h3 {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #17100f;
}

body #page-container .et_pb_post_title .entry-title {
  font-size: clamp(36px, 5.4vw, 72px) !important;
}

body.blog #page-container .et_pb_post_title .entry-title,
body.archive #page-container .et_pb_post_title .entry-title {
  font-size: clamp(42px, 6.4vw, 88px) !important;
}

body.home .dw-home-h1 .et_pb_module_header {
  font-size: clamp(56px, 9.2vw, 140px) !important;
}

body.home .dw-home-h2 .et_pb_module_header {
  font-size: clamp(38px, 4.4vw, 60px) !important;
}

body #page-container .et_pb_post_title .et_pb_title_meta_container {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #4a2a20;
}

/* ---------------------------------------------------------------------------
   Header navigation.
   Divi's Menu module has no pill-shaped hover state, and the design needs the
   nav to scroll horizontally rather than wrap to a second line at 375px. */
/* Sticky header.
   Divi's own sticky option accepts the attribute on a Theme Builder header
   section and then leaves it position: relative, so this is where the design's
   sticky header actually comes from.

   Tablet and desktop: the whole header layout stays pinned, promo bar
   included — Theme Builder offers no fourth area to separate the two
   sections, and this is the site's existing, unchanged behaviour. */
@media (min-width: 768px) {
  .et-l--header {
    position: sticky;
    top: 0;
    z-index: 20;
  }
}

/* Phone (<=767): the Mobil spec calls for the header band alone to stay
   sticky while the promo bar scrolls away. Same sticky element as above
   (position:sticky on the inner nav section alone has nowhere to stick to —
   its parent is only as tall as the two header sections combined), but a
   negative `top` equal to the promo's own height. The box scrolls normally
   until the promo — sitting in the box's first 48px — has scrolled out from
   under the viewport top; past that point the box cannot move further up,
   which leaves exactly the nav band pinned at y:0. .dw-promo's height is
   pinned to the same 48px so the two numbers stay in sync.

   Toggle the first .dw-promo section in Theme Builder header layout 6841 with
   Divi "Deaktivieren" — never "Auf Gerät ausblenden". A real disable removes
   the section from the output, so the promo-absent offsets below can apply. */
@media (max-width: 767px) {
  .et-l--header {
    position: sticky;
    top: -48px;
    z-index: 20;
  }

  .et-l--header:not(:has(.dw-promo)) {
    top: 0;
  }

  .dw-promo {
    height: 48px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .dw-promo .et_pb_row {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The nav band pinned to the 68px the spec calls for, regardless of the
     module's own padding. */
  .et-l--header .et_pb_section:not(.dw-promo) {
    height: 68px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }

  .et-l--header .et_pb_section:not(.dw-promo) .et_pb_row {
    height: 100%;
  }
}

/* 44px minimum tap target. Divi's nav links are ~34px tall by default, which
   is below the floor the pre-launch checklist sets. */
.et-l--header .et_pb_menu__menu > nav > ul > li > a {
  padding: 12px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  transition: background-color 150ms ease;
}

.et-l--header .et_pb_button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* The logo is a wide target but only 34px tall; padding brings the hit area to
   the 44px floor without changing how the mark looks. */
.et-l--header .et_pb_menu__logo-wrap,
.et-l--header .et_pb_menu__logo-wrap a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* td-96d983: the logo SVG is 164.7:26, so constrain its height and keep its
   intrinsic aspect ratio rather than stretching the globe and wordmark. */
.et-l--header .et_pb_menu__logo-wrap img {
  width: auto;
  max-width: none;
  height: 34px;
  max-height: 34px;
}

.et-l--header .et_pb_menu__menu > nav > ul > li > a:hover {
  background: rgba(23, 16, 15, 0.1);
  opacity: 1;
}

.et-l--header .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
  background: rgba(23, 16, 15, 0.12);
  opacity: 1;
}

.et-l--header .et_pb_menu__menu > nav > ul {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.et-l--header .et_pb_menu__menu > nav > ul::-webkit-scrollbar {
  display: none;
}

/* Below Divi's mobile breakpoint the two header columns stack, which pushes the
   CTA onto a second line. The design wants the header on one line at 375px, so
   the row becomes a flex row and the columns size to their content. */
@media (max-width: 980px) {
  .et-l--header .et_pb_row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
  }

  .et-l--header .et_pb_row .et_pb_column {
    width: auto;
    margin: 0;
    flex: 0 1 auto;
  }

  .et-l--header .et_pb_row .et_pb_column:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* td-a7dc2f: the CTA's size is set further down, at a specificity this rule
     cannot reach — the 14px and 12px/16px it used to carry lost to Divi's own
     module CSS and never applied, and would have undercut the 16px text floor
     if they had. Only the wrap suppression is this rule's own. */
  .et-l--header .et_pb_button {
    white-space: nowrap;
  }

  /* Reserve room for the 44px burger, which is pulled out of the menu
     column below and pinned to the row's right edge instead: 20px page
     margin + 44px burger + 8px gap. Divi's own row spacing comes from its
     per-instance dynamic CSS (`.et_pb_row_1_tb_header.et_pb_row`, loaded in
     a deferred stylesheet after this file) with !important at the SAME
     two-class specificity as a plain `.et-l--header .et_pb_row_1_tb_header`
     — so that tie is lost to source order. Matching its own two-class
     compound (element.et_pb_row) tips the specificity in this rule's favor
     regardless of load order. */
  .et-l--header .et_pb_row_1_tb_header.et_pb_row {
    padding-right: 48px !important;
  }

  /* The menu module and its wrappers are position:relative by Divi default,
     which would anchor the absolutely positioned burger to their own
     (narrow) box instead of the row. Neutralise them so the burger's
     containing block becomes the row above. */
  .et-l--header .et_pb_row .et_pb_column:first-child,
  .et-l--header .et_pb_menu,
  .et-l--header .et_pb_menu_inner_container {
    position: static;
  }

  .et-l--header .et_mobile_nav_menu {
    position: absolute;
    right: 0;
    top: 50%;
  }

  /* Burger: 44x44 Ink circle, three Creme bars built from one 18x2px bar
     plus a matching pair of box-shadows — replaces Divi's own icon-font
     glyph outright (it renders teal by default) rather than fighting its
     color. The vertical centering is a fixed margin-top, not
     transform:translateY(-50%): a transform on an ancestor of the
     fullscreen panel below would turn that ancestor into the panel's
     containing block and break its viewport sizing (position:fixed no
     longer resolves against the viewport once an ancestor is transformed). */
  .mobile_menu_bar {
    position: relative;
    z-index: 10000;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    background: var(--dw-ink);
    border-radius: 999px;
    display: block;
  }

  .mobile_menu_bar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--dw-creme);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    box-shadow: 0 -7px 0 var(--dw-creme), 0 7px 0 var(--dw-creme);
    font-size: 0;
  }

  /* The persistent CTA lives in a sibling column carrying its own
     Divi-assigned z-index — a separate stacking branch from the fullscreen
     panel below, so the panel's z-index cannot be relied on to paint over
     it. Hide the CTA while the panel is open instead of fighting the
     stacking context; the burger stays visible (it shares the panel's
     stacking branch) so the panel can still be closed. */
  .et-l--header:has(.mobile_nav.opened) .et_pb_row .et_pb_column:not(:first-child) {
    visibility: hidden;
  }
}

/* Category chips in the blog grid are links; give them a real target. */
.et_pb_blog_posts .post-meta a[rel~="category"],
.et_pb_blog_posts .post-meta a[rel~="tag"] {
  min-height: 28px;
  line-height: 20px;
  transition: background-color 150ms ease;
}

.et_pb_blog_posts .post-meta a[rel~="category"]:hover,
.et_pb_blog_posts .post-meta a[rel~="tag"]:hover {
  background: var(--dw-sand-hover);
}

/* ---------------------------------------------------------------------------
   Post sidebar.
   The mock pins the aside below the sticky header. Divi's column has no sticky
   option that survives here, so it is set directly — and only from tablet up,
   where the sidebar sits beside the article rather than under it. */
@media (min-width: 981px) {
  .dw-sidebar {
    position: sticky;
    top: 174px;
    align-self: flex-start;
  }

  body:not(:has(.et-l--header .dw-promo)) .dw-sidebar {
    top: 115px;
  }
}

/* ---------------------------------------------------------------------------
   Table of contents (td-148b99).
   Divi's TOC module supplies the active-link marker; the Gutenberg fallback
   mirrors it so the same states apply on every post. */
.et_pb_table_of_contents__nav ol,
.et_pb_table_of_contents__nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.et_pb_table_of_contents__item {
  margin-bottom: 4px;
}

/* Real posts here run to 29 headings, which would make the list nearly 1900px
   tall and defeat the sticky sidebar entirely. Cap it and let it scroll on its
   own; the mock's five-entry example is not representative of the archive. */
.et_pb_table_of_contents__nav {
  max-height: 58vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

body #page-container .et_pb_table_of_contents__nav a,
.et_pb_table_of_contents__nav a {
  display: block;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--dw-ink);
  text-decoration: none;
  line-height: 1.4;
  transition: background-color 150ms ease, color 150ms ease;
}

body #page-container .et_pb_table_of_contents__nav a:hover,
.et_pb_table_of_contents__nav a:hover {
  background: var(--dw-paper);
  color: var(--dw-ink);
}

body #page-container .et_pb_table_of_contents__nav a.et_pb_table_of_contents__link--active,
body #page-container .et_pb_table_of_contents__nav a[aria-current="location"],
.et_pb_table_of_contents__nav a.et_pb_table_of_contents__link--active,
.et_pb_table_of_contents__nav a[aria-current="location"] {
  background: var(--dw-clay);
  color: var(--dw-ink);
}

/* h3 entries sit one step in from their h2. */
.et_pb_table_of_contents__item--sub a {
  padding-left: 28px;
  font-size: 15px;
}

body #page-container .et_pb_table_of_contents__title,
.et_pb_table_of_contents__title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dw-meta);
  padding: 4px 16px 10px;
  margin: 0;
}

/* The desktop sidebar is useful beside a long article, but on a phone it
   becomes a compact disclosure immediately before the reading text. The
   fallback script supplies .dw-mobile-toc from the same heading list as the
   native module, so both variants remain in sync. */
.dw-mobile-toc,
.dw-reading-progress {
  display: none;
}

@media (max-width: 980px) {
  body #page-container .dw-sidebar .et_pb_table_of_contents {
    display: none !important;
  }

  .dw-mobile-toc {
    display: block;
    margin: 0 0 24px;
    background: var(--dw-sand);
    border-radius: 20px;
  }

  .dw-mobile-toc summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 20px;
    color: var(--dw-ink);
    cursor: pointer;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    list-style: none;
  }

  .dw-mobile-toc summary::-webkit-details-marker {
    display: none;
  }

  .dw-mobile-toc summary::after {
    content: "↓";
    margin-left: auto;
    font-size: 18px;
    line-height: 1;
  }

  .dw-mobile-toc[open] summary::after {
    content: "↑";
  }

  .dw-mobile-toc__meta {
    color: var(--dw-text-2, #4a423f);
    font-weight: 400;
  }

  .dw-mobile-toc nav {
    padding: 0 12px 12px;
  }

  .dw-mobile-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dw-mobile-toc a {
    display: block;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--dw-ink);
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
  }

  .dw-mobile-toc a.et_pb_table_of_contents__link--active,
  .dw-mobile-toc a[aria-current="location"] {
    background: var(--dw-clay);
  }

  .dw-mobile-toc__item--sub a {
    padding-left: 24px;
    font-weight: 500;
  }
}

/* Keep article typography, reading progress, and other phone-only rules at
   the established 767px breakpoint. */
@media (max-width: 767px) {
  body #page-container .et_pb_post_content h2 {
    font-size: 28px;
  }

  body #page-container .et_pb_post_content h3 {
    font-size: 22px;
  }

  /* Some legacy Gutenberg callouts carry WordPress's 14px small-text class.
     They are still reading copy, not mono metadata, so the mobile floor is the
     article's 17px body scale. */
  body #page-container .et_pb_post_content p,
  body #page-container .et_pb_post_content li,
  body #page-container .et_pb_post_content .et-box,
  body #page-container .et_pb_post_content .et-info,
  body #page-container .et_pb_post_content .et-box .et-info,
  body #page-container .et_pb_post_content .et-box-content {
    font-size: 17px !important;
  }

  body #page-container .et_pb_post_content blockquote {
    padding-left: 20px;
  }

  body #page-container .et_pb_post_content pre {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dw-reading-progress {
    display: block;
    position: fixed;
    top: 68px;
    right: 0;
    left: 0;
    z-index: 100;
    height: 3px;
    pointer-events: none;
  }

  .dw-reading-progress__bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--dw-clay);
    transform: scaleX(0);
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-mobile-toc a,
  .dw-reading-progress__bar {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   404.
   Divi 5's Theme Builder has no 404 condition, so this body comes from the
   child theme's 404.php rather than a layout, and is styled here. */
.dw-404 {
  background: var(--dw-clay);
  padding: 88px 32px 96px;
}

.dw-404__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}

.dw-404__kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a2a20;
}

.dw-404__title {
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--dw-ink);
  margin: 0;
  max-width: 18ch;
}

.dw-404__lead {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  color: #2c1712;
  max-width: 48ch;
  margin: 0;
}

.dw-404__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.dw-404__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

.dw-404__btn--primary {
  background: var(--dw-ink);
  color: var(--dw-creme);
}

.dw-404__btn--primary:hover {
  background: var(--dw-ink-hover);
}

.dw-404__btn--secondary {
  border: 2px solid var(--dw-ink);
  color: var(--dw-ink);
}

.dw-404__btn--secondary:hover {
  background: var(--dw-ink);
  color: var(--dw-creme);
}

.dw-404__search {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dw-404__search input {
  min-width: 240px;
  min-height: 44px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  background: var(--dw-paper);
  color: var(--dw-ink);
}

.dw-404__search button {
  min-height: 44px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--dw-ink);
  color: var(--dw-creme);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .dw-404 {
    padding: 56px 20px 64px;
  }
}

/* ---------------------------------------------------------------------------
   Comparison table.
   Divi has no table module, and a grid of columns would stack on phones and
   scramble the comparison. A real <table> keeps the semantics and scrolls
   sideways instead; the API refuses inline styles, so the styling lives here. */
.dw-compare#vergleich {
  scroll-margin-top: 174px;
}

body:not(:has(.et-l--header .dw-promo)) .dw-compare#vergleich {
  scroll-margin-top: 115px;
}

.dw-compare .et_pb_text_inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dw-compare .et_pb_text_inner::-webkit-scrollbar {
  display: none;
}

.dw-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 17px;
  text-align: left;
}

.dw-table th,
.dw-table td {
  padding: 20px 18px;
  vertical-align: top;
}

.dw-table thead th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c534f;
  padding: 14px 18px;
  border-bottom: 3px solid var(--dw-ink);
}

/* The Divi column is the point of the table, so it is a filled surface rather
   than a highlighted edge — single-edge colour on a rounded shape is out. */
.dw-table thead th.dw-table__hero {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--dw-ink);
  background: var(--dw-clay);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 18px;
}

.dw-table tbody th {
  font-weight: 700;
  color: var(--dw-ink);
  padding-left: 0;
}

.dw-table tbody td {
  color: var(--dw-text-2, #4a423f);
}

/* The hero column is excluded here rather than overridden afterwards: a later
   `border: 0` on .dw-table__hero loses on specificity, which would leave a
   single grey edge along a rounded cell. */
.dw-table tbody tr:not(:last-child) th:not(.dw-table__hero),
.dw-table tbody tr:not(:last-child) td:not(.dw-table__hero) {
  border-bottom: 1px solid #e2dbd4;
}

.dw-table tbody .dw-table__hero {
  background: #fdf1e9;
  font-weight: 500;
  color: var(--dw-ink);
  border: 0;
}

.dw-table tbody tr:last-child .dw-table__hero {
  border-radius: 0 0 16px 16px;
}

/* ---------------------------------------------------------------------------
   Promo bar.
   The "Aktion" chip is one inline span inside a Text module, so it cannot carry
   its own module styling. Everything else on the bar is set in the builder. */
.dw-promo__chip {
  display: inline-block;
  background: var(--dw-clay);
  color: var(--dw-ink);
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
  vertical-align: middle;
}

.dw-promo a {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  margin-left: 6px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

/* Binding: dark-ground links brighten to white; the comp keeps the underline
   ink-coloured, so both channels are explicit rather than inherited. */
.dw-promo a:hover {
  color: #fff;
  text-decoration-color: var(--dw-ink);
}

/* The Fazit section is an Ink band identified by its stable page anchor. Divi
   does not inherit the module's light text colour onto inline anchors, so
   keep text-module links light without changing the separate button module. */
.et_pb_section#fazit .et_pb_text_inner a {
  color: var(--dw-creme) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.et_pb_section#fazit .et_pb_text_inner a:hover,
.et_pb_section#fazit .et_pb_text_inner a:focus-visible {
  color: #fff !important;
  text-decoration-color: #fff;
}

/* Text links keep their paragraph treatment until hover, then gain the
   binding underline with a 3px offset. These hooks correspond to the
   homepage/post/test links that are not Divi button modules. */
.dw-blog-more a,
.dw-post-more a {
  text-decoration: underline;
  text-decoration-color: var(--dw-clay);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.dw-blog-more a:hover,
.dw-post-more a:hover {
  color: var(--dw-ink);
  text-decoration-color: var(--dw-ink);
}

.et_pb_post_content p a:hover {
  text-decoration: underline;
  text-decoration-color: var(--dw-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Claim strip.
   A marquee is motion, not styling; no Divi module produces it. Kept to a
   single transform animation, and stopped outright for anyone who has asked
   the OS to reduce motion. */
.dw-marquee {
  overflow: hidden;
}

.dw-marquee .et_pb_text_inner {
  display: inline-block;
  white-space: nowrap;
  animation: dw-marquee 26s linear infinite;
}

@keyframes dw-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .dw-marquee .et_pb_text_inner {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Flex containers the builder cannot produce.

   Divi 5 columns and groups do have a Layout option, and
   module.decoration.layout saves through the API — but setting it does not give
   the element the flex CSS the option promises, so three places in the design
   take a class hook instead.

   What this build DOES emit, contrary to what this comment claimed until
   td-a7dc2f: Divi tags its own sections, rows, columns, groups and modules with
   `et_flex_section` / `et_flex_row` / `et_flex_column` / `et_flex_group` /
   `et_flex_module` on its own initiative, and those classes carry
   `flex-direction: var(--flex-direction)` — `row` for a row, `column` for
   everything else. So a hook that asks only for `display: flex` can silently
   inherit a column. Every hook below that sits on a Divi structural element and
   has more than one child must therefore state its direction explicitly. */

/* Hero: lead paragraph and the two buttons share one line, bottom-aligned
   against each other, and stack on phones. */
.dw-hero__line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px 48px;
}

.dw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* td-131d20: the homepage path-card row needs a real flex container so its
   three column backgrounds stretch to the tallest card. The row already owns
   the 1280px rail and 32px desktop padding; only its flex behaviour and child
   sizing are overridden here. */
.dw-path-cards {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
}

.dw-path-cards > .et_pb_column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  width: auto !important;
  margin-right: 0 !important;
}

/* td-8f5c4c: keep the path cards readable in the tablet band. */
@media (min-width: 768px) and (max-width: 980px) {
  .dw-path-cards > .et_pb_column {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

/* td-7c3232: cards in an equal-width grid end on one baseline.

   In these rows the card *is* the Divi column — it carries the background, the
   radius and the padding, and its height is whatever its modules add up to.
   Divi lays the row out with floats, so a card with one line less of copy
   simply stops early and the row frays along its lower edge: the four Divi Pro
   cards measured 303/261/261/286.

   Flex on the row alone fixes it. The columns keep Divi's own percentage width
   and gutter margin — `float` is ignored on a flex item, and nothing here
   touches `width` or `margin-right`, so the grid geometry is unchanged to the
   pixel — while `align-items: stretch` gives every card the height of the
   tallest. Content stays in the column's normal flow, so it sits at the top and
   the card grows downward; no vertical centring.

   All three declarations are !important because Divi's own stylesheet loads
   after this file, so a single-class rule of its own would otherwise win on
   source order. `flex-direction` is stated rather than left to the initial
   value for the reason at the top of this block: Divi tags rows it rewrites
   `et_flex_row`, and that class carries `flex-direction: var(--flex-direction)`.

   Above 980px only. Below it every one of these rows stacks — the Divi Pro grid
   to 2×2 at 768px and everything to a single column at 375px — where equal
   heights mean nothing and a stretch would fight Divi's own stacking.

   The hook sits on six rows, put there by scripts/card-heights.py: a row has no
   stable selector of its own, since Divi numbers `.et_pb_row_N` per page. */
@media (min-width: 981px) {
  .dw-cards {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
  }
}

/* td-a7dc2f: button geometry.

   The "Button Primär" element preset is the divi/button default and carries the
   large size — 18px over Divi's 1.7em, 20px/32px padding, 70,6px tall. Every
   button module has had its own padding and font-size removed, so that preset
   now decides the geometry and Divi emits no per-module
   `.et_pb_button_N{padding …!important}` any more.

   The two deviations below cannot come from a preset. Assigning a second preset
   to a module writes attrs.modulePreset, and that makes Divi render the whole
   post's rows as `et_flex_row` instead of `et_block_row` — Divi 5 flex rows do
   not stack their columns below 768px, which broke the phone layout of every
   multi-column row on all four pages. So the compact size and the outline
   compensation are collected here instead. The values are the ones held by the
   "Button Kompakt" preset (56c5850c-7b3e-4914-844f-50e9b0e887f1) and by
   "Button Sekundär" (7827b741-2887-4727-9712-46925191a5e6); keep them in step.

   Divi writes the default preset's own type at
   `body #page-container .et_pb_section .preset--module--divi-button--default`
   with !important, and loads that after this file, so both rules below add the
   section class to win the specificity rather than the source order. */

/* Compact placements — header CTA, path cards, tutorial jump chips. The type
   size holds at every width: the header CTA has about 147px beside the logo and
   the burger at 375px, which the preset's 18px would overrun. */
body #page-container .et-l--header .et_pb_section a.et_pb_button,
body #page-container .et_pb_section .dw-path-cards a.et_pb_button,
body #page-container .et_pb_section .dw-tutorial-jumps a.et_pb_button {
  font-size: 16px !important;
  line-height: 1.625em !important;
  /* Divi drops a module declaration that matches its preset, but only emits the
     preset's own CSS on templates whose body actually holds that module type.
     On /blog and every other template without a button in the body, the header
     CTA therefore lost the preset's `border-width: 0` and fell back to Divi's
     core `.et_pb_button{border-width:2px}` — 56px instead of 52px, on nine of
     ten templates. These buttons are filled, so state it here. */
  border-width: 0 !important;
}

/* 16px over 1.625em is exactly 26px, so 13px of padding top and bottom lands on
   52px: the height of the newsletter field, of the phone floor below, and of the
   header CTA before this change, which keeps the header from shifting on the
   nine templates that share it. Padding only from 768px up — below that the
   phone block further down owns every button's box. */
@media (min-width: 768px) {
  body #page-container .et-l--header .et_pb_section a.et_pb_button,
  body #page-container .et_pb_section .dw-path-cards a.et_pb_button,
  body #page-container .et_pb_section .dw-tutorial-jumps a.et_pb_button {
    padding: 13px 22px !important;
  }
}

/* The secondary variant, on the two outline buttons that carry the hook.

   Geometry: the 2px outline sits outside the padding box, and at auto height it
   adds 4px the primary beside it does not have — the hero pair read 71px
   against 75px. Taking those 4px back out of the padding puts both on 70,6px.

   Colour: these values only repeat what the modules already hold. Once a module
   stops carrying its own geometry, Divi groups its CSS with the other buttons
   on the page and, on the homepage hero, silently drops this button's own
   background and border-width — it rendered ink text on an ink fill. Restating
   them here is what keeps the outline visible. Ink is a Global Color, so it is
   referenced through the custom property Divi emits for it and editing the
   Global Color still propagates; the hover label is Creme, a support value
   rather than a Global Color, and comes from this file's own token. */
body #page-container .et_pb_section a.et_pb_button.dw-btn-outline {
  background-color: transparent !important;
  border: 2px solid var(--gcid-bfa19597-ab38-4cd0-92c6-58de984e5b21) !important;
  color: var(--gcid-bfa19597-ab38-4cd0-92c6-58de984e5b21) !important;
}

@media (min-width: 768px) {
  body #page-container .et_pb_section a.et_pb_button.dw-btn-outline {
    padding: 18px 30px !important;
  }
}

body #page-container .et_pb_section a.et_pb_button.dw-btn-outline:hover {
  background-color: var(--gcid-bfa19597-ab38-4cd0-92c6-58de984e5b21) !important;
  color: var(--dw-creme) !important;
}

/* td-196bfc: Divi's per-button em-based margin-bottom scales with each
   button's own font-size context, landing anywhere from 6,78px to 33,44px
   across the page. Inside flex containers with align-items: center that
   margin is part of the box being centred, so buttons sharing a row visibly
   stagger. Reset it at every width, not only on phones. */
body #page-container .et_pb_button_module_wrapper {
  margin-bottom: 0 !important;
}

/* Replaces the margin this reset removes so stacked button pairs from 768px
   up (e.g. a column without a flex hook) don't touch. */
@media (min-width: 768px) {
  body #page-container .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
    margin-top: 12px !important;
  }

  /* .dw-hero__actions and .dw-tutorial-jumps already space their buttons via
     gap, which also covers wrapped lines. A sibling margin-top here would
     push every button but the first down within its flex line — even when
     it sits beside, not below, the previous one. */
  body #page-container .dw-hero__actions > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper,
  body #page-container .dw-tutorial-jumps > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  /* td-a7dc2f: Divi 5 tags a phone-width flex column `et_flex_column_24_24_phone`
     but ships no rule for that class, and its rows are flex-wrap: nowrap. Two
     columns that both want the full width therefore stay side by side and
     shrink to half a screen instead of stacking — on /divi-tutorial that left
     eleven rows squeezed, with the webcast button wrapping onto three lines.
     design.css already stated this per hook (.dw-path-cards below); say it once
     for every flex row outside the header, which has to stay on one line. */
  body #page-container .et-l:not(.et-l--header) .et_flex_row {
    flex-wrap: wrap;
  }

  body #page-container .et-l:not(.et-l--header) .et_flex_row > .et_pb_column {
    flex: 1 1 100% !important;
  }

  .dw-hero__line {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Keep the cards full-width when the row wraps on phones. */
  .dw-path-cards > .et_pb_column {
    flex: 1 1 100%;
    width: 100% !important;
  }

  .dw-path-cards {
    gap: 16px;
  }

  /* td-96d983: the saved hero tree puts the primary and secondary button
     modules in .dw-hero__actions, in that order. */
  body #page-container .et_pb_button,
  body #page-container a.et_pb_button {
    box-sizing: border-box;
    width: 100% !important;
    /* td-a7dc2f: once a button carries no module-level decoration of its own,
       Divi renders the anchor as the module element, so it picks up the core
       `.et_pb_module.et_pb_button:not(.et_block_module){max-width:max-content}`
       rule. That caps the width above at the label's own width and long labels
       wrap onto two or three lines. */
    max-width: none !important;
    min-height: 52px !important;
    padding: 0 17px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
  }

  /* Divi emits each Button module in a wrapper. Making every non-header
     wrapper full width means all page button groups stack as primary-first
     source order, not only the homepage hero. */
  body #page-container .et_pb_button_module_wrapper {
    width: 100%;
  }

  body #page-container .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
    margin-top: 10px !important;
  }

  body #page-container .dw-hero__actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  body #page-container .dw-hero__actions > .et_pb_button_module_wrapper {
    width: 100%;
  }

  /* The persistent header CTA must remain inline beside the logo and burger. */
  body #page-container .et-l--header .et_pb_button,
  body #page-container .et-l--header a.et_pb_button {
    width: auto !important;
    min-height: 44px !important;
    padding: 12px !important;
  }

  body #page-container .et-l--header .et_pb_button_module_wrapper {
    width: auto;
  }

  /* At 24px high, the proportional logo is 152px wide. Keep the required
     8px air around the CTA by reclaiming four pixels from each side of its
     horizontal padding; its 44px minimum height remains unchanged. */
  body #page-container .et-l--header .et_pb_section:not(.dw-promo) .et_pb_row {
    gap: 8px;
  }

  body #page-container .et-l--header .et_pb_section:not(.dw-promo) a.et_pb_button {
    padding-inline: 8px !important;
  }

  body #page-container .et-l--header .et_pb_section:not(.dw-promo) .et_pb_row .et_pb_column:first-child {
    flex: 0 0 152px;
  }

  .et-l--header .et_pb_menu__logo-wrap img {
    height: 24px;
    max-height: 24px;
  }

  /* The promo link, footer links and homepage archive link are text links in
     the builder. Give the anchors themselves a 44px hit area without changing
     their type scale or the surrounding copy. */
  .dw-promo a,
  .et-l--footer a,
  .dw-blog-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* A one-line blog title otherwise inherits only its text line-height. Make
     the whole title width a 44px minimum target while retaining normal title
     wrapping for longer card headlines. */
  .et_pb_blog_posts .entry-title a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The three screenshot slots (td-99d5e2). Each holds one real image and nothing
   else, so the panel is a plain frame: it stretches its single child to the full
   column width. flex-direction is stated because Divi tags these columns
   et_flex_column itself and that class sets the property from a variable. */
.dw-sage-panel,
.dw-wireframe-panel,
.dw-tutorial-webcast-panel {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* Divi puts the radius on the module, not on the <img> it wraps. */
.dw-shot,
.dw-shot .et_pb_image_wrap,
.dw-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

/* Divi cannot express the mobile-only Text → Image → Button sequence inside
   its desktop two-column Sage row. Flatten just the copy column at phone width
   so its native modules become ordered children of the real flex container. */
@media (max-width: 767px) {
  .dw-sage-block {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }

  .dw-sage-block > .dw-sage-copy {
    display: contents;
  }

  .dw-sage-block > .dw-sage-copy > .et_pb_module:not(.et_pb_button_module_wrapper) {
    order: 1;
    width: 100%;
  }

  .dw-sage-block > .dw-sage-panel {
    order: 2;
    width: 100% !important;
  }

  .dw-sage-block > .dw-sage-copy > .et_pb_button_module_wrapper {
    order: 3;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Archive category chip row (blog/category/tag/author/date/search archives).
   The row is a single Text module's raw HTML — the API rejects inline styles,
   correctly, so turning each link into a pill happens here. */
.dw-chips .et_pb_text_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Divi wraps a Text module's raw anchors in a paragraph. That paragraph is
   the actual chip rail, so it needs the same flex layout as its parent. */
.dw-chips .et_pb_text_inner > p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* td-b6c21f: The archive's real WordPress search form and query-bound count
   are Text-module HTML because Divi's native search module cannot reproduce
   the comp's inline icon-and-input pill. */
.dw-archive-header-row {
  align-items: flex-end;
}

.dw-search-pill .et_pb_text_inner {
  display: flex;
  justify-content: flex-end;
}

.dw-search-form {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 2px;
  padding: 0 18px 0 4px;
  border-radius: 999px;
  background: var(--dw-ink);
  color: var(--dw-creme);
}

.dw-search-submit {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dw-search-submit svg {
  display: block;
  width: 18px;
  height: 18px;
}

.dw-search-form input[type="search"] {
  width: 230px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.dw-search-form input[type="search"]::placeholder {
  color: var(--dw-creme);
  opacity: 1;
}

.dw-search-form:focus-within {
  outline: 2px solid var(--dw-creme);
  outline-offset: 3px;
}

.dw-result-count-module .et_pb_text_inner {
  display: block;
}

.dw-result-count {
  display: block;
  margin: 0 0 16px;
  color: var(--dw-meta);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.dw-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--dw-sand);
  color: var(--dw-ink);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.dw-chips a:hover {
  background: var(--dw-sand-hover);
}

@media (max-width: 980px) {
  .dw-archive-header-row {
    align-items: stretch;
  }

  .dw-search-pill .et_pb_text_inner {
    justify-content: flex-start;
  }

  .dw-search-form,
  .dw-search-form input[type="search"] {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .dw-search-form {
    min-height: 52px;
    height: 52px;
  }

  .dw-search-submit {
    flex-basis: 52px;
    width: 52px;
    min-height: 52px;
  }

  /* The header's promo bar scrolls away, leaving its 68px navigation band
     pinned at the viewport top. Keep the module itself sticky (rather than
     its overflow-x rail) directly beneath that band.

     td-0ce0a4: the section is the sticky box, so its own padding sticks with
     it. The chips meet the Clay hero, so that padding is now the 56px band
     edge instead of 24px, and pinning the box at 68px would push the rail the
     extra 32px down the viewport. Taking the padding back out of the offset
     leaves the rail exactly where it rested before — 24px of air below the
     68px band — with the paper above it parked under the header (z-index 20
     against 10). Unstuck, nothing changes. */
  .dw-chips {
    position: sticky;
    top: calc(68px + 24px - 56px);
    z-index: 10;
    background: var(--dw-paper);
  }

  .dw-chips .et_pb_text_inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dw-chips .et_pb_text_inner::-webkit-scrollbar {
    display: none;
  }

  .dw-chips .et_pb_text_inner > p {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }

  .dw-chips a {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 0 20px;
  }

  .dw-archive-grid .et_pb_post {
    margin-bottom: 34px;
  }
}

/* The featured block only belongs on page 1 — on /page/2+ it would repeat
   with a page-dependent post. */
.paged .dw-featured {
  display: none;
}

/* ---------------------------------------------------------------------------
   td-0a866d: post tags and author box.
   Tags come from post_tags Dynamic Content as linked anchors. A tagless post
   resolves to an empty module on some Divi renders and to an empty text-inner
   wrapper on others, so hide both forms rather than leaving a bare divider.
   The builder still does not emit its saved grid/flex layout for Group modules;
   this narrowly scoped grid is the required layout bridge for the author card. */
.dw-tags .et_pb_text_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dw-tags:empty,
.dw-tags:has(.et_pb_text_inner:empty) {
  display: none;
}

.dw-tags a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--dw-sand);
  color: var(--dw-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 150ms ease;
}

.dw-tags a:hover {
  background: var(--dw-sand-hover);
}

.dw-author-box {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 8px;
  align-items: center;
}

.dw-author-avatar {
  grid-row: 1 / span 2;
}

.dw-author-avatar .et_pb_text_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  color: var(--dw-creme);
}

.dw-author-avatar p,
.dw-author-bio p {
  margin: 0;
}

.dw-author-name {
  grid-column: 2;
  grid-row: 1;
}

.dw-author-bio {
  grid-column: 2;
  grid-row: 2;
}

/* ---------------------------------------------------------------------------
   Artikel-Elemente.
   Gutenberg content elements inside the article body — pull-quote, code
   block, and the two callout boxes editors can drop into post_content. None
   of this is reachable through a Divi module option since it targets raw
   post_content markup, not the builder. */

/* Pull-quote — the one sanctioned single-edge coloured border, and only
   because it stays unrounded. Every other rounded surface in the design gets
   its separation from colour and spacing instead. */
.et_pb_post_content blockquote {
  margin: 34px 0;
  padding: 6px 0 6px 26px;
  border-left: 4px solid var(--dw-clay);
  border-radius: 0;
  background: none;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--dw-ink);
}

.et_pb_post_content blockquote p {
  margin: 0;
}

/* Code block. */
.et_pb_post_content pre {
  margin: 26px 0;
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--dw-ink);
  color: var(--dw-creme);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.75;
  overflow-x: auto;
}

.et_pb_post_content pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* td-439842: Divi's alert and the legacy editor info box both need the
   sage-light callout treatment from the binding styleguide. */
.et_pb_post_content .et_pb_alert,
.et_pb_post_content .rank-math-notice,
.et_pb_post_content .wp-block-alert {
  background: var(--dw-sage-light) !important;
  color: var(--dw-ink) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 20px 24px !important;
}

/* The audited post uses this legacy markup rather than .et_pb_alert. Keep
   the outer wrapper transparent so only the rounded content surface paints. */
.et_pb_post_content .et-box.et-info {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.et_pb_post_content .et-box.et-info .et-box-content {
  background: var(--dw-sage-light) !important;
  color: var(--dw-ink) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 20px 24px !important;
}

.et_pb_post_content .et_pb_alert .et_pb_alert_heading,
.et_pb_post_content .rank-math-notice strong,
.et_pb_post_content .wp-block-alert strong,
.et_pb_post_content .et-box.et-info .et-box-content em {
  color: var(--dw-sage) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Tip box. */
.et_pb_post_content .dw-tip {
  margin: 26px 0;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--dw-sage-light);
  color: var(--dw-ink);
  border: 0;
  box-shadow: none;
}

/* Editors wrap the lead line in <span class="dw-kicker"> to get the
   mono/uppercase treatment the mock uses ahead of the tip copy. */
.et_pb_post_content .dw-tip .dw-kicker {
  display: block;
  margin-bottom: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dw-sage);
}

.et_pb_post_content .dw-tip p:last-child {
  margin-bottom: 0;
}

/* Offer / affiliate box. */
.et_pb_post_content .dw-offer {
  margin: 26px 0;
  padding: 30px 32px;
  border-radius: 20px;
  background: var(--dw-sand);
}

.et_pb_post_content .dw-offer p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Newsletter signup forms (Divi Email Optin -> FluentCRM), all four
   placements — homepage band, archive band, post band, post sidebar box.
   The module's own field/button flex layout only turns into a `flex-row` via
   an inline `--flex-direction` custom property, and only when a field is set
   non-fullwidth (Divi's SignupModule.php reads the desktop value alone, not
   per-breakpoint), so it cannot produce the row-on-desktop /
   stacked-full-width-on-phone layout the mobile spec requires. This file
   owns that layout instead; colours, radii and the 52px-ish field height
   still come from the module's own field/button decoration options. */
/* Divi's dynamic-asset loader decides which shared module CSS files a page
   needs by scanning the content, and it never enqueues forms.css (the file
   that carries `.et_pb_newsletter_result{display:none}`) for these
   API-inserted signup modules — so the success/error message renders visible
   by default instead of only after a real submit. Replicated here rather
   than chasing the detection gap. */
.dw-signup .et_pb_newsletter_result {
  display: none;
}

.dw-signup .et_pb_newsletter_fields {
  display: flex;
  /* Explicit: the module's own generated CSS sets flex-direction: column here
     (its --flex-direction custom property is only ever written to "row" when
     a field is non-fullwidth), so leaving this implicit lost the cascade. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dw-signup .et_pb_newsletter_field,
.dw-signup .et_pb_newsletter_button_wrap {
  margin: 0;
}

.dw-signup .et_pb_newsletter_field {
  flex: 1 1 220px;
  width: auto;
}

.dw-signup .et_pb_newsletter_field .input {
  width: 100%;
  box-sizing: border-box;
}

/* td-a458d9: newsletter controls use the binding UI type scale and field
   height. The ID-qualified selector wins over Divi's generated !important
   module CSS without changing the signup layout. */
body #page-container .dw-signup .et_pb_newsletter_field .input {
  height: 52px !important;
  padding: 18px 22px !important;
  font-size: 17px !important;
}

body #page-container .dw-signup .et_pb_newsletter_field .input::placeholder {
  font-size: 17px !important;
}

/* td-a7dc2f: the signup module builds its own submit button, so it cannot carry
   a divi/button preset. Restate the "Button Kompakt" geometry here — 16px over
   1.625em plus 13px of vertical padding is 52px, the same height as the field
   beside it and as every other compact button on the site. Divi writes the
   module's own padding at `body #page-container .et_pb_signup_N.et_pb_subscribe
   .et_pb_newsletter_button.et_pb_button` and loads it after this file, so
   matching that specificity would lose the tie — the section class breaks it. */
body #page-container .et_pb_section .dw-signup.et_pb_subscribe .et_pb_newsletter_button.et_pb_button,
body #page-container .dw-signup .et_pb_newsletter_button_text {
  font-size: 16px !important;
  line-height: 1.625em !important;
}

body #page-container .et_pb_section .dw-signup.et_pb_subscribe .et_pb_newsletter_button.et_pb_button {
  padding: 13px 22px !important;
}

.dw-signup .et_pb_newsletter_button_wrap {
  flex: 0 0 auto;
  width: auto;
}

/* td-bb0e48: the post template's related Blog module carries an explicit
   dw-related-cards hook. td-2d4e46 turned its phone layout into a 240px
   snap-scrolling rail, but the Mobil spec reserves side-scroll for chips and
   tables — every other grid stacks. Single column, full card width instead;
   desktop keeps Divi's existing three-column grid. */
@media (max-width: 767px) {
  .dw-related-cards .et_pb_blog_posts {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    overflow-x: visible;
  }

  .dw-related-cards .et_pb_blog_posts > .et_pb_post {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-right: 0 !important;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .dw-signup .et_pb_newsletter_fields {
    flex-direction: column;
    align-items: stretch;
  }

  .dw-signup .et_pb_newsletter_field,
  .dw-signup .et_pb_newsletter_button_wrap {
    flex: 1 1 auto;
    width: 100%;
  }

  .dw-signup .et_pb_newsletter_button_wrap .et_pb_newsletter_button {
    width: 100%;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 17px !important;
  }
}

/* ---------------------------------------------------------------------------
   Mobile menu panel.
   Divi's mobile dropdown (.et_mobile_menu, toggled via .mobile_nav's
   closed/opened class) renders as a small white box pinned under the burger.
   The Mobil spec wants a fullscreen Clay panel instead — restyled here for
   both phone and tablet, matching the menu module's own 980px breakpoint. */
@media (max-width: 980px) {
  /* Divi drives an inline slideDown animation (height/padding) on this
     element and sizes it with its own dynamic CSS (width:100%, but resolved
     against a stray flex-basis elsewhere in the ancestor chain — see
     `flex: none` below); every box-model property here needs !important to
     land over that, the same trap as the row padding above. */
  .et_mobile_menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: none !important;
    flex: none !important;
    background: var(--dw-clay);
    z-index: 9999;
    display: none;
    flex-direction: column;
    padding: 132px 20px 32px;
    box-sizing: border-box;
    overflow-y: auto;
    border: 0;
    box-shadow: none;
  }

  .mobile_nav.opened .et_mobile_menu {
    display: flex !important;
  }

  .et_mobile_menu li {
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
  }

  /* Sora 700/22px, 52px line-height per the spec — the line-height doubles
     as the row's tap height, well above the 44px floor. Every entry keeps
     the same shape (radius, padding) as the active pill below so the fill
     is the only thing that changes when WordPress marks the current item. */
  body #page-container .et_mobile_menu li > a {
    display: block;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 52px;
    letter-spacing: -0.03em;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--dw-ink);
    background: transparent;
  }

  body #page-container .et_mobile_menu li.current-menu-item > a,
  body #page-container .et_mobile_menu li.current_page_item > a {
    background: var(--dw-ink);
    color: var(--dw-creme);
  }

  /* Utility line at the panel's foot. Decorative CSS content rather than
     real Impressum/Datenschutz links — those are menu items (content),
     which is out of scope here; see td-6d91bd's handoff. */
  .et_mobile_menu::after {
    content: "Impressum · Datenschutz";
    display: block;
    margin-top: auto;
    padding-top: 24px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a2a20;
  }
}

/* ---------------------------------------------------------------------------
   Test page score card (td-b8c71a).

   Divi has no empty shape/fill module, and Group's saved layout decoration
   does not emit a flex/grid container in this build. The score rows therefore
   stay native Group + Text modules while this small hook owns only the
   empty-track geometry and the four percentage fills. No inline styles,
   gradients, or shadows are used. */
.dw-score__rating .et_pb_text_inner p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.dw-score__number {
  font-family: "Sora", sans-serif;
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
}

.dw-score__outof {
  color: var(--dw-creme);
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.dw-score__item + .dw-score__item {
  margin-top: 12px;
}

.dw-score__item .et_pb_text_inner {
  padding: 0 !important;
}

.dw-score__item .dw-score__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}

.dw-score__item .dw-score__value {
  color: var(--dw-creme-muted, #c4b8b1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.dw-score__bar,
.dw-score__bar .et_pb_text_inner,
.dw-score__track {
  height: 8px !important;
  min-height: 8px !important;
}

.dw-score__bar {
  margin: 0 !important;
  padding: 0 !important;
}

.dw-score__bar .et_pb_text_inner {
  padding: 0 !important;
  line-height: 0;
}

.dw-score__track {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #2c211f;
}

.dw-score__fill {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--dw-clay);
}

.dw-score__fill--90 { width: 90%; }
.dw-score__fill--100 { width: 100%; }
.dw-score__fill--96 { width: 96%; }
.dw-score__fill--50 { width: 50%; }

.dw-score__link a,
.dw-fazit-link a {
  color: var(--dw-creme);
  text-decoration: underline;
  text-decoration-color: var(--dw-clay);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.dw-score__link a:hover,
.dw-fazit-link a:hover {
  color: var(--dw-creme);
  text-decoration-color: var(--dw-ink);
}

/* Test page bullet markers. A Text module keeps the list editable while this
   hook supplies the design's small round markers. */
.dw-test-list .et_pb_text_inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dw-test-list .et_pb_text_inner li {
  position: relative;
  padding-left: 20px;
}

.dw-test-list .et_pb_text_inner li + li {
  margin-top: 12px;
}

.dw-test-list .et_pb_text_inner li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dw-sage);
  content: "";
}

.dw-test-list--clay .et_pb_text_inner li::before {
  background: var(--dw-clay);
}

/* The disadvantage rows intentionally have no radius: the line is the only
   separator, as specified by the Test comp. */
.dw-test-disadvantage-row {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  column-gap: 20px;
  padding: 26px 0 !important;
  border-bottom: 1px solid var(--dw-line);
}

.dw-test-disadvantage-row:last-child {
  border-bottom: 0;
}

.dw-test-disadvantage-row > .dw-test-disadvantage-number,
.dw-test-disadvantage-row .dw-test-disadvantage-number {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.dw-test-disadvantage-row > .dw-test-disadvantage-title,
.dw-test-disadvantage-row > .dw-test-disadvantage-body,
.dw-test-disadvantage-row .dw-test-disadvantage-title,
.dw-test-disadvantage-row .dw-test-disadvantage-body {
  grid-column: 2;
}

.dw-test-disadvantage-body strong {
  color: var(--dw-ink);
  font-weight: 700;
}

@media (max-width: 767px) {
  .dw-score__number {
    font-size: 72px;
  }

  .dw-test-disadvantage-row {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
  }
}

/* Divi's generated mobile-menu rule retains a shadow even while the menu is
   hidden. Keep the global navigation aligned with the redesign's no-shadow
   surface rule at every breakpoint. */
body #page-container .et_mobile_menu {
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Tutorial learning path (td-f87543).

   Native Divi modules own all typography, colour, surfaces, spacing and
   borders. These hooks cover only geometry that this Divi build cannot emit:
   Group flex containers and the semantic rich-text article list's child
   elements. The article separators are intentionally unrounded rules. */
.dw-tutorial-jumps {
  display: flex !important;
  /* td-a7dc2f: the button work changed this Group's tree enough that Divi now
     tags it `et_flex_group`, which brings `flex-direction: var(--flex-direction)`
     resolving to `column`. This hook asked only for `display: flex`, so Divi
     decided the direction and broke two things at once: the three jump buttons
     stacked instead of standing level with the label at every width (td-196bfc
     requires a spread of 0), and below 768px the label's `flex-basis: 100%`
     became a height rather than a width, which pushed the buttons into a second
     flex column 175px past the right edge of a 375px viewport. `!important`
     because Divi's rule is a single class like this one, so source order alone
     would decide it. */
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.dw-tutorial-jumps > .et_pb_text {
  margin-right: 2px;
}

/* At 768px the label and all three buttons no longer fit their natural
   widths on one line, so the row wraps a button onto its own line instead
   of staying level. Flex line-packing decides that from each item's
   hypothetical (content) size, before shrink runs — only a real flex-basis
   change avoids it. The label is the one element that can absorb the
   squeeze (its text wraps); the buttons keep their intrinsic size. */
@media (min-width: 768px) {
  .dw-tutorial-jumps > .et_pb_text {
    flex: 1 1 0;
    max-width: max-content;
    min-width: 0;
  }

  .dw-tutorial-jumps > .et_pb_button_module_wrapper {
    flex-shrink: 0;
  }
}

.dw-tutorial-chapter {
  scroll-margin-top: 174px;
}

body:not(:has(.et-l--header .dw-promo)) .dw-tutorial-chapter {
  scroll-margin-top: 115px;
}

.dw-tutorial-list .et_pb_text_inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dw-tutorial-list .et_pb_text_inner li {
  margin: 0;
  border-bottom: 1px solid var(--dw-line);
}

.dw-tutorial-list .et_pb_text_inner a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  color: var(--dw-ink);
  text-decoration: none;
  transition: color 150ms ease;
}

.dw-tutorial-list .et_pb_text_inner a:hover {
  color: var(--dw-clay-dark);
}

.dw-tutorial-link__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 10px;
}

.dw-tutorial-link__chip {
  display: inline-block;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dw-sand);
  color: var(--dw-ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dw-tutorial-link__arrow {
  flex: none;
  color: var(--dw-meta);
}

@media (max-width: 767px) {
  .dw-tutorial-jumps {
    align-items: stretch;
  }

  .dw-tutorial-jumps > .et_pb_text {
    flex-basis: 100%;
  }

  .dw-tutorial-jumps .et_pb_button_module_wrapper {
    flex: 1 1 auto;
  }
}


/* 3.1 palette mapping for legacy Divi 4 demo modules (e.g. /divi-page-builder/).
   Divi defaults rendered white text on grey/orange/white; text on light surfaces is
   always dw-ink, text on clay always dw-ink (tokens.json). */
body #page-container .et_pb_pricing_table .et_pb_pricing_heading {
  background-color: var(--dw-sand) !important;
}
body #page-container .et_pb_pricing_table.et_pb_featured_table .et_pb_pricing_heading {
  background-color: var(--dw-clay) !important;
}
body #page-container .et_pb_pricing_table .et_pb_pricing_heading .et_pb_pricing_title,
body #page-container .et_pb_pricing_table .et_pb_pricing_heading .et_pb_best_value {
  color: var(--dw-ink) !important;
}
body #page-container .et_pb_team_member .et_pb_member_position {
  color: var(--dw-meta) !important;
}
body #page-container .et_pb_slide.et_pb_bg_layout_dark .et_pb_slide_description {
  background: rgba(23, 16, 15, 0.72);
  border-radius: 16px;
  padding: 32px;
}
@media (max-width: 767px) {
  body #page-container .et_pb_pricing_tables .et_pb_pricing_table {
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
  }
}

body #page-container .et_pb_pricing_table .et_pb_pricing_content_top .et_pb_sum,
body #page-container .et_pb_pricing_table .et_pb_pricing_content_top .et_pb_dollar_sign,
body #page-container .et_pb_pricing_table .et_pb_pricing_content_top .et_pb_frequency {
  color: var(--dw-clay-dark) !important;
}
body #page-container .et_pb_pricing_table .et_pb_pricing_table_button {
  color: var(--dw-ink) !important;
  border-color: var(--dw-ink) !important;
}