/* ---------------------------------------------------------------------------
 * Phone/tablet fixes from the 390 vision review (t_85e4c34a), measured against
 * design/canvas/Mobil.dc.html. Loaded after qa-sweep.css. Every rule sits in a
 * max-width media query, so 1440 is untouched by this file.
 * ------------------------------------------------------------------------- */

/* M1 Promo bar (Mobil #menue "Header geschlossen"): chip 3/10 padding, 13px
 * on line-height normal = 23 high (staging 4/12 -> 24 high, 79 wide vs 75),
 * 10px gap between chip, text and link (staging 8), text in dw-creme #fff3e8
 * (staging #fff8ef from the module). The bar stays 48 high because the sticky
 * offset in design.css (top: -48px) is tied to it. */
@media (max-width: 767px) {
  .et-l--header .dw-promo .et_pb_text_inner > p {
    gap: 10px;
    color: var(--dw-creme) !important;
  }
  .et-l--header .dw-promo .et_pb_text_inner > p > a {
    color: var(--dw-creme) !important;
  }
  .et-l--header .dw-promo .dw-promo__chip {
    padding: 3px 10px;
    line-height: 17px;
  }
}

/* M2 Open menu panel (Mobil #menue "Menü offen").
 * Artboard: the panel head is the 68px header row with the logo left and the
 * 44px close button right, no promo bar; the list starts 14px below the head;
 * entries Sora 700/22 with 15/22 padding (58 high) and 4px apart; the fifth
 * entry "Plugins" and the full-width ink button "Kaufen & sparen" (DM Sans
 * 700/17, padding 18, 16px extra space above) follow; the utility line sits
 * 20px under the button.
 * Staging had: logo hidden under the panel, close button 48px lower (promo bar
 * still above it), list at 132, entries 53 apart with Divi's faint li borders,
 * the "Vergleich" anchor (/#vergleich) filled as the current page on the start
 * page, no Plugins entry and no button. Plugins + button are menu items in
 * "Hauptnavigation 2026" (classes dw-nav-mobile, dw-nav-cta) shown only in
 * the panel. */
@media (min-width: 981px) {
  .et-l--header .et_pb_menu__menu li.dw-nav-mobile {
    display: none !important;
  }
}
@media (max-width: 980px) {
  .et-l--header:has(.mobile_nav.opened) .et_pb_menu__logo-wrap {
    position: relative;
    z-index: 10000;
  }
  .et-l--header .mobile_nav .et_mobile_menu {
    gap: 4px;
    padding-bottom: 30px !important;
  }
  body #page-container .et-l--header .et_mobile_menu li > a {
    line-height: normal;
    padding: 15px 22px;
    border: 0;
  }
  /* Close cross: the artboard's "×" (DM Sans 24) is ~10px across with a
     ~2.5px stroke; the two 18px bars drew it 13px across and thinner. */
  .et-l--header .et_pb_module .mobile_nav.opened .mobile_menu_bar::before,
  .et-l--header .et_pb_module .mobile_nav.opened .mobile_menu_bar::after {
    width: 14px;
    height: 2.5px;
  }
  /* An in-page anchor is never "the current page". */
  body #page-container .et-l--header .et_mobile_menu li.current-menu-item > a[href*="#"] {
    background: transparent;
    color: var(--dw-ink);
  }
  body #page-container .et-l--header .et_mobile_menu li.dw-nav-cta {
    margin-top: 16px;
  }
  body #page-container .et-l--header .et_mobile_menu li.dw-nav-cta > a {
    background: var(--dw-ink);
    color: var(--dw-creme);
    text-align: center;
    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    line-height: normal;
    letter-spacing: 0;
    padding: 18px;
  }
  .et-l--header .et_mobile_menu::after {
    margin-top: 0;
    padding-top: 16px;
    font-weight: 500;
  }
  /* M24 Current page in the open panel (Mobil #menue "Menü offen": the
   * current entry is an ink pill, #17100f / #fff3e8, radius 999).
   * design.css draws it only when WP sets current-menu-item, which it does
   * for these custom links on an exact URI match only: any query string
   * (?utm_source=…) and every post/archive under "Blog" showed no current
   * entry. Bound to the body class with the same mapping as the desktop pills
   * (V6-13/14/15 in qa-sweep.css): Blog on blog, archives and posts except
   * the hubs 7001/4373, Divi Test on 7001, Anleitung on 4462. */
  body:is(.blog, .archive, .single-post):not(.postid-7001):not(.postid-4373) #page-container .et-l--header .et_mobile_menu .et_pb_menu_page_id-8335 > a,
  body.postid-7001 #page-container .et-l--header .et_mobile_menu .et_pb_menu_page_id-8333 > a,
  body.page-id-4462 #page-container .et-l--header .et_mobile_menu .et_pb_menu_page_id-8334 > a {
    background: var(--dw-ink);
    color: var(--dw-creme);
  }
}
/* Phone: the promo bar is not part of the open panel; drop it while the panel
 * is open so the header row (logo + close) sits at the top like the artboard,
 * and pin the header at 0 instead of the promo offset. */
