/* ============================================================================
   Mobile layer — the phone experience, in one place.

   Loaded last on every page, after the section stylesheets and after
   mobile-tablet.css, so it has the final say below 601px.

   Two rules drive everything here:
     1. A hero headline is the page's loudest voice. It gets the largest type
        the measure allows, and it breaks where the sentence breaks — never
        into runts or single-word lines.
     2. Headline lines that are set with explicit breaks stay nowrap, so the
        line structure the copy was written for survives; the type scale is
        derived from the longest line (container query units) instead of being
        capped by a fixed pixel ceiling.
   ========================================================================= */

/* --- Break helpers ------------------------------------------------------- */
/* `.on-mobile` markup appears only on phones, `.on-desktop` only above them.
   Used to re-break a headline (or drop one redundant word) for the narrow
   measure without maintaining a second copy of the sentence. */
.on-mobile { display: none; }
br.on-mobile { display: none; }

@media (max-width: 600px) {
  /* These are utilities: they have to beat the component rules further down
     (`.hero-type .hero-phrase { display: inline-flex }` out-specifies a plain
     `.on-desktop`), so they carry weight. */
  .on-desktop { display: none !important; }
  .on-mobile { display: inline; }
  br.on-mobile { display: block; }

  /* =========================================================================
     1. Startseite hero
     The four written lines stay intact and stay on one line each. Trimming the
     inline art, the flex gaps and the tracking buys back enough width to lift
     the headline from 24px to ~28.5px — the size the measure actually supports.
     ====================================================================== */
  .hero.hero-type {
    padding-top: 40px;
  }

  /* Align the headline with every section below it (no extra inset). */
  .hero-type .hero-copy {
    width: 100%;
    padding-inline: 0;
  }

  /* The type scale follows the container, so the headline is always as large as
     the longest of its four lines allows — ~28.5px at 390px, with head-room so
     it still fits a 320px phone. The tracking stays near the reference's
     -0.033em: tighter than that and the long German compounds look squeezed. */
  .hero-type h1 {
    font-size: clamp(21px, 7.9cqw, 31px);
    line-height: 1.1;
    letter-spacing: -.038em;
  }

  /* The line is a flex row, so its gap replaces the word space between the
     groups — it has to match the real space (~.26em in Poppins) or "durch
     schlauen Dialog" ends up with two different spacings on one line. Inside a
     phrase the gap is tighter: there the icon belongs to the word next to it. */
  .hero.hero-type h1 > .hero-line {
    display: flex;
    align-items: center;
    gap: .26em;
    height: 1.1em;
    white-space: nowrap;
  }

  .hero-type .hero-phrase {
    display: inline-flex;
    align-items: center;
    gap: .1em;
    white-space: nowrap;
  }

  /* Word-sized illustrations: large enough to read, small enough to leave the
     words their room. */
  .hero-type .hero-icon { width: 1.14em; height: 1.08em; }
  .hero-type .hero-icon-muted { width: 1.2em; height: 1.14em; margin-left: .04em; margin-right: 0; }
  .hero-type .hero-icon-burst { width: 1.2em; height: 1.14em; margin-right: -.02em; }
  .hero-type .hero-icon-bubble { width: 1em; height: 1em; margin-left: .06em; }
  .hero-type .avatar-stack { margin-inline: .04em; }
  .hero-type .avatar-stack img { width: .85em; height: .85em; border-width: 2px; margin-left: -.2em; }

  /* Reference gap between headline and first action is ~25px; 32 read loose. */
  .hero-type .hero-actions { margin-top: 22px; }

  .hero-type .hero-actions .button {
    --button-height: 60px;
    --button-icon: 44px;
    --button-inset: 8px;
    font-size: 16px;
  }

  /* =========================================================================
     2. Self-Check preview (Startseite)
     The handwritten headline is the second thing a visitor reads, so it gets
     real size — and a line structure written for the narrow measure, instead of
     the desktop groups wrapping twice and leaving "finden Sie" on its own.
     ====================================================================== */
  .hero-type .hero-art.selfcheck-browser {
    height: 470px;
    min-height: 470px;
    max-height: 470px;
  }

  .selfcheck-notebook {
    min-height: 432px;
    padding: 38px 16px;
    gap: 22px;
  }

  /* The leading is the ruled paper's line spacing — the title's line-height is
     bound to it, so size and leading move together or the handwriting drifts
     off the rules. */
  .selfcheck-browser__content {
    --notebook-leading: 38px;
  }

  .selfcheck-notebook__title {
    max-width: 100%;
    font-size: clamp(21px, 6.2vw, 25px);
  }

  /* The three written line groups stop forcing their desktop breaks; the
     `br.on-mobile` markers in the headline set the phone line structure
     (5 lines, each filling the measure) instead. */
  .selfcheck-notebook__title > span {
    display: inline;
  }

  .selfcheck-notebook__pill {
    padding-inline: 9px;
    border-radius: 8px;
  }

  /* =========================================================================
     3. Über-uns hero
     The desktop line groups wrapped twice each on a phone, leaving "echte",
     "machen" and "Ihren" stranded on their own lines. Inline them and let the
     `on-mobile` breaks in the markup set a five-line structure instead.
     ====================================================================== */
  .about-hero__line {
    display: inline;
  }

  .about-hero h1 {
    font-size: clamp(25px, 7.9vw, 33px);
    line-height: 1.1;
    letter-spacing: -.035em;
  }

  .about-hero .about-pill {
    padding-inline: 10px;
  }

  .about-hero__intro {
    max-width: 330px;
    font-size: 16px;
    line-height: 1.55;
  }

  /* =========================================================================
     4. KI hero
     The two calls to action sit in a wrapping flex row. On a phone they wrap,
     and because only the first one grows they came out at different widths —
     a 350px orange bar above a 165px white one. Stack them instead.
     ====================================================================== */
  .ki-order-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ki-order-actions > .button {
    width: 100%;
    flex: 0 0 auto;
  }

  /* =========================================================================
     5. Section headings
     styles.css already sets a confident mobile scale; mobile-tablet.css had
     shrunk it back to 29px across the board. Restore the hierarchy.
     ====================================================================== */

  /* Written line breaks are chosen for a wide measure. On a phone they land
     mid-thought and leave single words stranded ("… zu / machen"), so they
     stand down and the browser balances the lines instead. A break meant for
     the phone carries `.on-mobile` and survives. */
  h1 br:not(.on-mobile),
  h2 br:not(.on-mobile),
  h3 br:not(.on-mobile) {
    display: none;
  }

  h2,
  h3 {
    text-wrap: balance;
  }

  .section-heading h2,
  .testimonials-heading h2 {
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .audience-intro h2 {
    font-size: 30px;
    line-height: 1.1;
  }

  .privacy-heading h2 {
    font-size: 29px;
    line-height: 1.1;
    letter-spacing: -.035em;
  }

  .closing-copy h2 {
    font-size: 33px;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  .selfcheck-card h3 {
    font-size: 25px;
    line-height: 1.2;
  }

  /* The bento cards indent their copy past the number circle, leaving a 234px
     measure. At 25px "Ein Ansprechpartner" missed that by 6px and dropped "Ein"
     onto a line of its own; one step down and the phrase holds together. */
  .about-bento__card-heading {
    font-size: 24px;
  }

  /* `balance` is the right default — it gives the best line structure for 44 of
     the 45 headings on the site. This one is the exception: it balances to
     162/142/293, putting the longest line last. Let it wrap naturally. */
  #ki-feature-learning-title {
    text-wrap: pretty;
  }

  .testimonials-card-copy {
    font-size: 25px;
    line-height: 1.22;
  }

  /* "Selfcheck starten" appeared at three different widths on one page. The
     primary action gets the full measure wherever it leads the section, the
     way it already does in the hero. */
  .closing-copy .button,
  .workflow-footer .button {
    width: 100%;
    --button-height: 60px;
    --button-icon: 44px;
    --button-inset: 8px;
    font-size: 16px;
  }

  /* =========================================================================
     6. Card art and copy
     Several service cards place absolutely positioned art behind their footer
     text. On a phone the art is proportionally larger and runs into the copy,
     so the label and the sentence end up printed over the picture.
     ====================================================================== */

  /* The lead card's clay figure overlapped the rule and the "Reaktivierung"
     block below it. Give the card 52px more height and the art its own band
     between the toggle and the rule. */
  .service-lead {
    min-height: 600px;
  }

  .service-lead .customer-state-visual {
    bottom: 158px;
    height: 250px;
  }

  /* The journey card sets white copy straight onto the photograph — at desktop
     width a gradient carries it, but that was switched off here. Put a quiet
     surface back under the text. */
  .service-journey .card-foot {
    background: linear-gradient(transparent, var(--berry) 20%);
    padding-top: 28px;
  }

  /* =========================================================================
     7. Micro-type floor
     11–12px labels are below comfortable reading size on a phone. Lift the
     eyebrows and captions to 13px and keep their tracking legible.
     ====================================================================== */
  /* Eyebrows. The child-combinator variants in styles.css out-specify a plain
     `.eyebrow`, so they are named here too. */
  .eyebrow,
  .audience-intro > .eyebrow,
  .closing-copy > .eyebrow,
  .privacy-eyebrow,
  .workflow-eyebrow,
  .proof-eyebrow {
    font-size: 13px;
    letter-spacing: .02em;
  }

  /* Tags and data labels: 13px floor. */
  .privacy-step,
  .proof-preview-label,
  .proof-bar-label,
  .proof-marker-label,
  .workflow-result,
  .card-foot strong,
  .status-pill,
  .person-heading p {
    font-size: 13px;
  }

  .proof-value {
    font-size: clamp(11px, 3.2vw, 13px);
  }

  .proof-caption {
    font-size: 12.5px;
    line-height: 1.5;
  }

  /* These read as sentences, not labels — they get real body size. */
  .privacy-note {
    font-size: 14px;
  }

  .closing-email {
    font-size: 14px;
    line-height: 1.5;
  }

  .footer-bottom {
    font-size: 12.5px;
  }

  /* =========================================================================
     8. Blog
     The library ran a 10–11px scale for its tags, meta and filters — readable
     on a desktop grid, too quiet on a phone.
     ====================================================================== */
  .blog-kicker,
  .featured-post__eyebrow,
  .blog-tag,
  .featured-post .blog-meta,
  .post-card__eyebrow .blog-tag,
  .post-card__eyebrow .blog-meta,
  .post-count,
  .blog-breadcrumb,
  .article-byline .blog-meta,
  .article-end,
  .related-posts .library-heading > .read-link,
  .copy-link {
    font-size: 12.5px;
  }

  .category-filters button {
    font-size: 13px;
    min-height: 40px;
  }

  .post-card__copy > p,
  .article-table table,
  .article-sources ol,
  .article-toc li a,
  .article-toc summary {
    font-size: 14px;
  }

  /* =========================================================================
     9. Tap targets
     Footer and menu links sat at 33–36px. 44px is the comfortable minimum.
     ====================================================================== */
  .site-footer a,
  .mobile-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .closing-email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Very small phones (SE, Mini): keep the same structure, one step down. */
@media (max-width: 360px) {
  .selfcheck-notebook__title { font-size: 21px; }
  .section-heading h2,
  .audience-intro h2,
  .testimonials-heading h2 { font-size: 28px; }
  .closing-copy h2 { font-size: 30px; }
  .privacy-heading h2 { font-size: 27px; }
}