/* Base */
input, select, textarea {width:100%; padding:.8rem .9rem; border:1px solid #ddd; border-radius:12px; font:inherit}
label{display:grid; gap:6px; font-weight:600}
h1,h2,h3{letter-spacing:-.015em}
h2{font-size:clamp(24px,2.6vw,36px); margin:.2em 0 .6em}
small{font-size:.85em}
.muted{color:#555}

/* Background texture and frosted cards */
body {
  background: url("assets/bg-texture.png") center top fixed no-repeat;
  background-size: cover;
}
.card, header.nav, footer {
  background-color: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
section .wrap { background: transparent; }

/* Footer grid */
footer .wrap a{color:#007bff;text-decoration:none}
footer .wrap a:hover{text-decoration:underline}
footer .wrap b{display:block;margin-bottom:8px}

/* Framed FAQ with plus toggles */
.faq-frame{background:rgba(255,255,255,.96); border:1px solid #e5eaf0; border-radius:16px; padding:12px}
.faq-item{border:1px solid #e9edf3; border-radius:12px; padding:0; margin:10px 0; background:#fbfcfe}
.faq-item summary{cursor:pointer; list-style:none; font-weight:700; padding:14px 16px; position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; position:absolute; right:14px; top:10px; font-size:22px; line-height:1}
.faq-item[open] summary::after{content:'–'}
.faq-item .faq-body{padding:0 16px 14px}

/* CTA bottom frame */
.cta-frame{background:linear-gradient(180deg, rgba(0,123,255,.06), rgba(0,123,255,.02)); border-top:1px solid #e5eaf0; border-bottom:1px solid #e5eaf0}
.cta-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:start}
.cta-frame b{display:block; margin-bottom:6px}
.cta-contact,.cta-info{background:rgba(255,255,255,.96); border:1px solid #e5eaf0; border-radius:14px; padding:12px}
.cta-frame ul{margin:0; padding-left:18px}
@media (max-width: 960px){
  .cta-grid{grid-template-columns:1fr}
}

/* Color fine-tuning: use logo blue for frames */
.faq-frame{background:#f8fbff; border:1px solid #cfe4ff;}
.faq-item{border:1px solid #d6e7ff; background:#fdfefe}
.faq-item summary::after{color:#007bff}
.cta-frame{background:linear-gradient(180deg, #f0f6ff, #f8fbff); border-top:1px solid #cfe4ff; border-bottom:1px solid #cfe4ff}

/* WhatsApp button */
.btn.whatsapp{background:#25D366; border-color:#25D366; color:#fff; margin-left:8px}
.btn.whatsapp:hover{background:#1ebe5d; border-color:#1ebe5d}

/* Header WhatsApp button */
header.nav .btn.whatsapp{background:#25D366; border-color:#25D366; color:#fff; display:inline-flex; align-items:center}
header.nav .btn.whatsapp:hover{background:#1ebe5d; border-color:#1ebe5d}

/* WhatsApp header button */
.btn.whatsapp{background:#25D366; border-color:#25D366; color:#fff}
.btn.whatsapp:hover{background:#1ebe5d; border-color:#1ebe5d}

/* Floating WhatsApp button (mobile) */
.fab-whatsapp{
  position:fixed; right:16px; bottom:18px; z-index:999;
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; box-shadow:0 10px 20px rgba(0,0,0,.18);
  border:1px solid #1ebe5d;
}
.fab-whatsapp:hover{background:#1ebe5d; border-color:#1ebe5d}
@media (min-width: 961px){
  .fab-whatsapp{display:none}
}

/* Subtle pulse animation for FAB */
@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); transform: scale(1); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); transform: scale(1); }
}
.fab-whatsapp{
  animation: fabPulse 2.4s ease-out infinite;
}

/* Pulse animation for floating WhatsApp button */
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(37,211,102,0.6); }
  70% { box-shadow:0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.fab-whatsapp{
  animation: pulse 2.5s infinite;
}

/* Compact header WhatsApp button */
header .btn.whatsapp{padding:6px 12px; font-size:0.9rem; display:inline-flex; align-items:center}
header .btn.whatsapp svg{flex-shrink:0}

/* Info-box above footer */
.info-box{background:#f0f6ff; border-top:1px solid #cfe4ff; padding:20px 0; text-align:center}
.info-box h3{margin-top:0; margin-bottom:8px; font-size:1.2rem; color:#003366}
.info-box a{color:#007bff; text-decoration:none; margin:0 8px}
.info-box a:hover{text-decoration:underline}

/* Contact + Map box */
.contact-map{background:#f8fbff; border-top:1px solid #cfe4ff; border-bottom:1px solid #cfe4ff; padding:20px 0}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.contact-details{background:rgba(255,255,255,.96); border:1px solid #cfe4ff; border-radius:14px; padding:16px; text-align:left}
.contact-map-frame iframe{width:100%; height:100%; min-height:240px}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr} .contact-map-frame{height:240px}}

/* Contact boxed section */
.contact-box{background:#f8fbff; border-top:1px solid #cfe4ff; border-bottom:1px solid #cfe4ff; padding:32px 0}
.contact-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:22px; align-items:start}
.contact-grid a{color:#007bff; text-decoration:none}
.contact-grid a:hover{text-decoration:underline}
@media (max-width: 960px){
  .contact-grid{grid-template-columns:1fr}
}

/* Style pictograms in info-box */
.info-box p{font-size:1rem}
.info-box p{color:#007bff}
.info-box p a{color:#007bff}

/* Contact box with only map */
.contact-map-only{text-align:center}
.contact-map-only h2{margin-bottom:16px; color:#003366}

/* Info-box grid */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; text-align:left}
.info-grid h3{color:#003366}
@media (max-width: 720px){
  .info-grid{grid-template-columns:1fr}
}

/* Center Terminwunsch button */
.terminwunsch{text-align:center; margin:16px 0}
.terminwunsch .btn{display:inline-block; margin:0 auto}


/* ===== Mobile optimizations (<=768px) ===== */
@media (max-width: 768px){
  /* Header */
  header.nav .wrap{padding:.4rem var(--pad); gap:10px}
  .brand img{height:28px}
  nav a{padding:.4rem .55rem}
  .terminwunsch{margin:10px 0}
  header .btn, header .btn.whatsapp{padding:6px 10px; font-size:.9rem}

  /* Hero */
  .hero{gap:16px; padding:24px var(--pad)}
  .hero h1{font-size:1.75rem; line-height:1.15}
  .pill{padding:.35rem .6rem; font-size:.85rem}
  .hero-card img{height:200px; border-radius:12px}

  /* Sections & cards */
  section{padding:36px var(--pad)}
  .card{padding:12px; border-radius:12px}
  .grid3{grid-template-columns:1fr; gap:14px}
  .two{grid-template-columns:1fr; gap:14px}
  .gallery img{height:120px; border-radius:10px}

  /* CTA frame */
  .cta-grid{grid-template-columns:1fr; gap:12px}
  .cta-frame .btn{width:100%; text-align:center; margin-bottom:8px}
  .cta-info ul{padding-left:16px}

  /* FAQ */
  .faq-frame{padding:8px}
  .faq-item{margin:8px 0}
  .faq-item summary{padding:12px 14px; font-size:1rem}
  .faq-item summary::after{right:12px; top:8px; font-size:20px}
  .faq-item .faq-body{padding:0 14px 12px}

  /* Contact map */
  .contact-box{padding:20px 0}
  .contact-map-only h2{font-size:1.2rem; margin-bottom:10px}

  /* Info box */
  .info-box{padding:16px 0}
  .info-grid{gap:16px}

  /* Footer */
  footer .wrap{padding:10px 0; font-size:.9rem}

  /* Sticky WhatsApp */
  .fab-whatsapp{width:46px; height:46px; right:12px; bottom:14px}
}



/* ===== Compact mobile menu + hamburger ===== */
.nav-toggle{display:none; background:transparent; border:0; width:36px; height:32px; align-items:center; justify-content:center; margin-left:8px}
.nav-toggle span{display:block; width:22px; height:2px; background:#222; margin:4px 0; transition:.2s}

@media (max-width: 768px){
  header .wrap{gap:8px}
  nav a{padding:.35rem .5rem; font-size:.92rem}
  .brand img{height:26px}
  .terminwunsch{margin:8px 0}
  .nav-toggle{display:inline-flex}

  /* Collapse nav into dropdown */
  #mainnav{display:none !important; position:fixed; top:56px; left:0; right:0; background:#fff; border-bottom:1px solid #e9e9e9; box-shadow:0 10px 20px rgba(0,0,0,.06); padding:10px var(--pad); gap:8px; flex-wrap:wrap; z-index:60}
  header.nav.open #mainnav{display:flex !important}
  header.nav.open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  header.nav.open .nav-toggle span:nth-child(2){opacity:0}
  header.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* Prevent body from shifting under dropdown */
  body.menu-open{overflow:hidden}
}