@media (max-width: 767px) {
  .et-l--header:has(.mobile_nav.opened) {
    top: 0;
  }
  .et-l--header:has(.mobile_nav.opened) .dw-promo {
    display: none !important;
  }
  .et-l--header .mobile_nav .et_mobile_menu {
    padding-top: 82px !important;
  }
}

/* M3 Mobile TOC, collapsed (Mobil #beitrag "Inhalt / 5 Abschnitte"):
 * a two-line label (Plex Mono 13/500 0.1em uppercase #6b6259 over DM Sans
 * 16/700 ink, 3 apart) and a 44px round #fffdfb button with "▾" on the right;
 * card #fbece3, radius 20, padding 14/16/14/20, text starts 26 below.
 * Staging had one line "Inhalt · n Abschnitte ↓" at 52 high. Markup from
 * js/toc-fallback.js (kicker/meta/btn spans). */
@media (max-width: 980px) {
  body #page-container .dw-mobile-toc {
    background: #fbece3;
    margin-bottom: 26px;
  }
  body #page-container .dw-mobile-toc summary {
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 14px 16px 14px 20px;
  }
  body #page-container .dw-mobile-toc summary::after {
    content: none;
  }
  .dw-mobile-toc__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .dw-mobile-toc__kicker {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b6259;
    line-height: normal;
  }
  body #page-container .dw-mobile-toc .dw-mobile-toc__meta {
    color: var(--dw-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
  }
  .dw-mobile-toc__btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fffdfb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
  }
  /* The artboard's DM Sans "▾" draws ~10x7; staging's font fallback drew
     it at half that, so the triangle is drawn with borders instead. */
  .dw-mobile-toc__btn::before {
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--dw-ink);
  }
  .dw-mobile-toc[open] .dw-mobile-toc__btn::before {
    border-top: 0;
    border-bottom: 7px solid var(--dw-ink);
  }
}

/* M4 Article body colour (Mobil #beitrag article column): running text
 * #332c2a on 17/500/1.65; staging had the secondary text colour #4a423f.
 * Single posts only: the builder pages (Tutorial/Test/Kaufen) also render
 * inside .et_pb_post_content and keep their own module colours. */
@media (max-width: 767px) {
  body.single-post #page-container .et_pb_post_content > p,
  body.single-post #page-container .et_pb_post_content > ul > li,
  body.single-post #page-container .et_pb_post_content > ol > li {
    color: #332c2a;
  }
}

/* M5 Tutorial newsletter (borrowed Mobil #startseite newsletter block; the
 * Tutorial page 4462 uses a Divi signup module): the module's own 25px
 * padding pushed input and button in to x45 / 300 wide; design is full
 * 350 at x20, 16 between heading, field, button and note; field DM Sans
 * 16/500 with padding 17/22 and placeholder #9c938a; button 17/700 with
 * padding 17 (56 high); note 14/500/1.55 #c4b8b1. */
