@font-face{
  font-family:'Bookmania';
  src: url('fonts/Bookmania-BoldItalic.woff2') format('woff2'),
       url('fonts/Bookmania-BoldItalic.woff') format('woff');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --black:#171009;
  --paper:#efe4cd;
  --yellow:#f2b705;
  --rust:#7a3b1e;
  --unripe:#d9b23a;
  --max-w: 1100px;
}

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

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
  background:var(--black);
  color:var(--paper);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  line-height:1.5;
  position:relative;
}

/* organic background texture removed — didn't render reliably */

nav, .hero, section, footer{ position:relative; z-index:1; }

h1,h2,h3{
  font-family:'Baloo 2', 'Space Grotesk', sans-serif;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.01em;
}

.hero h1{
  font-family:'Onick', 'Anton', sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
}

a{color:inherit;text-decoration:none;}
section{position:relative;padding:6rem 1.5rem;}
.wrap{max-width:var(--max-w); margin:0 auto;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--yellow); outline-offset:2px;
}

/* --- NAV --- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 1.5rem;
  background:rgba(23,16,9,0.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(239,228,205,0.08);
}
nav .logo{
  font-family:'Baloo 2', 'Space Grotesk', sans-serif; font-weight:700;
  font-size:1.3rem; color:var(--yellow);
}
nav .nav-links{display:none; gap:1.5rem; font-size:0.95rem;}
@media(min-width:700px){ nav .nav-links{display:flex;} }
nav .nav-links a{ opacity:0.85; transition:opacity .2s, color .2s; }
nav .nav-links a:hover{opacity:1; color:var(--yellow);}

/* --- HERO --- */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding-top:8rem;
  background:
    radial-gradient(circle at 80% 20%, rgba(242,183,5,0.15), transparent 60%),
    linear-gradient(180deg, rgba(23,16,9,0.3), rgba(23,16,9,0.55));
}
.hero .kicker{
  color:var(--yellow); font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; font-size:0.85rem; margin-bottom:1rem;
}
.hero-peel-wrap{
  width:100%;
  display:flex; justify-content:center;
  margin-bottom:1.5rem;
}
.hero-peel{
  width:clamp(160px, 32vw, 380px);
  height:auto;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,0.45));
}
.hero h1{
  font-size:clamp(2.6rem, 11vw, 6.5rem);
  color:var(--paper);
  text-transform:uppercase;
  line-height:1.15;
}
.hero h1 span{color:var(--yellow); display:block;}
.hero p{
  font-size:clamp(1.1rem, 2.5vw, 1.5rem);
  margin-top:1.5rem; max-width:32ch; opacity:0.9;
}
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }

