/* ============================================================
   FOUNDER COCKPIT — mobile polish
   Loaded last. Everything here is scoped to a phone-sized screen
   or to a coarse pointer, so no desktop rule is touched.

   Most people meet this brand on a phone first, so the phone is
   the flagship, not the fallback. What was costing it, in the
   order it was found: a footer that read as a left-aligned list
   rather than a composed block; label type down at 10px; gold
   labels at half the contrast they need; section seams that ran
   48 to 120px with no pattern; the founder's portrait squeezed
   into a 154px band; and controls smaller than a fingertip.

   Every number quoted in the comments below was measured on the
   rendered page at 390px, not estimated.
   ============================================================ */

/* ---- 1. the footer gets one centred axis --------------------
   On a wide screen the footer is four columns and left alignment
   gives them a shared spine. Stacked into one column that spine
   disappears and the same alignment reads as debris drifting to
   the left edge — the badge especially, which carried a 48px left
   pad meant for a four-column grid. One centre line instead. */
@media (max-width: 767px) {
  .footer-grid {
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    align-items: center;
    padding-left: 0;
    text-align: center;
  }

  /* The badge is the whole brand column — there is no strapline
     under it — so at 170px it sat alone in the middle of the
     footer like a dropped coin. As a mark rather than a poster it
     holds the centre line without dominating it. */
  .footer-brand img {
    height: 116px;
    width: 116px;
  }

  /* the social row */
  .footer-brand > div {
    justify-content: center;
  }

  .footer-col ul {
    align-items: center;
  }

  .footer-bottom {
    align-items: center;
    text-align: center;
  }

  /* ---- 2. a type floor for labels -------------------------
     Every one of these is uppercase with wide tracking, which is
     the least forgiving setting there is. At 9.9px on a phone the
     stat captions under the hero were decoration, not text. */
  .hero-stage-stat-label,
  .pill-v960-eyebrow,
  .hero-trust-label,
  .section-label,
  .hero-badge,
  .pillars-v960-label,
  .fcp__label,
  .hero-trust-tags-blue span,
  .outcome-flow-tag,
  .rv-modal-eyebrow,
  .footer-col h4,
  .form-group > label {
    font-size: 0.75rem !important;
  }

  /* The strategy chips are gold on a navy glass pill, so the
     colour is right; only the 10.7px is not. The extra class
     outranks the !important set on the tag rule in index.html. */
  .pill-v960 .pill-v960-tags span {
    font-size: 0.75rem !important;
  }

  /* Slightly tighter tracking to pay for the extra size — the
     labels must not start wrapping. */
  .hero-stage-stat-label,
  .pill-v960-eyebrow {
    letter-spacing: 0.10em !important;
  }

  /* ---- 2b. one vertical rhythm ----------------------------
     Measured on a 390px screen: the gaps between sections ran
     48 · 72 · 96 · 120px with no pattern, because each section
     carried its own top and bottom padding and the two added up
     differently at every seam. Wide screens hide that — you never
     see two seams at once. On a phone you scroll through all of
     them in twenty seconds and the page breathes unevenly.

     One value per seam. 40+40 = 80px of air between sections:
     enough that nothing crowds, little enough that nothing reads
     as a missing block. */
  #pain, #about, #strategy, #platform,
  #results, #roadmap, #faq, #contact {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* The hero stacked three separate spacings between the buttons
     and the trust row — a 48px margin, a 22px flex gap and a 14px
     margin — for an 84px hole under the primary CTA. */
  .hero-actions {
    margin-bottom: 0;
  }

  .hero-trust {
    margin-top: 18px;
  }

  .hero-badge {
    margin-bottom: 10px;
  }

  /* ---- 2c. the founder gets a frame, not a slit -----------
     The portrait is the page's only piece of human proof, and on
     a 375px screen the 2560:1130 frame rendered it 154px tall —
     a letterbox band you scroll past. The source is 1980x1020
     with the subject centred and the head high, so a 16:10 frame
     gains 65px of height. At 16:10 the source is the wider of the
     two, so `cover` now trims the outer ~9% of each side instead
     of slicing the top and bottom: the full height of the frame —
     head, wordmark and floor — survives, and what goes is empty
     background at the edges. */
  .hero-stage-frame {
    aspect-ratio: 16 / 10;
  }

  /* ---- 2d. the consent notice stops eating the screen -----
     154px tall with 32px side padding — on an iPhone SE that is
     a quarter of the viewport sitting over the content, and it
     is the first thing a visitor sees. Same words, same two
     buttons, tighter box. */
  #cookieBanner {
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    gap: 14px;
  }

  #cookieBanner p {
    font-size: 0.8125rem;
    line-height: 1.45;
    margin-bottom: 0;   /* the flex gap already spaces it */
  }

  #cookieBanner .cookie-actions button {
    padding-block: 11px;
  }

  /* ---- 2e. the labels become readable ---------------------
     Measured, not guessed: --gold-dark #AF997A on the cream
     surfaces gives 2.5–2.6:1. The floor for 12px text is 4.5:1.
     Every section label, pillar label and outcome tag on the page
     was running at roughly half the contrast it needs — which is
     why they read as a pale smudge rather than as typography.

     This is not a new colour so much as the same gold taken far
     enough down the ramp to work as ink on a light surface. It
     keeps the hue (≈40°) and the muted chroma of the brand gold;
     it only stops pretending that a highlight tone can be text.
     Gold on dark surfaces is untouched — it passes there, which
     is why .fcp__label is deliberately absent from this list: it
     sits on the navy platform panel. */
  .section-label,
  .pillars-v960-label,
  .outcome-flow-tag {
    color: #6F5C39 !important;
  }

  /* Same for the gold half of a headline, which is set as spans
     rather than <em>: 2.62:1, under the 3:1 that display type
     still owes. One step down the same ramp clears it and keeps
     the word reading as gold rather than as brown. */
  h1 em, h2 em, h3 em,
  .sa-word-inner {
    color: #9A8155 !important;
  }

  /* The consent link is the one piece of legally load-bearing text
     on the first screen. It was the palest thing on the page. */
  #cookieBanner a {
    color: #6F5C39 !important;
  }

  /* The contact block is the one section on navy, so the label
     there keeps the bright gold — the darker ink would be the
     unreadable one against it. */
  #contact .section-label,
  .site-footer .section-label {
    color: var(--gold) !important;
  }

  /* ---- 3. the orphaned rule -------------------------------
     A 1px divider that separated the label from the tag row when
     they shared a line. Stacked, it dangles off the label with
     nothing on the other side of it. */
  .hero-trust-label::after {
    display: none;
  }

}

