/*
Theme Name:  eMotion Muse
Theme URI:   https://www.emotion-muse.de
Author:      Natalie Pichler
Description: eMotion Muse – alle Inhalte im WordPress-Editor bearbeitbar.
Version:     4.0.0
Text Domain: emotion-muse
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:  #1a1a1a;
  --white:  #ffffff;
  --cream:  #f7f5f2;
  --grey:   #888;
  --light:  #ebebeb;
  --accent: #c8a96e;
  --overlay:rgba(0,0,0,0.52);
  --font-h: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --gutter: 6vw;
  --max:    1300px;
  --nav-h:  68px;
  --trans:  0.25s ease;
}
@media (min-width: 768px) {
  :root { --gutter: 4vw; --nav-h: 76px; }
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; transition: opacity var(--trans); }
a:hover { opacity: 0.7; }
ul, ol { list-style: none; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family: var(--font-h); font-weight: 300; line-height: 1.2; letter-spacing: 0.03em; }
h1 { font-size: clamp(2.2rem,7vw,4.5rem); margin-bottom: 0.4em; }
h2 { font-size: clamp(1.6rem,4vw,3rem);   margin-bottom: 0.4em; }
h3 { font-size: clamp(1.2rem,3vw,2rem);   margin-bottom: 0.4em; }
h4 { font-size: clamp(1rem,2vw,1.4rem);   margin-bottom: 0.3em; }
p  { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.2em;
  margin: 1.5em 0;
  font-family: var(--font-h);
  font-style: italic;
  color: rgba(255,255,255,0.6);
}
hr { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 2.5em 0; }

/* ── LAYOUT ── */
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.section { padding: clamp(3rem,8vw,6rem) 0; }

/* ── HERO BG ── */
.hero-bg-fixed {
  position: fixed; inset: 0;
  background-image: url('https://emotion-muse.de/wp-content/uploads/2026/04/nph-muse-header-natalie.webp');
  background-size: cover; background-position: 64% 50%;
  z-index: -1;
}
.hero-bg-fixed::after { content:''; position:absolute; inset:0; background:var(--overlay); }

/* ── NAV ── */
.site-nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--trans);
}
.site-nav.scrolled { background: rgba(26,26,26,0.96); backdrop-filter: blur(8px); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
.nav-logo a { display:flex; align-items:center; text-decoration:none; }
.nav-logo img,
.nav-logo .custom-logo { height:38px; width:auto; max-width:160px; filter:brightness(0) invert(1); transition:opacity .2s; }
.nav-logo .custom-logo:hover { opacity:.8; }
.nav-logo-text { font-family:var(--font-h); font-size:1.1rem; letter-spacing:.12em; color:var(--white); text-transform:uppercase; }
.nav-links { display:none; gap:2.5rem; }
@media (min-width:768px) { .nav-links { display:flex; align-items:center; } }
.nav-links a {
  font-size:0.78rem; letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(255,255,255,0.8); position:relative; padding-bottom:2px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--white); transform:scaleX(0); transition:transform var(--trans);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }
.nav-links a:hover { color:var(--white); opacity:1; }

.burger {
  display:flex; flex-direction:column; justify-content:space-between;
  width:26px; height:16px; background:none; border:none; cursor:pointer; padding:0;
}
.burger span { display:block; height:1.5px; background:var(--white); transition:all var(--trans); }
.burger.open span:nth-child(1) { transform:translateY(7.25px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7.25px) rotate(-45deg); }
@media (min-width:768px) { .burger { display:none; } }

.mobile-nav {
  display:none; position:fixed; inset:0; z-index:99;
  background:var(--black); flex-direction:column;
  align-items:center; justify-content:center; gap:2rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:var(--font-h); font-size:clamp(2rem,8vw,3.5rem); color:var(--white); }
.mobile-nav a:hover { opacity:0.5; }

/* ── STARTSEITE HERO ── */
.home-hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-h) + 2rem) 2rem 2rem;
}
.home-hero .content { position:relative; z-index:2; max-width:620px; width:100%; }
.home-hero .logo { margin-bottom:2rem; }
.home-hero .logo img { height:60px; width:auto; filter:brightness(0) invert(1); margin:0 auto; }
.home-hero h1 { color:var(--white); margin-bottom:0.2em; }
.home-hero .roles {
  font-size:clamp(0.75rem,2vw,0.9rem); letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); margin-bottom:2.5rem;
}
.home-hero .divider { width:40px; height:1px; background:rgba(255,255,255,0.35); margin:0 auto 2.5rem; }

