/* Gemeinsame Kopf-/Fusszeile (Startseite + Blog) — 1:1 aus divine.php. */

  .nav-toggle { display: none; }

  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 0 clamp(20px, 4vw, 40px);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
  }
  .nav-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 0;
    transition: padding .5s cubic-bezier(.4,0,.2,1);
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links a {
    position: relative;
    text-decoration: none;
    padding: 6px 0;
    line-height: 1;
    white-space: nowrap;
    font-family: "Fira Sans Light", sans-serif;
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,.3);
    transition: color .45s ease, text-shadow .45s ease;
  }
  .nav-links a:hover { color: rgba(255,255,255,0.78); }
  .nav-left  { grid-column: 1; justify-self: end;   padding-right: clamp(24px, 4.4vw, 64px); }
  .nav-right { grid-column: 3; justify-self: start; padding-left:  clamp(24px, 4.4vw, 64px); }

  .brand {
    grid-column: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    text-decoration: none;
  }
  .brand::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    height: 88%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.32), rgba(255,255,255,0) 68%);
    filter: blur(9px);
    transition: opacity .45s ease;
    pointer-events: none;
  }
  .brand #js-logo {
    position: relative;
    height: clamp(112px, 12vw, 175px);
    width: auto;
    max-width: none;
    display: block;
    margin-bottom: -6px;
    cursor: pointer;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.45));
    opacity: 1;
    transition:
      height .5s cubic-bezier(.4,0,.2,1),
      filter .45s ease,
      opacity .45s ease;
  }

  .cart-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color .45s ease;
  }
  .cart-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    filter: drop-shadow(0 1px 8px rgba(0,0,0,.3));
    transition: filter .45s ease;
  }
  .cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #fff;
    color: var(--ink);
    font-family: "Fira Sans Light", sans-serif;
    font-size: 9px;
    line-height: 1;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
  }
  .cart-count.is-empty { display: none; }
  .burger { display: none; }

  /* ----- gescrollt ----- */
  .topbar.is-scrolled {
    background: rgb(251 250 246 / 93%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hair-soft);
    box-shadow: 0 10px 30px -22px rgba(31, 31, 28, .5);
  }
  .topbar.is-scrolled .nav-inner { padding-top: 11px; padding-bottom: 11px; }
  .topbar.is-scrolled .nav-links a,
  .topbar.is-scrolled .cart-icon { color: var(--ink); text-shadow: none; }
  .topbar.is-scrolled .cart-icon svg { filter: none; }
  .topbar.is-scrolled .cart-count { background: var(--ink); color: var(--bg-card); }
  .topbar.is-scrolled .brand::before { opacity: 0; }
  .topbar.is-scrolled .brand #js-logo { height: 75px; filter: none; opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .topbar, .nav-inner, .brand #js-logo, .brand::before, .cart-icon, .cart-icon svg, .burger span {
      transition-duration: .001s;
    }
  }

  /* ----- mobil: Burger + Dropdown ----- */
  .mobile-menu { display: none; }
  @media (max-width: 720px) {
    .nav-inner {
      grid-template-columns: auto 1fr auto;
      column-gap: 14px;
      padding: 14px 0;
    }
    .topbar.is-scrolled .nav-inner { padding-top: 10px; padding-bottom: 10px; }
    .nav-left, .nav-right { display: none; }
    .brand { grid-column: 1; justify-self: start; }
    .brand::before { display: none; }
    .brand #js-logo { height: 80px; }
    .topbar.is-scrolled .brand #js-logo { height: 60px; filter: none; }

    .cart-icon {
      position: relative;
      top: 0;
      transform: none;
      grid-column: 2;
      justify-self: end;
    }
    .burger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      grid-column: 3;
      justify-self: end;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
    }
    .burger span {
      display: block;
      width: 22px;
      height: 2px;
      background: #fff;
      transition: background .45s ease;
    }
    .topbar.is-scrolled .burger span { background: var(--ink); }

    /* Opened mobile menu adopts the scrolled (light) look regardless of scroll position */
    .nav-toggle:checked ~ .topbar {
      background: rgb(251 250 246 / 93%);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--hair-soft);
      box-shadow: 0 10px 30px -22px rgba(31, 31, 28, .5);
    }
    .nav-toggle:checked ~ .topbar .nav-links a,
    .nav-toggle:checked ~ .topbar .cart-icon { color: var(--ink); text-shadow: none; }
    .nav-toggle:checked ~ .topbar .cart-icon svg { filter: none; }
    .nav-toggle:checked ~ .topbar .cart-count { background: var(--ink); color: var(--bg-card); }
    .nav-toggle:checked ~ .topbar .brand::before { opacity: 0; }
    .nav-toggle:checked ~ .topbar .brand #js-logo { filter: none; opacity: 1; }
    .nav-toggle:checked ~ .topbar .burger span { background: var(--ink); }

    .mobile-menu {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      padding: 0 24px;
      transition: max-height .4s ease, opacity .3s ease, padding .4s ease;
    }
    .nav-toggle:checked ~ .topbar .mobile-menu {
      max-height: 280px;
      opacity: 1;
      padding: 8px 24px 18px;
    }
    .mobile-menu a {
      text-decoration: none;
      color: var(--ink);
      font-family: "Fira Sans Light", sans-serif;
      font-size: 12px;
      letter-spacing: .3em;
      text-transform: uppercase;
      padding: 12px 0;
      border-bottom: 1px solid var(--hair-soft);
    }
    .mobile-menu a:last-child { border-bottom: 0; }
  }

  footer.site-footer {
    position: relative;
    padding: 60px 56px;
    text-align: center;
    background: var(--bg-card);
    border-top: 1px solid var(--hair-soft);
  }
  footer.site-footer .eyebrow {
    font-family: "Fira Sans Light", sans-serif;
    font-size: 11px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 22px;
  }
  footer.site-footer .ornament {
    width: 56px;
    height: 1px;
    background: var(--ink);
    opacity: 0.55;
    margin: 0 auto 28px;
  }
  footer.site-footer h2 {
    font-family: "Stigsa Display", serif;
    font-weight: 400;
    font-size: clamp(48px, 7vw, 86px);
    line-height: 1.02;
    letter-spacing: 0.005em;
    margin: 0 0 36px;
    color: var(--ink);
  }
  footer.site-footer h2 em {
    font-family: "Stigsa Display", serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.25em;
    letter-spacing: 0.005em;
    color: var(--ink);
    display: inline-block;
    transform: translateY(0.08em);
  }
  footer.site-footer .email {
    display: inline-block;
    font-family: "Stigsa Display", serif;
    font-weight: 400;
    font-size: clamp(14px, 2.4vw, 20px);
    letter-spacing: 0.04em;
    color: var(--ink);
    text-decoration: none;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--ink);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  footer.site-footer .email:hover {
    opacity: 0.7;
    transform: translateY(-1px);
  }
  footer.site-footer .lede {
    font-family: "Fira Sans Light", sans-serif;
    font-size: 12px;
    line-height: 1.85;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0 auto 40px;
  }
  footer.site-footer .meta {
    margin-top: 80px;
    padding-top: 28px;
    border-top: 1px solid var(--hair-soft);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    font-family: "Fira Sans Light", sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  footer.site-footer .meta .copy { text-align: left; }
  footer.site-footer .meta .copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  footer.site-footer .meta .made { text-align: right; letter-spacing: 0.2em; }
  footer.site-footer .meta .socials {
    display: flex;
    gap: 16px;
    justify-content: center;
    color: var(--ink);
  }
  footer.site-footer .meta .socials a { color: inherit; }
  footer.site-footer .meta .socials svg { display: block; width: 14px; height: 14px; }

@media (max-width: 720px) {
  footer.site-footer { padding: 64px 24px 36px; }
  footer.site-footer .meta { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  footer.site-footer .meta .copy,
  footer.site-footer .meta .made { text-align: center; }
}

/* Blog: fixe Kopfzeile freistellen (kein Hero wie auf der Startseite). */
body.bl { padding-top: 104px; }
@media (max-width: 720px) { body.bl { padding-top: 88px; } }