/*
Theme Name: FELLOW Landingpage
Theme URI: https://example.com
Author: Dein Name
Description: WordPress-Theme fuer die FELLOW Landingpage, generiert aus einem Claude Design Export.
Version: 1.0
Requires PHP: 7.4
Text Domain: fellow-theme
*/


*{box-sizing:border-box;margin:0;padding:0}
:root{--black:#0D0D0D;--white:#FFFFFF;--grey-50:#FAFAFA;--grey-100:#F2F2F2;--grey-200:#E0E0E0;--grey-300:#C8C8C8;--grey-400:#AAAAAA;--grey-600:#666666;--grey-700:#444444;--grey-800:#222222;--serif:'Georgia',serif}
body{font-family:'Arial',sans-serif;color:var(--black);background:var(--white);font-size:16px;line-height:1.6}
nav{position:sticky;top:0;background:var(--white);border-bottom:1.5px solid var(--black);z-index:100;padding:0 2rem}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;gap:1rem}
.nav-logo{font-size:22px;font-weight:700;color:var(--black);letter-spacing:-0.5px;text-decoration:none}
.nav-links{display:flex;gap:0.25rem;flex-wrap:wrap}
.nav-links a{font-size:13px;color:var(--grey-600);text-decoration:none;padding:6px 10px;border-radius:4px;transition:all 0.15s;white-space:nowrap}
.nav-links a:hover{color:var(--black);background:var(--grey-100)}
.nav-links a.active{color:var(--black);font-weight:700;border-bottom:2px solid var(--black)}
.nav-cta{background:var(--black);color:var(--white);padding:8px 18px;border-radius:4px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0;letter-spacing:0.3px}
.nav-cta:hover{background:var(--grey-800)}
section{scroll-margin-top:56px}
.container{max-width:1100px;margin:0 auto;padding:0 2rem}
.section-pad{padding:80px 0}
.section-pad-lg{padding:100px 0}

