/* =============================================================
   Shared site chrome: top nav, primary CTA, footer.
   Linked by all 7 pages (after fonts.css, before each page's
   inline <style>). Edit shared chrome here once.

   Font families are LITERAL stacks, not var(--font-*), so this
   file also renders correctly on fuer-praxen.html, which defines
   its colour/shadow/radius tokens inline but NOT --font-*.
   Colours stay tokenised: every page (incl. fuer-praxen's inline
   :root) defines identical values, so var() resolves correctly.
   ============================================================= */

/* =============================================================
   1 · Top navigation
   ============================================================= */
.pat-nav {
  height: 76px;
  display: flex; align-items: center;
  padding: 0 40px;
}
.pat-nav-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
}
.pat-nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--blue);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 22px; letter-spacing: -0.015em;
}
.pat-nav-brand img { width: 36px; height: 36px; object-fit: contain; }

.pat-nav-links {
  display: inline-flex; align-items: center; gap: 36px;
  list-style: none; padding: 0; margin: 0;
}
.pat-nav-link {
  position: relative;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px; font-weight: 500;
  color: var(--navy-soft);
  text-decoration: none;
  padding: 6px 0;
  transition: color 160ms ease;
}
.pat-nav-link:hover { color: var(--navy); }
.pat-nav-link.is-active {
  color: var(--navy);
  font-weight: 600;
}
.pat-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
}

