/* Digital Olymp — base.css
   Single source of truth for default link color sitewide.
   Loaded first on every page; component rules (nav, footer, buttons, .cite-link,
   .wedge-phone) override locally. This rule only catches otherwise-unstyled links
   so none ever fall back to the browser-default blue. */
:root { --color-link: #7B5E3A; }   /* canonical DO link color (bronze, AA-safe on light) */
a { color: var(--color-link); }

/* In-body emphasis for the ONE outcome/pain phrase per card (never jargon, never a
   whole block). Color + weight only, no size bump, so the baseline stays calm. Uses
   the page's inline --color-bronze-dark. Was .pain-em (pain-only); now marks gains too. */
.key-em { color: var(--color-bronze-dark); font-weight: 700; }

/* <strong> inside a styled body link must keep the link colour. Without this,
   page rule `.article-inner strong { color: charcoal }` (0,1,1) wins over the
   link colour and bold cite/inline links render as plain dark text. The `a.`
   prefix lifts this to (0,1,2) so it beats that rule regardless of load order. */
a.cite-link strong, a.inline-link strong { color: inherit; }

/* ===== Mobile nav: tap-to-call + Kontakt always visible in the bar =====
   Desktop uses the in-menu .nav-cta; these elements show whenever the nav is
   collapsed (≤1200px, see below). Loaded before page inline <style>, so
   overrides of existing rules use higher specificity (double class) to win. */
.nav-call, .nav-cta-mobile { display: none; }
.nav-logo .nav-logo-mark { display: none; }   /* 0,2,0 beats inline .nav-logo img (0,1,1) */

/* ===== Nav collapse for the tablet gap (769–1200px) =====
   Page inline styles collapse the nav only ≤768px, but the full desktop row
   needs ~1160px; between those widths the Kontakt button was clipped by
   overflow-x hidden. This block replicates each page's own ≤768px nav rules
   for 769–1200px. nav[role] prefix lifts specificity above the page rules
   (which load later and would otherwise win). */
@media (max-width: 1200px) and (min-width: 769px) {
  nav[role="navigation"] .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--color-paper); flex-direction: column; padding: 1.5rem; gap: 0.75rem; border-bottom: 1px solid var(--color-ice); align-items: flex-start; }
  nav[role="navigation"] .nav-links.open { display: flex; }
  nav[role="navigation"] .nav-toggle { display: block; }
  nav[role="navigation"] .nav-dropdown-menu { display: block; position: static; box-shadow: none; border: none; padding: 0; background: none; }
  nav[role="navigation"] .nav-dropdown-menu a { padding: 0.4rem 0.75rem; border-bottom: none; font-size: 0.85rem; color: var(--color-fog) !important; }
  nav[role="navigation"] .nav-dropdown-toggle::after { display: none; }
  nav[role="navigation"] .mega-col + .mega-col { border-top: 1px solid var(--color-ice); margin-top: 0.35rem; padding-top: 0.4rem; }
}

/* ===== Collapsed menu taller than viewport: make the panel scroll =====
   The grouped Services list + Tools + Blog etc. exceed one phone screen; without
   its own scroll container the lower items (Blog, Kontakt) are unreachable.
   includes.js locks body scroll while open. Specificity (0,3,1) beats the
   page-inline .nav-links.open (0,2,0). */
@media (max-width: 1200px) {
  nav[role="navigation"] .nav-links.open {
    display: flex;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);   /* iOS dynamic toolbar */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;      /* don't chain scroll to the page behind */
  }
}

/* ===== iOS Safari: fixed nav + backdrop-filter lags/shifts on scroll =====
   Known compositing bug; drop the blur on phones and go solid (bg was 95%
   opaque anyway). body prefix (0,1,2) beats page-inline nav[role] (0,1,1). */
@media (max-width: 768px) {
  body nav[role="navigation"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-paper);
  }
}

/* ===== Services mega-menu: 3 outcome columns side by side on desktop =====
   Collapsed nav (≤1200px) keeps the vertical grouped list; these rules only
   shape the open desktop panel. nav[role] prefix beats the page rules
   (.nav-dropdown:hover .nav-dropdown-menu { display:block } etc.). */