/* HERO */
#hero{background:var(--black);color:var(--white)}
.hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--grey-400);margin-bottom:1.5rem}
.hero-headline{font-size:clamp(40px,5.5vw,72px);font-weight:700;line-height:1.03;letter-spacing:-2.5px;margin-bottom:1.5rem;max-width:700px}
.hero-headline em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.hero-sub{font-size:18px;color:var(--grey-400);max-width:500px;margin-bottom:2.5rem;line-height:1.65}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn-primary{background:var(--white);color:var(--black);padding:14px 28px;border-radius:4px;font-size:15px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all 0.15s;letter-spacing:0.2px}
.btn-primary:hover{background:var(--grey-200)}
.btn-ghost{color:var(--grey-400);font-size:15px;text-decoration:none;border-bottom:1px solid var(--grey-600);padding-bottom:2px;transition:all 0.15s}
.btn-ghost:hover{color:var(--white);border-color:var(--white)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.chat-mockup{background:#1A1A1A;border-radius:4px;padding:24px;border:1px solid #2D2D2D}
.chat-header{font-size:12px;color:var(--grey-600);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #2D2D2D;display:flex;align-items:center;gap:8px}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--white)}
.msg{margin-bottom:12px}
.msg-label{font-size:10px;color:var(--grey-600);margin-bottom:4px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.msg-bubble{padding:12px 16px;border-radius:2px;font-size:14px;line-height:1.55}
.msg-user .msg-bubble{background:#2A2A2A;color:#DDDDDD}
.msg-flow .msg-bubble{background:var(--white);color:var(--black)}
.msg-flow .msg-bubble strong{font-weight:700}
.typing{display:flex;gap:4px;padding:14px 16px;background:var(--white);border-radius:2px;width:fit-content}
.typing span{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,0.25);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:0.2s}
.typing span:nth-child(3){animation-delay:0.4s}
@keyframes blink{0%,80%,100%{opacity:0.25}40%{opacity:1}}

/* MISSION */
#mission{background:var(--white)}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.label-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--grey-600);border:1.5px solid var(--grey-300);padding:4px 12px;border-radius:2px;margin-bottom:1.25rem}
.mission-title{font-size:clamp(28px,3.5vw,44px);font-weight:700;line-height:1.1;letter-spacing:-1.5px;margin-bottom:1.5rem}
.mission-body{font-size:16px;color:var(--grey-600);line-height:1.75;margin-bottom:1.5rem}
.pull-quote{font-family:var(--serif);font-size:21px;font-style:italic;color:var(--black);line-height:1.45;border-left:3px solid var(--black);padding-left:1.5rem;margin:2rem 0}
.vision-card{background:var(--black);color:var(--white);border-radius:4px;padding:2.5rem}
.vision-card .label-tag{color:var(--grey-400);border-color:#333}
.vision-card h3{font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-0.5px;margin-bottom:1.25rem}
.vision-card p{color:var(--grey-400);font-size:16px;line-height:1.75}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3rem;border:1.5px solid var(--black);border-radius:4px;overflow:hidden}
.pillar{padding:1.75rem 1.5rem;background:var(--white);border-right:1px solid var(--grey-200)}
.pillar:last-child{border-right:none}
.pillar h4{font-size:14px;font-weight:700;margin-bottom:0.5rem;letter-spacing:0.3px}
.pillar p{font-size:13px;color:var(--grey-600);line-height:1.5}

/* ÜBER UNS */
#about{background:var(--grey-50)}
.about-intro{text-align:center;max-width:680px;margin:0 auto 4rem}
.about-intro h2{font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:-1px;margin-bottom:1rem;line-height:1.15}
.about-intro p{font-size:17px;color:var(--grey-600);line-height:1.7}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;border:1.5px solid var(--black);border-radius:4px;overflow:hidden}
.value-card{background:var(--white);padding:2rem;border-right:1px solid var(--grey-200)}
.value-card:last-child{border-right:none}
.value-card h4{font-size:16px;font-weight:700;margin-bottom:0.75rem;letter-spacing:-0.3px}
.value-card p{font-size:14px;color:var(--grey-600);line-height:1.65}
.about-statement{margin-top:3rem;padding:3rem 4rem;background:var(--black);border-radius:4px;text-align:center}
.about-statement p{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--grey-300);line-height:1.55;max-width:680px;margin:0 auto}

/* FUNKTIONEN */
#features{background:var(--white)}
.features-header{text-align:center;max-width:580px;margin:0 auto 4rem}
.features-header h2{font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:-1px;margin-bottom:1rem;line-height:1.15}
.features-header p{font-size:17px;color:var(--grey-600)}
.features-tabs{display:flex;gap:0;justify-content:center;margin-bottom:3rem;border:1.5px solid var(--black);border-radius:4px;overflow:hidden;width:fit-content;margin-left:auto;margin-right:auto}
.feat-tab{padding:10px 24px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:var(--white);color:var(--grey-600);transition:all 0.15s;border-right:1px solid var(--grey-200);letter-spacing:0.3px}
.feat-tab:last-child{border-right:none}
.feat-tab.active{background:var(--black);color:var(--white)}
.feat-tab:hover:not(.active){background:var(--grey-100);color:var(--black)}
.feat-panel{display:none}
.feat-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
#feat-bald.feat-panel.active{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.feat-list{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--black);border-radius:4px;overflow:hidden}
.feat-item{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem;border-bottom:1px solid var(--grey-200)}
.feat-item:last-child{border-bottom:none}
.feat-num{width:28px;height:28px;border-radius:2px;background:var(--black);color:var(--white);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.feat-item h4{font-size:15px;font-weight:700;margin-bottom:4px;letter-spacing:-0.3px}
.feat-item p{font-size:14px;color:var(--grey-600);line-height:1.55}
.feat-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:2px;margin-left:6px;vertical-align:middle}
.badge-now{background:var(--black);color:var(--white)}
.badge-soon{background:var(--grey-200);color:var(--grey-700)}
.feat-visual{background:var(--grey-50);border-radius:4px;padding:2rem;border:1.5px solid var(--grey-200)}
.feat-visual-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--grey-400);margin-bottom:1.5rem}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.stat-box{background:var(--white);border-radius:2px;padding:1.25rem;border:1px solid var(--grey-200)}
.stat-box .num{font-size:28px;font-weight:700;color:var(--black);letter-spacing:-1px}
.stat-box .unit{font-size:12px;color:var(--grey-500);margin-top:3px}
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:1rem;align-items:flex-start;padding:0.9rem 0;border-bottom:1px solid var(--grey-200)}
.tl-item:last-child{border-bottom:none}
.tl-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0}
.tl-dot.done{background:var(--black)}
.tl-dot.next{background:var(--grey-400)}
.tl-dot.future{background:var(--grey-100);border:2px solid var(--grey-300)}
.tl-item span{font-size:14px;color:var(--grey-800);line-height:1.4}
.tl-item .tl-date{font-size:11px;color:var(--grey-400);margin-top:2px}

