/* Druck und Zauber — Layout: Navigation (transluzentes Material), Footer, WhatsApp-Button */

/* ---------- Navigation ---------- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter); height: 64px;
}
/* Scroll-Edge: Haarlinie in Border-Mint, erst sichtbar wenn gescrollt (Guide: kein Verlauf) */
header.nav::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1px; pointer-events: none;
  background: var(--border); opacity: 0; transition: opacity var(--dur);
}
header.nav.is-scrolled::after { opacity: 1; }
@media (prefers-reduced-transparency: reduce) { header.nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.nav-logo img { height: 44px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
@media (max-width: 820px) { .nav-right { gap: 0.4rem; } }
.nav-links { display: flex; gap: 1.4rem; list-style: none; align-items: center; }
.nav-links a { color: var(--gray); text-decoration: none; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; transition: color 0.2s; padding: 0.4rem 0; }
@media (hover: hover) { .nav-links a:hover { color: var(--mint-text); } }
.nav-links a.is-current { color: var(--mint-text); }
.nav-links a.is-current { box-shadow: inset 0 -2px 0 var(--mint); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; }
.nav-toggle svg { width: 26px; height: 26px; stroke: var(--black); }
@media (max-width: 820px) {
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff;
    border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.28s var(--ease-out), visibility 0s linear 0.28s;
  }
  .nav-links.open { max-height: 70vh; visibility: visible; transition: max-height 0.28s var(--ease-out), visibility 0s; }
  .nav-links li { width: 100%; border-top: 1px solid var(--border); }
  .nav-links a { display: block; padding: 1rem var(--gutter); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.65); padding: 3rem var(--gutter); font-size: 0.82rem; line-height: 1.9; }
.footer-inner { max-width: var(--container); margin: 0 auto; text-align: center; display: grid; gap: 1rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; text-align: left; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-col { display: flex; flex-direction: column; gap: 0.15rem; }
@media (pointer: coarse) { .footer-col a { display: inline-flex; align-items: center; min-height: 44px; } }
.footer-col h2 { font-family: 'Nunito', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 0.5rem; }
.footer-col a { line-height: 1.7; }
.footer-muted { color: rgba(255,255,255,0.5); }
.footer-occasions { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } }
.site-footer a { color: var(--mint); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; } }
.site-footer .brand { color: var(--mint); font-weight: 700; }
.footer-sign { font-family: 'Sacramento', cursive; font-size: 1.4rem; color: var(--mint); }
.footer-legal { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; font-weight: 700; letter-spacing: 0.04em; }
.footer-copy { color: rgba(255,255,255,0.62); }

/* ---------- WhatsApp-FAB (Mint Deep, markenkonform) ---------- */
.wa-fab {
  position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 900;
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.15rem;
  background: var(--mint-deep); color: #fff; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(47, 98, 83, 0.30);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), background var(--dur);
}
@media (hover: hover) { .wa-fab:hover { background: var(--mint-deep-hover); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(47, 98, 83, 0.36); } }
.wa-fab:active { transform: scale(0.96); }
.wa-fab svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.wa-fab-label { white-space: nowrap; }
@media (max-width: 560px) { .wa-fab { padding: 0.8rem; } .wa-fab-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-fab, header.nav::after, .nav-links { transition: none; } }

/* ---------- Seitenkopf für Unterseiten ---------- */
.page-head { padding: 9rem var(--gutter) 2rem; }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.page-body { padding: 1rem var(--gutter) 5rem; }