/* ---- 4. everything reachable by thumb -----------------------
   Keyed to the pointer rather than the width: a fingertip is the
   same size on a small tablet. 44px is the floor, not a target. */
@media (hover: none) and (pointer: coarse) {
  .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* The logo is the "go home" control and measured 38px tall. */
  .nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-burger {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* The list keeps its visual rhythm; the padding does the
     reaching, so the links do not look further apart than they
     read. */
  .footer-col ul {
    gap: 0;
  }

  .footer-col ul a {
    display: block;
    padding-block: 14px;
  }

  /* The consent box gates the whole lead form and was 15px
     square — smaller than the letters next to it. */
  form input[type="checkbox"],
  .form-privacy input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
  }

  .form-privacy {
    align-items: center;
    gap: 12px;
    min-height: 44px;
  }

  form label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
  }

  /* The legal row and the inline "Plattform entdecken" link were
     ~16px tall — a line of text, not a control. */
  .footer-legal a,
  .fcp__link,
  .form-privacy a,
  a[href^="https://wa.me/"],
  a[href="/datenschutz"] {
    display: inline-block;
    /* !important because the WhatsApp link carries its padding as
       an inline style attribute, which no plain rule can outrank. */
    padding-block: 13px !important;
  }

  .footer-legal {
    row-gap: 0;
  }

  /* Rating stars and the modal close are the only controls a
     reviewer touches; both sat at 35px. */
  .rv-star,
  .rv-modal-close {
    min-width: 46px;
    min-height: 46px;
  }
}