@media (max-width: 767px) {
  body.page-id-4462 #page-container .et-l--post .et_pb_section_13 .et_pb_column_23 {
    margin-bottom: 16px !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0 {
    padding: 0 !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0 .et_pb_newsletter_fields {
    row-gap: 16px !important;
    gap: 16px !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0 .et_pb_newsletter_fields > p {
    margin: 0 !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0 input.input {
    height: auto !important;
    padding: 17px 22px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: normal !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0 input.input::placeholder {
    color: #9c938a !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0.et_pb_subscribe .et_pb_newsletter_button.et_pb_button {
    height: auto !important;
    min-height: 0 !important;
    padding: 17px !important;
    font-size: 17px !important;
    line-height: normal !important;
  }
  body.page-id-4462 #page-container .et_pb_signup_0 .et_pb_newsletter_button_text {
    line-height: normal !important;
  }
  /* Design block padding 40/20; the section carried 56 top and bottom. */
  body.page-id-4462 #page-container .et-l--post .et_pb_section_13 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.page-id-4462 #page-container .et_pb_text_45 {
    margin-top: 16px !important;
  }
  body.page-id-4462 #page-container .et_pb_text_45 p {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: #c4b8b1 !important;
  }
}

/* M6 Home comparison table (Mobil #startseite): header cells sit on one line
 * (50 high). The live table has a fourth column ("Gutenberg + Blocks") that
 * wrapped to two lines and pushed the header row to 62. The table scrolls
 * sideways anyway. */
@media (max-width: 767px) {
  body #page-container .dw-table thead th {
    white-space: nowrap;
  }
  /* Artboard column widths: Kriterium 132, Divi 5 216 (border-box); the
     other columns size to content instead of sharing a fixed 640. */
  body #page-container .dw-table {
    min-width: 0 !important;
    width: max-content !important;
  }
  body #page-container .dw-table thead th:first-child {
    min-width: 132px;
  }
  body #page-container .dw-table thead th.dw-table__hero {
    min-width: 216px;
    width: 216px;
  }
  body #page-container .dw-table tbody td:not(.dw-table__hero) {
    max-width: 200px;
  }
}

/* M7 Post buy box (Mobil #beitrag "Divi kaufen", under the text on phones):
 * card padding 24, radius 22, 10 between label, title, text and button;
 * label Plex Mono 13/400 #dfeee6; title Sora 20/700 (lh 1.65); text DM Sans
 * 16/400/1.6 #e0f0e7; button padding 14 (54 high). Staging: padding 28/24,
 * radius 24, title h4 24px, text 500, gaps 12/12/16, button 52. */
@media (max-width: 767px) {
  body #page-container .et_pb_group_1_tb_body {
    padding: 24px !important;
    border-radius: 22px !important;
  }
  body #page-container .et_pb_group_1_tb_body > .et_pb_module:not(:last-child) {
    padding-bottom: 10px !important;
  }
  body #page-container .et_pb_text_3_tb_body,
  body #page-container .et_pb_text_3_tb_body p {
    font-weight: 400 !important;
    color: #dfeee6 !important;
    line-height: 1.65 !important;
  }
  body #page-container .et_pb_heading_1_tb_body .et_pb_module_header {
    font-size: 20px !important;
    line-height: 1.65 !important;
    letter-spacing: -0.03em !important;
  }
  body #page-container .et_pb_text_4_tb_body,
  body #page-container .et_pb_text_4_tb_body p {
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #e0f0e7 !important;
  }
  body #page-container .et_pb_button_0_tb_body {
    height: auto !important;
    padding: 14px !important;
    line-height: 26.4px !important;
  }
}

