/* ============================================================
   SUBPAGE SHARED CSS
   Loaded by kakao.html, eltern.html, kosmetik.html.
   Contains reset, design tokens, buttons, label, navigation,
   drawer, pricing table + book-btn variants, online-buchen
   Cal-inline-embed section, and page-footer.
   Page-specific content styles (hero/main section per subpage)
   stay inline in each HTML file.
============================================================ */

/* ── RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-surface:        #FAF6F1;
  --color-surface-alt:    #F0E8DF;
  --color-surface-deep:   #E8DDD4;
  --color-accent:         #C4957A;
  --color-accent-dark:    #A67A62;
  --color-accent-rgb:     196, 149, 122;
  --color-deep:           #3E2A1E;
  --color-text:           #4A3728;
  --color-text-muted:     #735848;
  --color-text-inverse:   #FAF6F1;
  --color-cream:          #F5EFE6;
  --color-cream-rgb:      245, 239, 230;
  --color-cream-dark:     #E8DDD4;
  --font-display:         'Cormorant Garamond', Georgia, serif;
  --font-body:            'Jost', 'Helvetica Neue', Arial, sans-serif;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   clamp(28px, 5vw, 48px);
  --radius-card:  16px;
  --radius-btn:   4px;
  --radius-sm:    2px;
  --shadow-md:    0 4px 14px rgba(62, 42, 30, 0.1), 0 2px 4px rgba(62, 42, 30, 0.06);
  --shadow-lg:    0 10px 28px rgba(62, 42, 30, 0.13), 0 4px 10px rgba(62, 42, 30, 0.07);
  --shadow-nav:   0 2px 12px rgba(62, 42, 30, 0.09);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-base:     220ms;
  --max-width:    1200px;
  --section-py:   80px;
  --section-px:   20px;
}

@media (max-width: 767px) {
  :root { --section-py: 48px; }
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-surface);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
    /* ── BUTTONS ────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 28px;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-radius: var(--radius-btn);
      border: none;
      cursor: pointer;
      touch-action: manipulation;
      transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform 120ms var(--ease-out);
    }

    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0) scale(0.98); }

    .btn--primary {
      background: var(--color-accent);
      color: var(--color-deep);
      box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.35);
    }

    .btn--primary:hover {
      background: var(--color-accent-dark);
      box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.45);
    }

    /* ── LABEL ──────────────────────────────────────────────── */
    .label {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    /* ── NAVIGATION ─────────────────────────────────────── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 12px 0;
      background: var(--color-surface);
      box-shadow: var(--shadow-nav);
    }
    .nav__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .nav__logo {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--color-deep);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .nav__logo:hover { color: var(--color-accent); }
    .nav__links {
      display: none;
      gap: 32px;
      align-items: center;
    }
    .nav__links a {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      padding: 12px 0;
      display: inline-block;
    }
    .nav__links a:hover { color: var(--color-accent); }
    .nav__links a[aria-current="page"] {
      color: var(--color-accent);
      text-decoration: underline;
      text-decoration-color: var(--color-accent);
      text-underline-offset: 5px;
      text-decoration-thickness: 1.5px;
    }
    .nav__cta { display: none; }
    .nav__hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 10px;
      background: none;
      border: none;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }
    .nav__hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--color-deep);
      transition: transform 220ms ease, opacity 220ms ease;
      transform-origin: center;
    }
    .nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .nav__drawer {
      display: none;
      position: fixed;
      top: 72px; left: 0; right: 0; bottom: 0;
      background: var(--color-surface);
      z-index: 2500;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 24px 20px 32px;
      overflow-y: auto;
    }
    .nav__drawer.open { display: flex; }
    .nav__drawer ul {
      padding: 0;
      margin: 0;
      gap: 20px !important;
    }
    .nav__drawer a {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 400;
      line-height: 1.2;
      color: var(--color-deep);
      letter-spacing: 0.04em;
    }
    .nav__drawer a:hover,
    .nav__drawer a[aria-current="page"] { color: var(--color-accent); }
    .nav__drawer .btn {
      margin-top: 16px;
      max-width: min(80vw, 320px);
      width: auto;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    body.drawer-open .sticky-cta,
    body.drawer-open .whatsapp-fab,
    body.drawer-open #scroll-progress,
    body.drawer-open #scroll-top-btn,
    body.drawer-open .nav__hamburger {
      display: none !important;
    }
    body.drawer-open .nav {
      background: var(--color-surface);
    }
    body.drawer-open .nav__logo {
      color: var(--color-deep);
    }
    .nav__drawer__close {
      position: fixed;
      top: 20px;
      right: 24px;
      z-index: 2600;
      background: none;
      border: none;
      font-size: 28px;
      color: var(--color-text-muted);
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (min-width: 900px) {
      .nav__links { display: flex; }
      .nav__cta { display: inline-flex; align-items: center; }
      .nav__hamburger { display: none; }
    }


    /* ── PRICING TABLE (brief) ──────────────────────────────── */
    .pricing-mini {
      margin-top: 64px;
      padding: var(--section-py) var(--section-px);
      background: var(--color-surface-alt);
    }

    .pricing-mini__inner {
      max-width: 720px;
      margin: 0 auto;
    }

    .pricing-mini__title {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 400;
      color: var(--color-deep);
      margin-bottom: 8px;
    }

    .pricing-mini__subtitle {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      margin-bottom: 28px;
    }

    .pricing__table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-sm);
    }

    .pricing__table thead tr {
      border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.25);
    }

    .pricing__table th {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      padding: 10px 12px 10px 0;
      text-align: left;
    }

    .pricing__table td {
      padding: 14px 12px 14px 0;
      color: var(--color-text);
      border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.1);
      vertical-align: top;
    }

    .pricing__table .pricing__price-cell {
      text-align: right;
      vertical-align: middle;
      padding-left: 14px;
      width: 1%;
      white-space: nowrap;
    }
    .pricing__book-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 16px;
      background: var(--color-accent);
      color: var(--color-deep);
      border: 1px solid var(--color-accent);
      border-radius: var(--radius-btn);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-decoration: none;
      white-space: nowrap;
      touch-action: manipulation;
      transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    }
    .pricing__book-btn:hover,
    .pricing__book-btn:focus-visible {
      background: var(--color-accent-dark);
      border-color: var(--color-accent-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3);
    }
    .pricing__book-btn:active {
      transform: scale(0.97);
      opacity: 0.88;
      box-shadow: none;
    }
    .pricing__book-btn__icon { flex-shrink: 0; opacity: 0.9; }
    .pricing__book-btn__price { font-variant-numeric: tabular-nums; }
    .pricing__book-btn__arrow {
      font-size: 14px;
      line-height: 1;
      opacity: 0.85;
      transition: transform 0.22s ease;
    }
    .pricing__book-btn:hover .pricing__book-btn__arrow { transform: translateX(2px); }
    .pricing__book-btn--secondary {
      background: transparent;
      color: var(--color-deep);
    }
    .pricing__book-btn--secondary:hover,
    .pricing__book-btn--secondary:focus-visible {
      background: var(--color-accent);
      color: var(--color-deep);
    }
    @media (max-width: 767px) {
      .pricing__table th:nth-child(2),
      .pricing__table td:nth-child(2) { display: none; }
      .pricing__table .pricing__price-cell { padding-left: 8px; }
      .pricing__book-btn {
        padding: 8px 12px;
        font-size: var(--text-xs);
        gap: 6px;
      }
    }

    /* ── ONLINE BUCHEN (Cal-Inline-Embed) ─────────────────── */
    .online-buchen {
      background-color: var(--color-surface);
      padding: 80px 24px;
    }
    .online-buchen__inner {
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
    }
    .online-buchen__title {
      font-size: clamp(28px, 4vw, 40px);
      color: var(--color-deep);
      margin: 8px 0 12px;
      line-height: 1.2;
    }
    .online-buchen__subtitle {
      color: var(--color-text);
      max-width: 560px;
      margin: 0 auto 40px;
      line-height: 1.6;
    }
    #cal-inline {
      min-height: 640px;
      width: 100%;
      background-color: var(--color-surface);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: none;
    }
    @media (max-width: 600px) {
      .online-buchen { padding: 56px 16px; }
      #cal-inline { min-height: 580px; }
    }

    /* ── FOOTER ─────────────────────────────────────────────── */
    .page-footer {
      background: var(--color-deep);
      padding: 40px 24px;
      text-align: center;
    }

    .page-footer__brand {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      color: var(--color-cream);
      letter-spacing: 0.04em;
      margin-bottom: 16px;
    }

    .page-footer__links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .page-footer__links a {
      font-size: var(--text-sm);
      color: rgba(var(--color-cream-rgb), 0.65);
      transition: color var(--dur-base) var(--ease-out);
    }

    .page-footer__links a:hover { color: var(--color-accent); }

    .page-footer__copy {
      font-size: 12px;
      color: rgba(var(--color-cream-rgb), 0.4);
    }