/* ==========================================================================
   MassihPsychology — Zentrales Stylesheet
   Diese Datei wird von allen Seiten geladen (index, kontakt, impressum,
   datenschutz). Änderungen hier wirken sich überall aus.

   Schriften laut Markenkompass:
     Cinzel     → Headlines (H1, H2)
     Montserrat → Fließtext, Buttons, Labels, Navigation
   ========================================================================== */

/* ---------- 1. Design-Tokens (Farben, Schriften, Größen) ---------- */
:root{
  /* Farben */
  --primary:#FFCF5A;      /* Sonnengelb, Markenfarbe */
  --secondary:#FBE19F;    /* Hellgelb */
  --accent:#FFB020;       /* Warmes Orange, Akzente & Buttons */
  --bg:#FFFBF2;           /* Off White, Hintergrund */
  --card:#FFFFFF;         /* Karten */
  --text:#1F1F1F;         /* Fast Schwarz, Haupttext */
  --muted:#6B6255;        /* Warmes Grau, Sekundärtext */
  --btn:#FFB020;
  --btn-hover:#E89600;
  --btn-text:#1F1F1F;
  --whatsapp:#25D366;     /* Offizielles WhatsApp-Grün */
  --error:#B3261E;

  /* Schriftfamilien */
  --font-display:'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body:'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Typo-Skala — jede Größe wird nur hier definiert */
  --fs-h1:clamp(2.4rem, 5.2vw, 3.8rem);
  --fs-h2:clamp(1.8rem, 3.6vw, 2.6rem);
  --fs-h2-klein:clamp(1.4rem, 2.4vw, 1.8rem);  /* H2 in Karten & Spalten */
  --fs-h3:clamp(1.15rem, 2vw, 1.35rem);
  --fs-lead:clamp(1.1rem, 2.2vw, 1.3rem);   /* Einleitungs-/Zitattext */
  --fs-body:1rem;                            /* Standard-Fließtext */
  --fs-small:.88rem;                         /* Hinweise, Footer */
  --fs-eyebrow:.74rem;                       /* Kleine Label über Headlines */

  /* Abstände */
  --space-section:96px;
  --space-section-mobile:64px;
}

/* ---------- 2. Reset & Grundlagen ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{background:var(--bg);}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--primary);color:var(--text);}
img{max-width:100%;}

/* ---------- 3. Typografie-Hierarchie (SEO-relevant) ---------- */
h1{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.005em;
}
h2{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:400;
  line-height:1.25;
}
h3{
  font-family:var(--font-body);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.4;
}
p{font-size:var(--fs-body);}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.55;}
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.small{font-size:var(--fs-small);color:var(--muted);}
a{color:inherit;}

/* ---------- 4. Layout-Container ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.narrow{max-width:780px;margin:0 auto;padding:0 28px;}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  background:var(--btn);
  color:var(--btn-text);
  padding:16px 34px;
  border-radius:50px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{background:var(--btn-hover);transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--text);outline-offset:3px;}

/* ---------- 6. Navigation ---------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,251,242,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(31,31,31,.06);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px;}
.site-nav .logo-link{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.site-nav .logo-link img{height:56px;width:auto;display:block;}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-link{
  font-family:var(--font-body);font-size:.85rem;font-weight:600;
  color:var(--text);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .25s ease;
}
.nav-link:hover{border-bottom-color:var(--btn-hover);}

/* WhatsApp-Button: gelb, beim Hover offizielles WhatsApp-Grün */
.whatsapp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--btn);color:var(--btn-text);
  flex:0 0 auto;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.whatsapp-btn svg{width:23px;height:23px;display:block;}