/* M8 Comments, phone (Kommentare.dc.html "Telefon · 390 px"): "Antworten"
 * is a left-aligned text link 700/15 with a 44px tap height. On phones the
 * global full-width .et_pb_button rule stretched it to 350 and centred it. */
@media (max-width: 767px) {
  body #page-container .dw-comments a.comment-reply-link.et_pb_button,
  body #page-container .dw-comments #cancel-comment-reply-link {
    align-self: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
}

/* M9 Archive hero (Mobil #archiv, blog/category/search template with the
 * search pill): padding 20/20/32, 18 between breadcrumb, title, lead and
 * search; breadcrumb Plex Mono 13 with "Startseite" #4a2a20, "/" #6b4030 and
 * the current item in ink; lead 18/500. Staging: 44/56 section padding, gaps
 * 26/26/30, breadcrumb 14 with the colours swapped, lead 17. */
@media (max-width: 767px) {
  body #page-container .et-l--body .et_pb_section_0_tb_body:has(.dw-search-form) {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_breadcrumbs_0_tb_body,
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_post_title_0_tb_body {
    padding-bottom: 18px !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_column_0_tb_body {
    margin-bottom: 18px !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_breadcrumbs_0_tb_body :is(a, span) {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_breadcrumbs--breadcrumb {
    color: #4a2a20 !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_breadcrumbs--separator {
    color: #6b4030 !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_breadcrumbs--current {
    color: var(--dw-ink) !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) .et_pb_text_0_tb_body p {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }
}

/* M10 Blog pagination (Mobil #archiv): 40 above, 48 below; numbers are
 * borderless 46px circles (current ink, others #fbece3), the ellipsis is a
 * plain 30px-wide "…" in #9c938a, "back" has a 2px #e0d8d0 ring and "next" a
 * 2px ink ring with no fill. Staging: 48/56 around, 1px #e7e0d9 rings on all,
 * ellipsis and next as filled sand circles. */
@media (max-width: 767px) {
  body #page-container .dw-numbered-pagination {
    margin-top: 40px !important;
  }
  body #page-container .et-l--body .et_pb_section:has(.dw-numbered-pagination) {
    padding-bottom: 48px !important;
  }
  body #page-container .dw-numbered-pagination .page-numbers {
    border: 0 !important;
  }
  body #page-container .dw-numbered-pagination .page-numbers.dots {
    width: 30px !important;
    min-width: 0 !important;
    background: transparent !important;
    color: #9c938a !important;
  }
  body #page-container .dw-numbered-pagination .page-numbers.prev {
    border: 2px solid #e0d8d0 !important;
    background: transparent !important;
  }
  body #page-container .dw-numbered-pagination .page-numbers.next {
    border: 2px solid var(--dw-ink) !important;
    background: transparent !important;
  }
}

/* M11 Blog featured post (Mobil #archiv): the card starts 28 below the chip
 * rail (staging 56); featured and grid excerpts are DM Sans 16/500/1.6 #4a423f (staging
 * Divi's default 18/400 #666). */
@media (max-width: 767px) {
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) ~ .et_pb_section_2_tb_body {
    padding-top: 28px !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) ~ .et_pb_section_2_tb_body .et_pb_blog_0_tb_body .post-content p,
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) ~ .et_pb_section .et_pb_blog_1_tb_body .post-content p {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #4a423f !important;
  }
}

/* M12 Blog grid (Mobil #archiv): grid starts 40 below the featured card
 * (staging 64), cards 34 apart (staging 40), 12 between image, meta, title
 * and excerpt (staging 14), title Sora 20/700 (staging 800); meta date in
 * Plex Mono 13 on featured and grid cards (staging 14). */