/* Tab Buttons */
.tab-buttons { display:flex; justify-content:center; gap:0; position:relative; z-index:2; }
.tab-btn {
  font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.2); padding:0.85em 2em;
  cursor:pointer; transition:all var(--trans); font-family:var(--font-b);
}
.tab-btn:first-child { border-right:none; }
.tab-btn:hover, .tab-btn.active {
  background:rgba(255,255,255,0.15); color:var(--white); border-color:rgba(255,255,255,0.5);
}

/* ── TAB INHALTE ── */
.tab-content { position:relative; z-index:2; width:100%; max-width:800px; margin:0 auto; padding:0 var(--gutter); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── SEITEN-WRAPPER ── */
.page-wrap {
  position:relative; min-height:100svh;
  padding:calc(var(--nav-h) + 3rem) var(--gutter) 5rem;
  background: var(--black);
  z-index: 1;
}
.page-content { position:relative; z-index:2; max-width:800px; margin:0 auto; color:rgba(255,255,255,0.85); }
.page-content h1 { color:var(--white); margin-bottom:0.3em; }
.page-content h2 { color:var(--white); font-size:clamp(1rem,3vw,1.5rem); margin:2rem 0 0.5em; }
.page-content h3 { color:var(--white); font-size:clamp(0.95rem,2.5vw,1.3rem); margin:1.5rem 0 0.4em; }
.page-content p  { color:rgba(255,255,255,0.8); margin-bottom:0.9em; }
.page-content a  { color:var(--accent); border-bottom:1px solid rgba(200,169,110,0.4); }
.page-intro { margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.1); }
.page-content a:hover { opacity:0.8; }
.page-content ul, .page-content ol { padding-left:1.3em; margin:0.8em 0; }
.page-content ul { list-style:disc; }
.page-content ol { list-style:decimal; }
.page-content li { margin-bottom:0.3em; color:rgba(255,255,255,0.75); }
.page-content strong { color:var(--white); }
.page-content .subtitle {
  font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.45); margin-bottom:2rem;
}
.page-content .divider { width:40px; height:1px; background:rgba(255,255,255,0.2); margin-bottom:2.5rem; }

/* ── GUTENBERG CONTENT STYLING ── */
/* Tabellen im Editor */
.page-content table { width:100%; border-collapse:collapse; margin:1.5em 0; }
.page-content table td, .page-content table th {
  padding:0.6em 1em; border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.8); font-size:0.9rem;
}
.page-content table th { color:var(--white); background:rgba(255,255,255,0.06); }

/* WP Block Styles */
.wp-block-separator { border:none; border-top:1px solid rgba(255,255,255,0.12); margin:2em 0; }
.wp-block-quote { border-left:2px solid var(--accent); padding-left:1.2em; margin:1.5em 0; font-style:italic; color:rgba(255,255,255,0.6); }
.wp-block-image { margin:1.5em 0; }
.wp-block-image img { width:100%; height:auto; }
.wp-block-columns { display:grid; grid-template-columns:1fr; gap:2rem; margin:1.5em 0; }
@media (min-width:600px) { .wp-block-columns { grid-template-columns:1fr 1fr; } }
.wp-block-button__link {
  display:inline-block; padding:0.9em 2.2em; font-size:0.78rem;
  letter-spacing:0.15em; text-transform:uppercase; font-family:var(--font-b);
  background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.4);
  transition:all var(--trans); text-decoration:none;
}
.wp-block-button__link:hover { background:rgba(255,255,255,0.1); border-color:var(--white); opacity:1; }

/* ── EVENT DROPDOWNS ── */
.event-list { margin:1.5rem 0; }
.event-item { border:1px solid rgba(255,255,255,0.15); margin-bottom:0.8rem; overflow:hidden; }
.event-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2em 1.5em; cursor:pointer; background:rgba(255,255,255,0.04);
  transition:background var(--trans); gap:1rem;
}
.event-header:hover { background:rgba(255,255,255,0.08); }
.event-header-left { flex:1; text-align:left; }
.event-date { font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); margin-bottom:0.2em; }
.event-title { font-family:var(--font-h); font-size:clamp(1rem,3vw,1.4rem); color:var(--white); font-weight:300; }
.event-meta { font-size:0.75rem; color:rgba(255,255,255,0.5); }
.event-toggle {
  width:28px; height:28px; border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--white); font-size:1.2rem; font-weight:300; line-height:1;
}
.event-body {
  display:none; padding:1.5em; border-top:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.2); color:rgba(255,255,255,0.8); font-size:0.95rem; line-height:1.8;
}
.event-body p { color:rgba(255,255,255,0.8); margin-bottom:0.8em; }
.event-body ul { list-style:disc; padding-left:1.3em; margin:0.8em 0; }
.event-body li { margin-bottom:0.3em; }
.event-body strong { color:var(--white); }
.event-item.open .event-body { display:block; }
.event-price {
  display:inline-block; margin-top:1em; padding:0.4em 1em;
  border:1px solid var(--accent); color:var(--accent); font-size:0.85rem; letter-spacing:0.08em;
}