.whatsapp-btn:hover{background:var(--whatsapp);color:#FFFFFF;transform:translateY(-2px);}
.whatsapp-btn:focus-visible{outline:3px solid var(--text);outline-offset:3px;}

@media (max-width:640px){
  .site-nav .logo-link img{height:46px;}
  .nav-link{display:none;}
  .whatsapp-btn{width:42px;height:42px;}
  .whatsapp-btn svg{width:21px;height:21px;}
}

/* ---------- 7. Formular (Modal + Unterseite) ---------- */
.form-fields{display:flex;flex-direction:column;gap:18px;text-align:left;}
.field label{
  display:block;
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;
  color:var(--muted);margin-bottom:6px;
}
.field input, .field textarea{
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--text);
  background:var(--card);border:1px solid rgba(31,31,31,.18);border-radius:14px;
  padding:14px 17px;width:100%;resize:vertical;line-height:1.5;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.field textarea{min-height:140px;}
.hp-field{position:absolute!important;left:-9999px!important;}
.form-note{font-size:var(--fs-small);color:var(--muted);margin-top:16px;}
.form-status{
  padding:24px;border-radius:16px;background:var(--card);
  font-family:var(--font-body);font-size:var(--fs-body);
}
.form-status.is-error{color:var(--error);}
.form-submit{align-self:flex-start;margin-top:4px;}

/* ---------- 8. Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.modal.is-open{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(31,31,31,.55);backdrop-filter:blur(3px);}
.modal-panel{
  position:relative;z-index:1;background:var(--bg);border-radius:24px;
  max-width:580px;width:100%;max-height:90vh;overflow-y:auto;
  padding:44px 40px 40px;
  box-shadow:0 40px 90px -30px rgba(31,31,31,.6);
  animation:modal-in .3s ease;
}
@keyframes modal-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--secondary);color:var(--text);
  font-family:var(--font-body);font-size:1.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.modal-close:hover{background:var(--primary);}
.modal-panel .eyebrow{color:var(--btn-hover);}
.modal-panel h2{margin:12px 0 10px;}
.modal-panel .lead{margin-bottom:28px;color:var(--muted);}
@media (max-width:520px){.modal-panel{padding:38px 24px 30px;}}

/* ---------- 9. Footer ---------- */
.site-footer{background:var(--card);border-top:1px solid rgba(31,31,31,.08);}
.footer-top{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:30px 0 24px;border-bottom:1px solid rgba(31,31,31,.08);
}
.footer-top img{height:38px;width:auto;display:block;opacity:.9;}
.social-links{display:flex;gap:14px;}
.social-links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--secondary);color:var(--text);
  transition:background .25s ease, transform .25s ease;
}
.social-links a:hover{background:var(--primary);transform:translateY(-2px);}
.social-links a:focus-visible{outline:3px solid var(--text);outline-offset:3px;}
.social-links svg{width:19px;height:19px;}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  padding:20px 0;
}
.footer-bottom p, .footer-bottom a{font-size:var(--fs-small);color:var(--muted);}
.legal-links{display:flex;gap:20px;}
.legal-links a{text-decoration:none;}
.legal-links a:hover{color:var(--text);text-decoration:underline;}
@media (max-width:560px){
  .footer-top, .footer-bottom{flex-direction:column;text-align:center;justify-content:center;}
}

/* ---------- 10. Rechtstexte (Impressum & Datenschutz) ---------- */
.legal-page{padding:70px 0 90px;}
.legal-page h1{margin-bottom:10px;}
.legal-page h2{font-size:var(--fs-h2-klein);margin:40px 0 12px;}
.legal-page h3{margin:24px 0 8px;}
.legal-page p{margin-bottom:12px;}
.legal-page .stand{margin-top:40px;font-size:var(--fs-small);color:var(--muted);}
.legal-page .angaben{
  margin:28px 0 8px;
  display:grid;grid-template-columns:minmax(210px,auto) 1fr;gap:2px 32px;
}
.legal-page .angaben dt{
  font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;
  color:var(--muted);padding:12px 0;
  border-top:1px solid rgba(31,31,31,.09);
}
.legal-page .angaben dd{
  font-size:var(--fs-body);color:var(--text);padding:12px 0;
  border-top:1px solid rgba(31,31,31,.09);
}
.legal-page .angaben dt:first-of-type,
.legal-page .angaben dd:first-of-type{border-top:none;}
@media (max-width:640px){
  .legal-page .angaben{grid-template-columns:1fr;gap:0;}
  .legal-page .angaben dt{padding:14px 0 2px;}
  .legal-page .angaben dd{padding:0 0 14px;border-top:none;}
}

.back-link{
  font-family:var(--font-body);font-size:.85rem;font-weight:600;
  color:var(--text);text-decoration:none;
  border-bottom:2px solid var(--btn-hover);padding-bottom:2px;
}
.back-link:hover{color:var(--btn-hover);}

/* ---------- 11. Scroll-Animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .modal-panel{animation:none;}
}