@media (max-width: 767px) {
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) ~ .et_pb_section:has(.et_pb_blog_1_tb_body) {
    padding-top: 40px !important;
  }
  body #page-container .et_pb_blog_1_tb_body .et_pb_blog_posts {
    row-gap: 34px !important;
  }
  body #page-container .et_pb_blog_1_tb_body article {
    gap: 12px !important;
  }
  body #page-container .et_pb_blog_1_tb_body .entry-title {
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  body #page-container .et_pb_section_0_tb_body:has(.dw-search-form) ~ .et_pb_section :is(.et_pb_blog_0_tb_body, .et_pb_blog_1_tb_body) .post-meta .published {
    font-size: 13px !important;
  }
}

/* M13 Home "Neu im Blog" (Mobil #startseite): heading, then two stacked
 * cards 24 apart and 24 below the heading; each card is image (3:2, radius
 * 22, full 350), chip, title Sora 20/700/1.2, excerpt 16/500/1.6 #4a423f,
 * 12 apart, no card padding. No "Mehr Know-How" link on the phone. Staging:
 * link row (44) plus 30 + 32 before the first card, three cards with 16px
 * padding (image 318), title 24/800, excerpt 19/400. */
@media (max-width: 767px) {
  body.home #page-container .et_pb_section_4 .et_pb_column_11 {
    margin-bottom: 24px !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_column_12 {
    display: none !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 .et_pb_blog_posts {
    margin-top: 0 !important;
    gap: 24px !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 article {
    padding: 0 !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    background: transparent !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 article:nth-of-type(n+3) {
    display: none !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 .entry-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
  }
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 .post-content,
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 .post-content p {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #4a423f !important;
  }
}

/* M13b The card title link carries its own 24px and a 44px min-height (a
 * one-line title stood 44 high, design 24; the link is 350 wide, so the
 * target stays well above 24x24); it follows the h2 on the phone. Home blog section starts 56 below the comparison (staging 40). */
@media (max-width: 767px) {
  body.home #page-container .et_pb_section_4 .et_pb_blog_0 .entry-title a,
  body #page-container .et_pb_blog_1_tb_body .entry-title a {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    min-height: 0 !important;
    display: block !important;
  }
  body.home #page-container .et_pb_section_4 {
    padding-top: 56px !important;
  }
}

/* M14 Post "Das passt dazu": heading -> card rail. Divi's mobile column
 * margin-bottom (30) put the rail ~35 below the heading text; Mobil #beitrag
 * has ~23 (block gap 20). Heading column only, phone only. */
@media (max-width: 767px) {
  body.single-post #page-container .et_pb_section_2_tb_body:has(.et_pb_blog_0_tb_body) .et_pb_column_3_tb_body {
    margin-bottom: 18px !important;
  }
}

/* M15 Post tags + author box per Mobil #beitrag (390): tags 14 below the
 * hairline (was 32) and 20 above the author box (was 30); avatar 48x48 (module
 * was 56 high), name 10 below via the box's grid gap; name Sora 20/33 (was 24/28.8); bio 16/400. */
@media (max-width: 767px) {
  body.single-post #page-container .dw-tags {
    padding-top: 14px !important;
    margin-bottom: 20px !important;
  }
  body.single-post #page-container .dw-author-box .dw-author-avatar {
    height: 48px !important;
    min-height: 0 !important;
    margin-bottom: 0 !important; /* box is a grid, row-gap 10 = design */
  }
  body.single-post #page-container .dw-author-box .et_pb_module_header {
    font-size: 20px !important;
    line-height: 33px !important;
  }
  body.single-post #page-container .dw-author-box .dw-author-avatar ~ .et_pb_text,
  body.single-post #page-container .dw-author-box .dw-author-avatar ~ .et_pb_text p {
    font-weight: 400 !important;
  }
}

/* M16 Dark newsletter band in the Theme Builder body templates (posts, blog
 * archive) per the Mobil newsletter block, same as M5 on the Tutorial: block
 * 40/20 (was 56), 16 between heading, field, button and note (was 30/10/0),
 * signup module without its own 25px inset (form was x45 / 300 wide), field
 * 16/500 padding 17/22 with placeholder #9c938a, button 17/700 padding 17
 * (56 high), note 14/500/1.55 #c4b8b1. Copy is content. */