/* Project dropdowns */
.project-item { border:1px solid rgba(255,255,255,0.15); margin-bottom:0.8rem; overflow:hidden; }
.project-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2em 1.5em; cursor:pointer; background:rgba(255,255,255,0.04);
  transition:background var(--trans); gap:1rem;
}
.project-header:hover { background:rgba(255,255,255,0.08); }
.project-title { font-family:var(--font-h); font-size:clamp(1rem,3vw,1.5rem); color:var(--white); font-weight:300; text-align:left; }
.project-body {
  display:none; padding:1.5em; border-top:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.2); color:rgba(255,255,255,0.8); font-size:0.95rem; line-height:1.8;
}
.project-body p { color:rgba(255,255,255,0.8); margin-bottom:0.8em; }
.project-item.open .project-body { display:block; }
.show-dates { margin-top:1.2em; padding-top:1.2em; border-top:1px solid rgba(255,255,255,0.1); }
.show-dates h4 { font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); margin-bottom:0.8em; font-family:var(--font-b); font-weight:400; }
.show-dates ul { list-style:none; padding:0; }
.show-dates li { font-size:0.9rem; padding:0.3em 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; gap:1em; }
.show-dates li:last-child { border-bottom:none; }
.show-date-date { color:var(--accent); min-width:120px; flex-shrink:0; }

/* ── ANMELDEFORMULAR ── */
.signup-form { margin-top:2.5rem; padding:2rem; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.3); }
.signup-form h3 { color:var(--white); font-size:1.1rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1.5rem; font-family:var(--font-b); font-weight:400; }
.form-row { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.2rem; }
@media (min-width:600px) { .form-row { grid-template-columns:1fr 1fr; } }
.form-field { display:flex; flex-direction:column; gap:0.4em; }
.form-field label { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.form-field input, .form-field select, .form-field textarea {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2);
  color:var(--white); padding:0.75em 1em; font-family:var(--font-b); font-size:0.95rem;
  outline:none; transition:border-color var(--trans); width:100%; -webkit-appearance:none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:rgba(255,255,255,0.5); }
.form-field select option { background:var(--black); color:var(--white); }
.form-field textarea { min-height:100px; resize:vertical; }
.btn-submit {
  font-size:0.78rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--white); background:transparent; border:1px solid rgba(255,255,255,0.4);
  padding:0.9em 2.5em; cursor:pointer; font-family:var(--font-b); transition:all var(--trans);
}
.btn-submit:hover { background:rgba(255,255,255,0.1); border-color:var(--white); }

.form-info { margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
.form-info h4 { font-family:var(--font-h); color:var(--accent); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:.8rem; }
.form-info p { font-size:.85rem; color:rgba(255,255,255,0.6); margin-bottom:.5em; }
#form-feedback { margin-top:1.2rem !important; }

/* ── BIO GALLERY ── */
.bio-gallery { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; margin:2rem 0; }
@media (min-width:600px) { .bio-gallery { grid-template-columns:repeat(4,1fr); } }
.bio-gallery img { width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(20%); transition:filter var(--trans); }
.bio-gallery img:hover { filter:grayscale(0%); }

/* ── SOCIAL ── */
.social-links { display:flex; gap:1rem; justify-content:center; margin:1.5rem 0; }
.social-links a { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid rgba(255,255,255,0.3); transition:all var(--trans); }
.social-links a:hover { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.6); opacity:1; }
.social-links svg { width:18px; height:18px; fill:var(--white); }

/* ── FOOTER ── */
.site-footer { position:fixed; bottom:1.5rem; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:2rem; pointer-events:none; }
.site-footer a { pointer-events:all; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); transition:color var(--trans); }
.site-footer a:hover { color:var(--white); opacity:1; }

/* ── SECTION LABEL ── */
.section-label { font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }

/* ── FADE ── */
.fade-up { opacity:0; transform:translateY(16px); transition:opacity 0.5s ease,transform 0.5s ease; }
.fade-up.visible { opacity:1; transform:none; }

/* ── ACCESSIBILITY ── */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.skip-link { position:absolute; top:-100px; left:1rem; background:var(--black); color:var(--white); padding:0.5em 1em; z-index:999; }
.skip-link:focus { top:1rem; }