@media (min-width: 1201px) {
  /* Top-level nav labels must stay on one line. The row (logo 382 + links ~780)
     just fits the 1200 cap, but wrappable links shrink to their longest word and
     break mid-label ("Der / Aufstieg") instead of overflowing. Scoped to > li > a
     so the collapsed menu still wraps its long submenu labels below 1201px. */
  nav[role="navigation"] .nav-links > li > a { white-space: nowrap; }
  nav[role="navigation"] .nav-dropdown-mega { min-width: 640px; flex-wrap: wrap; column-gap: 1.75rem; padding: 1.1rem 1.5rem 1.25rem; left: 50%; transform: translateX(-50%); }
  nav[role="navigation"] .nav-dropdown:hover .nav-dropdown-mega,
  nav[role="navigation"] .nav-dropdown:focus-within .nav-dropdown-mega { display: flex; }
  nav[role="navigation"] .nav-dropdown-mega .mega-col { flex: 1 1 0; }
  nav[role="navigation"] .nav-dropdown-mega .dropdown-label { padding: 0.25rem 0 0.4rem; white-space: nowrap; }
  nav[role="navigation"] .nav-dropdown-mega .mega-col a { padding: 0.55rem 0; white-space: nowrap; }
  nav[role="navigation"] .nav-dropdown-mega .mega-col a:last-child { border-bottom: none; }
  nav[role="navigation"] .nav-dropdown-mega .mega-basislager { flex-basis: 100%; display: block; padding: 0.65rem 1rem; margin-top: 0.9rem; border-radius: 6px; text-align: center; text-decoration: none; font-size: 0.875rem; }
}
@media (max-width: 1200px) {
  .nav-call, .nav-cta-mobile { display: inline-flex; align-items: center; }
  .nav-call {
    margin-left: auto;                       /* push call+kontakt+burger to the right */
    color: var(--color-charcoal); padding: 0.4rem; text-decoration: none;
  }
  .nav-cta-mobile {
    margin-left: 0.5rem; margin-right: 0.6rem;
    background: var(--color-charcoal); color: var(--color-paper);
    padding: 0.45rem 0.9rem; border-radius: 4px;
    font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .nav-cta-mobile:hover, .nav-cta-mobile:focus { background: var(--color-bronze-dark); }
}
@media (max-width: 600px) {                  /* narrow phones: keep real wordmark, just shrink to fit */
  .nav-logo .nav-logo-full { display: block; height: clamp(15px, 4.3vw, 22px); }
}
@media (max-width: 360px) {                  /* smallest phones: shrink wordmark a touch more so it never overflows */
  .nav-logo .nav-logo-full { height: clamp(12px, 3.6vw, 14px); }
  .nav-cta-mobile { padding: 0.4rem 0.7rem; font-size: 0.75rem; margin-right: 0.4rem; }
}

/* ── Google-Ranking-Check tool (shared: flagship /google-ranking-check/ + /branchen/ pages) ──
   Markup = ranking-check-form.html, engine = wireRankingCheck() in includes.js. Palette vars
   (--color-paper etc.) come from each host page's inline :root, same as the nav rules above. */
.counter-badge { display: inline-block; background: var(--color-bronze-light); color: var(--color-bronze-text); font-weight: 600; font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 20px; margin-bottom: 1.25rem; }
.tool-card { background: var(--color-paper); border-radius: 12px; padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.tool-field { margin-bottom: 0.85rem; }
.tool-field label { display: block; font-weight: 700; font-size: 0.92rem; color: var(--color-charcoal); margin-bottom: 0.2rem; }
.tool-field .hint { display: block; font-size: 0.78rem; color: var(--color-fog); margin-bottom: 0.45rem; line-height: 1.4; }
.tool-field input { width: 100%; font-size: 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--color-ice); border-radius: 6px; background: #fff; color: var(--color-charcoal); }
.tool-field input:focus { outline: 2px solid var(--color-bronze); }
.tool-submit { width: 100%; justify-content: center; margin-top: 0.4rem; }
.tool-status { font-size: 0.88rem; color: var(--color-fog); margin-top: 0.9rem; text-align: center; min-height: 1.2rem; }
.tool-status.is-error { color: #a8453a; }

.rank-result-section { display: none; background: var(--color-snow); padding: clamp(2rem,5vw,3.5rem) 0; }
.rank-result-section:has(.rank-result.show) { display: block; }
.rank-result { margin: 0 auto; max-width: 720px; display: flex; flex-direction: column; gap: 1.1rem; }
.res-verdict { border-radius: 10px; padding: 1.4rem 1.5rem; }
.rank-result.band-strong .res-verdict { background: #eaf5ee; border: 1px solid #bfe3cc; }
.rank-result.band-mid .res-verdict { background: #fbf3e0; border: 1px solid #f0dcae; }
.rank-result.band-weak .res-verdict, .rank-result.band-notfound .res-verdict { background: #fbeceb; border: 1px solid #f2cdc9; }
.rank-result .res-pos { font-size: 2.1rem; font-weight: 800; color: var(--color-charcoal); line-height: 1; margin-bottom: 0.5rem; }
.rank-result .res-headline { font-size: 1.05rem; font-weight: 700; color: var(--color-charcoal); margin-bottom: 0.4rem; }
.rank-result .res-body { font-size: 0.95rem; color: var(--color-slate); line-height: 1.55; }
.rank-result .res-note { font-size: 0.8rem; color: var(--color-fog); margin-top: 0.6rem; }
.rank-result .res-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rank-result .res-cta a.btn { padding: 0.7rem 1.3rem; font-size: 0.92rem; }
.res-serp { background: #fff; border: 1px solid var(--color-ice); border-radius: 10px; padding: 1.4rem 1.5rem; }
.res-serp .serp-head { font-size: 0.85rem; font-weight: 700; color: var(--color-charcoal); margin-bottom: 0.7rem; }
.res-serp .serp-notfound { background: #fbeceb; border: 1px solid #f2cdc9; border-radius: 7px; padding: 0.6rem 0.8rem; font-size: 0.88rem; font-weight: 700; color: #9c3a32; margin-bottom: 0.8rem; }
.serp-row { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.5rem 0.4rem; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.86rem; }
.serp-row:last-child { border-bottom: none; }
.serp-row .serp-rank { flex: 0 0 auto; font-weight: 800; color: var(--color-bronze-dark); min-width: 2.4rem; }
.serp-row .serp-meta { min-width: 0; display: flex; flex-direction: column; }
.serp-row .serp-title { color: var(--color-charcoal); line-height: 1.35; }
.serp-row .serp-title-link { color: var(--color-bronze-text); text-decoration: none; }
.serp-row .serp-title-link:hover { text-decoration: underline; }
.serp-row .serp-host { color: var(--color-fog); font-size: 0.78rem; margin-top: 0.1rem; overflow-wrap: anywhere; }
.serp-row.is-you { background: #f6efe4; border-left: 3px solid var(--color-bronze-dark); border-radius: 5px; padding-left: 0.7rem; }
.serp-row.is-you .serp-title { font-weight: 700; }
.serp-row .serp-you-tag { color: var(--color-bronze-dark); font-weight: 700; white-space: nowrap; }
.res-diag { background: #fff; border: 1px solid var(--color-ice); border-radius: 10px; padding: 1.4rem 1.5rem; }
.res-diag .diag-title { font-size: 1rem; font-weight: 700; color: var(--color-charcoal); margin-bottom: 0.35rem; }
.res-diag .diag-lead { font-size: 0.9rem; color: var(--color-slate); margin-bottom: 0.5rem; }
.res-diag .diag-list { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.res-diag .diag-list li { font-size: 0.88rem; color: var(--color-slate); line-height: 1.5; margin-bottom: 0.3rem; }
.res-diag .diag-list a { color: var(--color-bronze-text); font-weight: 600; }
.res-diag .diag-close { font-size: 0.9rem; color: var(--color-slate); line-height: 1.55; margin: 0; }
.res-link-secondary { align-self: center; font-size: 0.88rem; color: var(--color-bronze-text); text-decoration: none; font-weight: 600; }
.res-link-secondary:hover { text-decoration: underline; }
.res-email { background: #fff; border: 1px solid var(--color-ice); border-radius: 10px; padding: 1.4rem 1.5rem; }
.res-email p { font-size: 0.88rem; color: var(--color-slate); margin-bottom: 0.5rem; }
.res-email .email-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.res-email input { flex: 1; min-width: 180px; font-size: 0.95rem; padding: 0.65rem 0.8rem; border: 1px solid var(--color-ice); border-radius: 6px; }
.res-email button { white-space: nowrap; padding: 0.65rem 1.1rem; }
.res-email .email-done { font-size: 0.88rem; color: #2d8659; font-weight: 600; }
.res-email .email-privacy { font-size: 0.78rem; color: var(--color-fog); margin: 0.6rem 0 0; }
.res-email .email-privacy a { color: var(--color-bronze-text); }