.pat-nav-cta { justify-self: end; display: inline-flex; gap: 12px; align-items: center; }
.pat-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 10px;
  text-decoration: none; cursor: pointer; line-height: 1;
  border: 1px solid transparent;
  transition: background 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease,
              box-shadow 160ms ease;
}
.pat-btn-outline {
  background: #ffffff;
  color: var(--blue);
  border-color: var(--blue);
}
.pat-btn-outline:hover { background: var(--blue-50); }
.pat-btn-primary {
  gap: 11px;
  padding: 18px 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b78f6, #2563eb);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow:
    0 14px 30px -10px rgba(37, 99, 235, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pat-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px -10px rgba(37, 99, 235, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pat-btn-primary svg { width: 17px; height: 17px; transition: transform 0.2s ease; }
.pat-btn-primary:hover svg { transform: translateX(3px); }

/* Compact size for the primary CTA when it sits in the nav bar. */
.pat-nav-cta .pat-btn-primary {
  gap: 8px;
  padding: 11px 22px;
  font-size: 14.5px;
  line-height: 1.35;
  box-shadow:
    0 8px 18px -8px rgba(37, 99, 235, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pat-nav-cta .pat-btn-primary svg { width: 15px; height: 15px; }

/* =============================================================
   1b · Mobile nav: hamburger toggle (JS-gated) + dropdown panel
   The toggle is hidden until nav.js adds .has-js to <html>, so
   JS-off users see logo + CTA only, never a dead control.
   Desktop (>=769px) never shows the toggle and is unchanged.
   ============================================================= */
.pat-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy);
  cursor: pointer;
}
.pat-nav-toggle svg { width: 22px; height: 22px; display: block; }
.pat-nav-toggle:hover { background: var(--blue-50); border-color: var(--blue-200); }

/* Two-state nav CTA label: full by default, short below 375px. */
.pat-nav-cta .pat-cta-short { display: none; }

/* Compact (hamburger) nav decision. The hamburger shows at every width up to 1280,
   phones and tablets, in both orientations and at any height; the desktop row returns
   only at 1281 and wider, so true laptops (1366, 1440) keep the desktop row. Width
   alone keys the decision, with no height or orientation clause that could flip a
   tablet back to the desktop row mid-resize. This block holds the phone styling up to
   768 (tightened wordmark and padding for the 360px floor); the 769 to 1280 tablet
   block below uses roomier padding and the full wordmark. */
@media (max-width: 768px) {
  /* z-index makes the nav its own stacking context so the open dropdown panel
     paints above page content that sets its own z-index (e.g. the patient hero
     inner uses z-index:1, which otherwise wins over the panel in landscape). */
  .pat-nav { position: relative; z-index: 60; padding: 0 16px; }
  /* logo | CTA | hamburger (links leave flow when collapsed) */
  .pat-nav-inner { grid-template-columns: 1fr auto auto; gap: 8px; }
  .pat-nav-cta .pat-btn-primary { padding: 11px 16px; }
  /* Drop the nav CTA arrow on mobile so the "Therapiebär" wordmark has the room
     it needs and does not truncate to "Therapie...". Nav CTA only; desktop keeps
     the arrow. */
  .pat-nav-cta .pat-btn-primary svg { display: none; }
  /* Shrink the wordmark so logo + CTA + hamburger fit the 360px floor. */
  .pat-nav-brand { order: 1; font-size: 18px; min-width: 0; }
  .pat-nav-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pat-nav-cta { order: 2; }
  .pat-nav-toggle { order: 3; }
  .has-js .pat-nav-toggle { display: inline-flex; }

  .pat-nav-links {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 16px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    z-index: 50;
  }
  .pat-nav.is-open .pat-nav-links { display: flex; }
  .pat-nav-links .pat-nav-link {
    display: flex; align-items: center;
    min-height: 48px;
    padding: 0 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .pat-nav-links .pat-nav-link.is-active::after { display: none; }
}

@media (max-width: 480px) {
  /* Below ~480px the full label cannot share the bar with the logo and
     hamburger, so swap to the short label to hold the 360px floor.
     The full label still shows on larger phones/tablets (481-768px). */
  .pat-nav-cta .pat-cta-full { display: none; }
  .pat-nav-cta .pat-cta-short { display: inline; }
}

/* Tablet compact nav, 769 to 1280, both orientations and any height. The former
   page-local "Fix Package 08" nav, relocated here so all 7 pages share one nav
   decision: combined with the max-width:768 block above, the hamburger covers every
   viewport up to 1280 and the desktop row returns only at 1281. Roomier padding (24px)
   and the full wordmark, since these widths are not tight like the 360px phone floor. */
@media (min-width: 769px) and (max-width: 1280px) {
  .pat-nav { position: relative; z-index: 60; padding: 0 24px; }
  .pat-nav-inner { grid-template-columns: 1fr auto auto; gap: 12px; }
  .pat-nav-brand { order: 1; }
  .pat-nav-cta { order: 2; }
  .pat-nav-toggle { order: 3; }
  .has-js .pat-nav-toggle { display: inline-flex; }
  /* Drop the nav CTA arrow to match the phone compact nav; nav CTA only. */
  .pat-nav-cta .pat-btn-primary svg { display: none; }
  .pat-nav-links {
    display: none;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 40px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    z-index: 50;
  }
  .pat-nav.is-open .pat-nav-links { display: flex; }
  .pat-nav-links .pat-nav-link {
    display: flex; align-items: center;
    min-height: 48px;
    padding: 0 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .pat-nav-links .pat-nav-link.is-active::after { display: none; }
}

/* =============================================================
   10 · Footer (shared site footer, also used on therapist page)
   ============================================================= */
.pat-footer {
  position: relative;
  padding: 0 0 36px;
  color: var(--navy-soft);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  background:
    linear-gradient(to bottom, #f3f6fc 0%, #eaf0fa 30%, #e2eaf6 100%);
  overflow: hidden;
}
.pat-footer-wave {
  width: 100%;
  height: 180px;
  background: url("../assets/footer-wave-bg.png") top center / cover no-repeat;
  pointer-events: none;
}
.pat-footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 40px 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
  /* Single source of truth for the footer layout mode. CSS flips this and JS
     reads it via getComputedStyle, so the column layout and the details
     open-state can never disagree. 0 = desktop (columns always open),
     1 = collapsed accordion. The switch lives in the media blocks below. */
  --pat-footer-collapsed: 0;
}
.pat-footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
}

/* ---- Bear cap ---- */
.pat-footer-cap {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  z-index: 2;
}
.pat-footer-cap img { width: 38px; height: 38px; display: block; }

/* ---- Link columns (accordion on mobile, always open on desktop) ---- */
.pat-footer-col { min-width: 0; }
.pat-footer-col-h {
  margin: 0 0 16px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: -0.005em;
}
details.pat-footer-col > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin: 0 0 16px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: -0.005em;
  user-select: none;
}
details.pat-footer-col > summary::-webkit-details-marker { display: none; }
.pat-footer-chev {
  width: 14px; height: 14px;
  color: var(--navy-mute);
  transition: transform 200ms ease, color 160ms ease;
}
details.pat-footer-col[open] .pat-footer-chev { transform: rotate(180deg); color: var(--blue); }
.pat-footer-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pat-footer-col-body a {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  color: var(--navy-soft);
  text-decoration: none;
  transition: color 160ms ease;
}
.pat-footer-col-body a:hover { color: var(--blue); }

/* ---- Crisis column: plain text + links ---- */
.pat-footer-crisis-text {
  margin: 0 0 14px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy-soft);
  max-width: 345px;
  text-wrap: pretty;
}
.pat-footer-crisis-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pat-footer-crisis-links a {
  align-self: flex-start;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  color: var(--navy-soft);
  text-decoration: none;
  transition: color 160ms ease;
}
.pat-footer-crisis-links a:hover { color: var(--blue); }

/* ---- Right column ---- */
.pat-footer-meta {
  margin-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pat-footer-copy {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy-soft);
}
.pat-footer-copy .yr {
  color: var(--navy-mute);
  display: block;
  margin-top: 2px;
}
.pat-footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-soft);
}
.pat-footer-flag {
  width: 22px; height: 14px;
  border-radius: 2px;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(15, 27, 61, 0.06);
}
.pat-footer-flag span { flex: 1; }
.pat-footer-flag .b { background: #000; }
.pat-footer-flag .r { background: #DD0000; }
.pat-footer-flag .y { background: #FFCE00; }
.pat-footer-lang a {
  color: var(--navy-soft);
  text-decoration: none;
  transition: color 160ms ease;
}
.pat-footer-lang a:hover, .pat-footer-lang a.is-active { color: var(--navy); font-weight: 600; }
.pat-footer-lang .sep { color: var(--navy-mute); opacity: 0.55; }
.pat-footer-social {
  display: inline-flex;
  gap: 14px;
}
.pat-footer-social a {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--navy);
  transition: color 160ms ease, background 160ms ease;
}
.pat-footer-social a:hover { background: rgba(15, 27, 61, 0.06); color: var(--blue); }
.pat-footer-social svg { width: 16px; height: 16px; }

/* ---- Brand block: copyright + LinkedIn ---- */
.pat-footer-brand {
  border-top: 1px solid rgba(15, 27, 61, 0.08);
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* Footer collapse threshold. .pat-footer-inner has 40px padding per side, so
   the 3-column footer needs about 900px of content width to hold its columns;
   that is 980px of viewport (900 + 80 padding). Switching at 980/981 keeps
   true desktops (1280x720, 1366x768) on the desktop footer while wide-but-short
   landscape phones (for example 932x430, inner content about 852px) collapse to
   the mobile accordion. The same boundary drives --pat-footer-collapsed, which
   the inline footer script reads, so layout and open-state share one signal. */
@media (min-width: 981px) {
  details.pat-footer-col > summary { cursor: default; pointer-events: none; }
  details.pat-footer-col > summary .pat-footer-chev { display: none; }
}
@media (max-width: 980px) {
  .pat-footer-cols {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pat-footer-inner {
    --pat-footer-collapsed: 1;
    gap: 32px;
    padding-top: 44px;
  }
  .pat-footer-cap { top: -12px; }
  details.pat-footer-col {
    border-bottom: 1px solid rgba(15, 27, 61, 0.08);
  }
  details.pat-footer-col > summary {
    cursor: pointer;
    margin: 0;
    padding: 16px 2px;
  }
  .pat-footer-col-body { padding: 0 2px 18px; }
  .pat-footer-col--crisis { padding-top: 8px; }
  .pat-footer-col--crisis .pat-footer-col-h { margin-bottom: 12px; }
}