@media (max-width: 767px) {
  body #page-container .et-l--body .et_pb_section:has(.et_pb_signup) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body #page-container .et-l--body .et_pb_section:has(.et_pb_signup) .et_pb_column:not(:last-child) {
    margin-bottom: 16px !important;
  }
  body #page-container .et-l--body .et_pb_signup {
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
  body #page-container .et-l--body .et_pb_signup .et_pb_newsletter_fields {
    row-gap: 16px !important;
    gap: 16px !important;
  }
  body #page-container .et-l--body .et_pb_signup .et_pb_newsletter_fields > p {
    margin: 0 !important;
  }
  body #page-container .et-l--body .et_pb_signup input.input {
    height: auto !important;
    padding: 17px 22px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: normal !important;
  }
  body #page-container .et-l--body .et_pb_signup input.input::placeholder {
    color: #9c938a !important;
  }
  body #page-container .et-l--body .et_pb_signup.et_pb_subscribe .et_pb_newsletter_button.et_pb_button {
    height: auto !important;
    min-height: 0 !important;
    padding: 17px !important;
    font-size: 17px !important;
    line-height: normal !important;
  }
  body #page-container .et-l--body .et_pb_signup .et_pb_newsletter_button_text {
    font-size: 17px !important;
    line-height: normal !important;
  }
  body #page-container .et-l--body .et_pb_signup + .et_pb_text,
  body #page-container .et-l--body .et_pb_signup + .et_pb_text p {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: #c4b8b1 !important;
  }
}

/* M17 Footer per Mobil #startseite footer (390): group headings 16/700 on a
 * 21 line with 10 to the list (was 25.6 + 10 padding), so "Internes" sits 18
 * below the first list; Divi's clearfix ::after became a fourth grid
 * item and added a trailing 22 gap. Footer 287 high. */
@media (max-width: 767px) {
  body #page-container .et-l--footer .et_pb_row_0_tb_footer::after {
    display: none !important;
  }
  body #page-container .et-l--footer .et_pb_column_3_tb_footer {
    margin-top: -3px !important;
  }
  body #page-container .et-l--footer :is(.et_pb_text_1_tb_footer, .et_pb_text_5_tb_footer),
  body #page-container .et-l--footer :is(.et_pb_text_1_tb_footer, .et_pb_text_5_tb_footer) p {
    line-height: 21px !important;
  }
}

/* M18 Blog category chips + count per Mobil #archiv (390): band 14 top and
 * bottom (was 16), count 12 below the rail (was 16) at 13px (was 14);
 * inactive chips 15/600, the active one stays 700. Chips stay 44 high (design
 * 42) for the tap target. */
@media (max-width: 767px) {
  body #page-container .et-l--body .et_pb_section_1_tb_body:has(.dw-result-count) .et_pb_row {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  body #page-container .et-l--body .et_pb_section_1_tb_body:has(.dw-result-count) .et_pb_column {
    gap: 12px !important;
    row-gap: 12px !important;
  }
  body #page-container .dw-result-count {
    font-size: 13px !important;
    line-height: 17px !important;
  }
  body #page-container .et-l--body .dw-chips a {
    font-weight: 600 !important;
  }
  body.blog #page-container .dw-chips a[href="/blog/"],
  body.category-tutorial #page-container .dw-chips a[href="/category/tutorial/"],
  body.category-tipps #page-container .dw-chips a[href="/category/tipps/"],
  body.category-news #page-container .dw-chips a[href="/category/news/"],
  body.category-plugins #page-container .dw-chips a[href="/category/plugins/"],
  body.category-webcast #page-container .dw-chips a[href="/category/webcast/"] {
    font-weight: 700 !important;
  }
}