.btn{
  display:inline-block;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:1rem;
  padding:0.9rem 1.8rem;
  border:3px solid var(--paper);
  border-radius:2px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  background:transparent; color:var(--paper);
}
.btn:hover{ transform:translate(-2px,-2px); }
.btn.primary{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.btn.primary:hover{ background:var(--paper); border-color:var(--paper); }

/* --- SECTION HEADERS --- */
.section-label{
  color:var(--rust); background:var(--yellow);
  display:inline-block; padding:0.3rem 0.8rem; font-weight:700;
  font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:1.5rem; transform:rotate(-1.5deg);
}
.section-title{
  font-size:clamp(2.2rem, 6vw, 3.8rem);
  color:var(--paper); margin-bottom:2rem; text-transform:uppercase;
}

/* --- MANIFEST --- */
.manifest-intro{
  font-size:clamp(1.2rem, 2.4vw, 1.6rem);
  max-width:38ch; margin-bottom:3rem; font-weight:500;
}
.manifest-intro strong{color:var(--yellow);}

.principles{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media(min-width:700px){ .principles{grid-template-columns:repeat(3,1fr);} }

.principle-card{
  background:var(--unripe); color:var(--black);
  border:3px solid var(--paper);
  padding:1.8rem 1.5rem;
  transform:rotate(-0.6deg);
}
.principle-card:nth-child(2){transform:rotate(0.7deg);}
.principle-card:nth-child(3){transform:rotate(-0.3deg);}
.principle-card h3{ font-size:1.3rem; margin-bottom:0.6rem; color:var(--black); }
.principle-card p{font-size:0.95rem; opacity:0.85;}

/* --- EVENTS --- */
.event-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:700px){ .event-grid{grid-template-columns:repeat(2,1fr);} }

.event-card{
  background:var(--paper); color:var(--black);
  border:3px solid var(--black);
  padding:1.8rem;
  position:relative;
  transition:transform .2s ease;
}
.event-card:hover{ transform:translateY(-4px); }
.event-date{
  font-weight:700; color:var(--rust); font-size:0.9rem;
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.6rem;
}
.event-card h3{font-size:1.6rem; margin-bottom:0.5rem; text-transform:uppercase;}
.event-loc{font-size:0.9rem; font-weight:700; margin-bottom:0.8rem; opacity:0.75;}
.event-teaser{font-size:0.95rem; opacity:0.85;}

.event-card.placeholder{
  background:transparent; color:var(--paper);
  border:3px dashed var(--paper);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  min-height:180px;
}
.event-card.placeholder h3{color:var(--yellow);}

/* --- MITMACHEN --- */
.join{
  background:var(--yellow); color:var(--black);
  border-top:6px solid var(--black); border-bottom:6px solid var(--black);
}
.join .section-label{ background:var(--black); color:var(--yellow); }
.join .section-title{ color:var(--black); }
.join p{ font-size:clamp(1.1rem,2.2vw,1.4rem); max-width:44ch; margin-bottom:2rem; font-weight:500; }
.join .tags{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2.5rem; }
.join .tag{
  background:var(--black); color:var(--yellow);
  padding:0.4rem 0.9rem; font-weight:700; font-size:0.85rem;
  text-transform:uppercase;
}
.join .btn{ border-color:var(--black); color:var(--black); }
.join .btn:hover{ background:var(--black); color:var(--yellow); }

/* --- FOOTER / KONTAKT --- */
footer{ background:var(--black); padding-top:5rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:3rem; }
@media(min-width:800px){ .footer-grid{grid-template-columns:1.2fr 1fr;} }

.contact-block p{ font-size:1.05rem; opacity:0.9; margin-bottom:1.5rem; max-width:38ch; }
.mailto-btn{ font-size:1.15rem; }

.newsletter{ border:3px solid var(--paper); padding:2rem; }
.newsletter h3{ font-size:1.5rem; margin-bottom:0.5rem; color:var(--yellow); }
.newsletter p{ font-size:0.9rem; opacity:0.8; margin-bottom:1.2rem; }
.newsletter-form{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.newsletter-form input{
  flex:1; min-width:150px; border:2px solid var(--paper); padding:0.7rem;
  background:transparent; color:var(--paper); font-family:'Space Grotesk', sans-serif; font-size:1rem;
}
.newsletter-form input::placeholder{ color:rgba(239,228,205,0.4); }
.newsletter-form input:focus{ border-color:var(--yellow); outline:none; }
.newsletter-form .btn{ padding:0.7rem 1.2rem; font-size:0.9rem; }

.legal-bar{
  margin-top:4rem; padding:1.5rem 0;
  border-top:1px solid rgba(239,228,205,0.2);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:0.8rem; opacity:0.6;
}
.legal-bar a{ opacity:0.9; }
.legal-bar a:hover{ color:var(--yellow); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* --- LEGAL PAGES (Impressum / Datenschutz) --- */
.legal-page{
  padding-top:10rem;
  min-height:100vh;
}
.legal-page .section-title{ margin-bottom:2.5rem; }
.legal-page h2{
  font-size:1.5rem;
  text-transform:uppercase;
  color:var(--yellow);
  margin:2.5rem 0 0.8rem;
}
.legal-page h2:first-of-type{ margin-top:0; }
.legal-page p, .legal-page li{
  font-size:1rem;
  opacity:0.9;
  margin-bottom:0.8rem;
  max-width:65ch;
}
.legal-page ul{ padding-left:1.2rem; margin-bottom:0.8rem; }
.legal-page a.inline-link{
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-page a.inline-link:hover{ color:var(--yellow); }
.legal-page .placeholder-note{
  display:inline-block;
  background:var(--yellow); color:var(--black);
  padding:0.1rem 0.5rem; font-weight:700; font-size:0.85em;
  border-radius:2px;
}
.legal-page .back-link{
  display:inline-block; margin-bottom:2.5rem;
  font-size:0.9rem; opacity:0.75;
}
.legal-page .back-link:hover{ opacity:1; color:var(--yellow); }