/* ZIELGRUPPEN */
#audience{background:var(--grey-50)}
.audience-intro{text-align:center;max-width:600px;margin:0 auto 3rem}
.audience-intro h2{font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:-1px;margin-bottom:1rem;line-height:1.15}
.audience-tabs{display:flex;gap:0;justify-content:center;margin-bottom:2.5rem;border:1.5px solid var(--black);border-radius:4px;overflow:hidden;width:fit-content;margin-left:auto;margin-right:auto}
.aud-tab{padding:12px 28px;font-size:14px;font-weight:700;cursor:pointer;border:none;background:var(--white);color:var(--grey-600);transition:all 0.15s;border-right:1px solid var(--grey-200);letter-spacing:0.3px}
.aud-tab:last-child{border-right:none}
.aud-tab.active{background:var(--black);color:var(--white)}
.aud-tab:hover:not(.active){background:var(--grey-100);color:var(--black)}
.aud-panel{display:none}
.aud-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.aud-claim{font-size:clamp(22px,2.5vw,32px);font-weight:700;letter-spacing:-0.75px;line-height:1.2;margin-bottom:1rem}
.aud-body{font-size:16px;color:var(--grey-600);line-height:1.75;margin-bottom:2rem}
.aud-pain{background:var(--white);border-radius:4px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--grey-200)}
.aud-pain h4{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--grey-400);margin-bottom:1rem}
.pain-item{font-size:14px;color:var(--grey-600);padding:7px 0;border-bottom:1px solid var(--grey-100);display:flex;align-items:flex-start;gap:10px}
.pain-item:last-child{border-bottom:none}
.pain-item::before{content:'—';color:var(--grey-400);font-weight:700;flex-shrink:0;margin-top:1px}
.aud-benefits{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--black);border-radius:4px;overflow:hidden}
.benefit{padding:1.25rem 1.5rem;background:var(--white);border-bottom:1px solid var(--grey-200)}
.benefit:last-child{border-bottom:none}
.benefit h4{font-size:15px;font-weight:700;margin-bottom:4px;letter-spacing:-0.3px}
.benefit p{font-size:14px;color:var(--grey-600);line-height:1.55}

/* BETA */
#beta{background:var(--black);color:var(--white)}
.beta-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.beta-left h2{font-size:clamp(28px,3.5vw,44px);font-weight:700;letter-spacing:-1.5px;line-height:1.1;margin-bottom:1.5rem}
.beta-left h2 em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.beta-left p{font-size:16px;color:var(--grey-400);line-height:1.75;margin-bottom:1.5rem}
.beta-left .label-tag{color:var(--grey-400);border-color:#333}
.beta-perks{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.5rem}
.perk{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--grey-300)}
.perk::before{content:'✓';color:var(--white);font-weight:700;margin-top:1px;flex-shrink:0}
.beta-form{background:var(--white);border-radius:4px;padding:2.5rem;color:var(--black)}
.beta-form h3{font-size:20px;font-weight:700;margin-bottom:0.5rem;letter-spacing:-0.3px}
.beta-form p{font-size:14px;color:var(--grey-600);margin-bottom:2rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:10px;font-weight:700;color:var(--grey-600);margin-bottom:6px;text-transform:uppercase;letter-spacing:1.5px}
.form-group input,.form-group select{width:100%;background:var(--white);border:1.5px solid var(--grey-300);color:var(--black);border-radius:2px;padding:11px 14px;font-size:15px;font-family:Arial,sans-serif;transition:border 0.15s}
.form-group input::placeholder{color:var(--grey-300)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--black)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-submit{width:100%;background:var(--black);color:var(--white);border:none;border-radius:2px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;margin-top:0.5rem;transition:background 0.15s;font-family:Arial,sans-serif;letter-spacing:0.3px}
.form-submit:hover{background:var(--grey-800)}
.form-note{font-size:12px;color:var(--grey-400);text-align:center;margin-top:1rem}

footer{background:var(--black);border-top:1px solid #1A1A1A;padding:2rem;text-align:center}
footer p{font-size:13px;color:#444}

/* ---------- Hamburger-Menü (nur sichtbar auf Mobile) ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--black);
  border-radius:1px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Tablet & Mobile (<= 720px) ---------- */
@media(max-width:720px){
  .hero-grid,.mission-grid,.feat-panel.active,.aud-panel.active,.beta-inner,.pillars,.values-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:0}

  .nav-toggle{display:flex}
  .nav-links{
    display:none;
    position:absolute;
    top:56px;
    left:-2rem;
    right:-2rem;
    flex-direction:column;
    gap:0;
    background:var(--white);
    border-bottom:1.5px solid var(--black);
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    padding:0.5rem 0;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{
    padding:14px 2rem 14px 3.25rem;
    border-radius:0;
    border-bottom:1px solid var(--grey-100);
    font-size:15px;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{display:none}

  .features-tabs,.audience-tabs{flex-direction:column;width:100%}
  .feat-tab,.aud-tab{border-right:none;border-bottom:1px solid var(--grey-200)}

  /* Abstände auf Mobile verkleinern, aber mehr Trennung vor jeder Sektion */
  .section-pad{padding:56px 0}
  .section-pad-lg{padding:64px 0}
  section + section{margin-top:32px}
  #hero .section-pad-lg{padding-top:96px}
  #beta .section-pad-lg{padding-top:140px}
  .container{padding:0 1.25rem}
  .beta-form{padding:1.75rem 1.5rem}
  .about-statement{padding:2rem 1.5rem}
  .vision-card{padding:1.75rem}
  .feat-visual{padding:1.5rem}
}

/* ---------- Kleine Phones (<= 480px) ---------- */
@media(max-width:480px){
  .hero-headline{letter-spacing:-1.5px}
  .stat-row{grid-template-columns:1fr}
  .chat-mockup{padding:16px}
  .beta-form{padding:1.5rem 1.25rem}
  .nav-inner{height:52px}
  .nav-logo{font-size:19px}
  .btn-primary,.btn-ghost{font-size:14px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:0.75rem}
}