/* M19 Home hero + "Dein Weg" per Mobil #startseite (390). Hero: 16 top
 * (was 20), lead 22 below the H1 (was 32), buttons 22 below the lead (was 26),
 * both buttons 56 high at 17/700 (was 52 at 18) and 10 apart (was 20: group
 * gap plus a sibling margin). Weg: lead 17/27.2/500 (was 18/28.8/400), card
 * buttons 49 high (design padding 14) and 14 below the card text (was 10). */
@media (max-width: 767px) {
  body.home #page-container .et-l--post .et_pb_section_0 {
    padding-top: 16px !important;
  }
  body.home #page-container .et-l--post .et_pb_heading_0 {
    padding-bottom: 22px !important;
  }
  body.home #page-container .et-l--post .dw-hero__line {
    gap: 22px !important;
    row-gap: 22px !important;
  }
  body.home #page-container .dw-hero__actions > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
    margin-top: 0 !important;
  }
  body.home #page-container .dw-hero__actions a.et_pb_button {
    min-height: 56px !important;
    font-size: 17px !important;
  }
  body.home #page-container .et-l--post .et_pb_text_2,
  body.home #page-container .et-l--post .et_pb_text_2 p {
    font-size: 17px !important;
    line-height: 27.2px !important;
    font-weight: 500 !important;
  }
  body.home #page-container .dw-path-cards a.et_pb_button {
    min-height: 49px !important;
  }
  /* padding, not margin: qa-sweep keeps margin-top:auto for the desktop
   * bottom alignment of the three cards. */
  body.home #page-container .dw-path-cards .et_pb_button_module_wrapper {
    padding-top: 4px !important;
  }
}

/* M20 Home "Visueller Builder" block per Mobil #startseite (390): section
 * 56 top (was 40), 14 between kicker, H2, lead, shot and button (was 16, +8
 * above the button), kicker on its 17 line, lead 17/27.2/500 (was 18/29.7/400),
 * shot 4:3 radius 20 (was the 16:9 image at radius 28, cover-cropped), button
 * 54 at 17/700 (was 52 at 18). Block 621 high as in Mobil. */
@media (max-width: 767px) {
  body.home #page-container .et-l--post .et_pb_section_2 {
    padding-top: 56px !important;
  }
  /* Weg section ends at its last card (Mobil 0 bottom), so the block sits 56
   * below the cards, not 72. */
  body.home #page-container .et-l--post .et_pb_section_1 {
    padding-bottom: 0 !important;
  }
  body.home #page-container .dw-sage-block {
    gap: 14px !important;
    row-gap: 14px !important;
  }
  body.home #page-container .dw-sage-block .et_pb_text_9,
  body.home #page-container .dw-sage-block .et_pb_text_9 p {
    line-height: 17px !important;
  }
  body.home #page-container .dw-sage-block .et_pb_text_10,
  body.home #page-container .dw-sage-block .et_pb_text_10 p {
    font-size: 17px !important;
    line-height: 27.2px !important;
    font-weight: 500 !important;
  }
  body.home #page-container .dw-sage-block .dw-shot,
  body.home #page-container .dw-sage-block .dw-shot img {
    border-radius: 20px !important;
  }
  body.home #page-container .dw-sage-block .dw-shot img {
    aspect-ratio: 4 / 3;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    object-position: left top;
  }
  body.home #page-container .dw-sage-block .et_pb_button_module_wrapper {
    margin-top: 0 !important;
  }
  body.home #page-container .dw-sage-block a.et_pb_button {
    min-height: 54px !important;
    font-size: 17px !important;
  }
}

/* M21 Home newsletter (et-l--post, section 5): same Mobil block as M16. */
@media (max-width: 767px) {
  body.home #page-container .et-l--post .et_pb_section:has(.et_pb_signup) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.home #page-container .et-l--post .et_pb_section:has(.et_pb_signup) .et_pb_column:not(:last-child) {
    margin-bottom: 16px !important;
  }
  body.home #page-container .et-l--post .et_pb_signup {
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
  body.home #page-container .et-l--post .et_pb_signup .et_pb_newsletter_fields {
    row-gap: 16px !important;
    gap: 16px !important;
  }
  body.home #page-container .et-l--post .et_pb_signup .et_pb_newsletter_fields > p {
    margin: 0 !important;
  }
  body.home #page-container .et-l--post .et_pb_signup input.input {
    height: auto !important;
    padding: 17px 22px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: normal !important;
  }
  body.home #page-container .et-l--post .et_pb_signup input.input::placeholder {
    color: #9c938a !important;
  }
  body.home #page-container .et-l--post .et_pb_signup.et_pb_subscribe .et_pb_newsletter_button.et_pb_button {
    height: auto !important;
    min-height: 0 !important;
    padding: 17px !important;
    font-size: 17px !important;
    line-height: normal !important;
  }
  body.home #page-container .et-l--post .et_pb_signup .et_pb_newsletter_button_text {
    font-size: 17px !important;
    line-height: normal !important;
  }
  body.home #page-container .et-l--post .et_pb_signup + .et_pb_text,
  body.home #page-container .et-l--post .et_pb_signup + .et_pb_text p {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: #c4b8b1 !important;
  }
}


/* M22 Post hero per Mobil #beitrag (390): breadcrumb IBM Plex Mono 13/normal
 * .1em (was 14/23.8 .08em), parents #4a2a20, current ink, 9 either side of the
 * slash (was 4.9); H1 36 on a .96 line (was 1.0). */
@media (max-width: 767px) {
  body.single-post #page-container .et_pb_breadcrumbs_0_tb_body,
  body.single-post #page-container .et_pb_breadcrumbs_0_tb_body :is(nav, a, span) {
    font-size: 13px !important;
    line-height: normal !important;
    letter-spacing: 0.1em !important;
  }
  body.single-post #page-container .et_pb_breadcrumbs_0_tb_body .et_pb_breadcrumbs--separator {
    margin: 0 9px !important;
  }
  body.single-post #page-container .et_pb_breadcrumbs_0_tb_body .et_pb_breadcrumbs--breadcrumb:not(.dw-bc-last),
  body.single-post #page-container .et_pb_breadcrumbs_0_tb_body .et_pb_breadcrumbs--breadcrumb:not(.dw-bc-last) a {
    color: #4a2a20 !important;
  }
  /* #main-content: qa-sweep's `#page-container #main-content h1` (two ids,
   * line-height 1) otherwise wins over every .96 rule. */
  body.single-post #page-container #main-content .et_pb_post_title_0_tb_body h1.entry-title {
    line-height: 0.96 !important;
  }
}

/* M23 Webcast archive cards (page 6123, blog module 3) on the Mobil #archiv
 * card system (390): 12 image -> title -> excerpt (was 14 / 6), title 20/24
 * with the link at text height (was a 44 box), excerpt 16/25.6/500 #4a423f
 * (was 19/400), 34 between cards (was 71). The empty meta line is not shown;
 * chip + date are a design decision (design-gaps-390.md). */
@media (max-width: 767px) {
  body.page-id-6123 #page-container .et_pb_blog_3 .et_pb_blog_posts {
    row-gap: 34px !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 article.et_pb_post {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 .et_pb_image_container,
  body.page-id-6123 #page-container .et_pb_blog_3 a.entry-featured-image-url {
    margin: 0 !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 .et_pb_image_container {
    margin-bottom: 12px !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 .entry-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 24px !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 .entry-title a {
    font-size: inherit !important;
    line-height: inherit !important;
    min-height: 0 !important;
    display: block !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 .post-meta:empty {
    display: none !important;
  }
  body.page-id-6123 #page-container .et_pb_blog_3 .post-content,
  body.page-id-6123 #page-container .et_pb_blog_3 .post-content p {
    font-size: 16px !important;
    line-height: 25.6px !important;
    font-weight: 500 !important;
    color: #4a423f !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}