/* ==========================================================
   Handwerkersoftware vs. Automatisierung — Buzzard AI
   Brand tokens from PAGE-BRIEF.md · Mobile-first · Cream/Teal/Copper
   ========================================================== */
:root {
  --teal: #2D5A5A; --teal-mid: #3A7070; --teal-dark: #112626;
  --teal-soft: rgba(45,90,90,.08); --cream: #FDF8F2; --cream-dark: #F5EDE3;
  --sand: #E8DDD0; --copper: #B87333; --copper-soft: rgba(184,115,51,.10);
  --sage: #8FA88A; --sage-soft: rgba(143,168,138,.12);
  --ink: #1A1A1A; --ink-soft: #555555; --ink-muted: #999999;
  --line: #E8DDD0; --line-soft: #F0E8DC;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  --max-width: 1200px; --section-pad: clamp(64px,10vw,120px);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--ink); background:var(--cream); overflow-x:hidden; }
a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection { background:var(--copper); color:#fff; }
.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }

/* ---- Type ---- */
.eyebrow,.section-eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--copper); font-weight:600; display:block; margin-bottom:12px;
}
.section-eyebrow--light { color:var(--sage); }
h1,.section-title,.cta-headline { font-family:var(--font-display); line-height:1.15; letter-spacing:-.01em; }
h1 { font-size:clamp(34px,5vw,62px); font-weight:600; color:var(--teal-dark); margin-bottom:20px; }
h1 em { font-style:italic; color:var(--copper); }
.section-title { font-size:clamp(28px,4vw,46px); font-weight:500; color:var(--teal-dark); margin-bottom:16px; }
.section-title--light { color:#fff; }
.section-sub { font-size:17px; color:var(--ink-soft); max-width:640px; margin-bottom:48px; line-height:1.75; }
.section-sub--light { color:rgba(255,255,255,.65); }

/* ---- Buttons ---- */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:#fff;
  padding:14px 28px; border-radius:4px; font-family:var(--font-body); font-size:13px;
  font-weight:600; letter-spacing:1px; text-transform:uppercase; text-decoration:none;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease;
}
.btn-primary:hover { background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(45,90,90,.25); }
.btn-primary--large { padding:18px 36px; font-size:14px; }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--teal);
  padding:14px 28px; border:1.5px solid var(--teal); border-radius:4px; font-family:var(--font-body);
  font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; text-decoration:none; transition:all .25s ease;
}
.btn-secondary:hover { background:var(--teal); color:#fff; }

/* ---- Nav ---- */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 0; transition:background .3s ease,padding .3s ease,box-shadow .3s ease; }
.nav--scrolled { background:rgba(253,248,242,.96); backdrop-filter:blur(16px); padding:12px 0; box-shadow:0 1px 24px rgba(45,90,90,.07); }
.nav-inner { max-width:var(--max-width); margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; }
.nav-logo { font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:.12em; color:var(--teal-dark); text-transform:uppercase; }
.nav-logo-ai { font-style:italic; color:var(--copper); }
.nav-links { display:flex; gap:28px; align-items:center; list-style:none; }
.nav-links a { font-size:13px; color:var(--ink-soft); font-weight:500; letter-spacing:.02em; transition:color .2s; }
.nav-links a:hover { color:var(--teal); }
.nav-cta { background:var(--teal)!important; color:#fff!important; padding:9px 20px; border-radius:4px; font-size:12px!important; letter-spacing:1px; text-transform:uppercase; font-weight:600; transition:background .2s!important; }
.nav-cta:hover { background:var(--teal-dark)!important; }
.burger { display:none; flex-direction:column; gap:5px; padding:6px; background:none; border:none; cursor:pointer; }
.burger span { width:22px; height:2px; background:var(--teal-dark); border-radius:2px; display:block; transition:all .25s ease; }
.burger--active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.burger--active span:nth-child(2) { opacity:0; }
.burger--active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ---- Section utilities ---- */
.section { padding:var(--section-pad) 0; }
.section--cream { background:var(--cream); } .section--sand { background:var(--sand); } .section--dark { background:var(--teal-dark); }
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.fade-up--visible { opacity:1; transform:translateY(0); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size:12px; color:var(--ink-muted); margin-bottom:20px; display:flex; gap:8px; align-items:center; }
.breadcrumb a { color:var(--ink-muted); transition:color .2s; }
.breadcrumb a:hover { color:var(--teal); }
.breadcrumb .sep { color:var(--line); }

/* ---- Hero ---- */
.hero {
  min-height:100vh; display:flex; align-items:center; padding:var(--section-pad) 0; padding-top:120px; overflow:hidden; position:relative;
  background: radial-gradient(ellipse at 75% 25%,rgba(184,115,51,.08) 0%,transparent 50%),
              radial-gradient(ellipse at 20% 70%,rgba(143,168,138,.06) 0%,transparent 50%),
              linear-gradient(160deg,var(--cream) 0%,#F7F1E8 50%,var(--cream-dark) 100%);
}
.hero::before {
  content:''; position:absolute; top:-80px; right:-80px; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(184,115,51,.05) 0%,transparent 70%); pointer-events:none;
}
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
.hero-text { max-width:560px; }
.hero-sub { font-size:18px; color:var(--ink-soft); line-height:1.75; margin-bottom:36px; max-width:500px; }
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
.hero-trust { display:flex; flex-direction:column; gap:10px; }
.trust-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-muted); }
.trust-item svg { flex-shrink:0; }

/* ---- Process X-Ray ---- */
.hero-visual { display:flex; align-items:center; justify-content:center; }
.xray-stage { position:relative; width:100%; max-width:440px; display:flex; flex-direction:column; gap:16px; }
.xray-card {
  background:#fff; border-radius:16px; padding:18px 20px;
  box-shadow:0 2px 16px rgba(45,90,90,.08),0 0 0 1px rgba(45,90,90,.06);
}
.stagger-1 { animation:cardReveal .7s .2s both; }
.stagger-2 { animation:cardReveal .7s .45s both; }
.stagger-3 { animation:cardReveal .7s 1.0s both; }
@keyframes cardReveal { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.xcard-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.xcard-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
.xcard-name { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--teal-dark); margin-bottom:3px; }
.xcard-sub { font-size:13px; color:var(--ink-soft); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--copper); display:inline-block; flex-shrink:0; animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.call-wave { display:flex; align-items:flex-end; gap:3px; height:20px; margin-top:10px; }
.call-wave span { width:3px; border-radius:2px; background:var(--copper); opacity:.7; animation:waveBar 1.2s ease-in-out infinite; }
.call-wave span:nth-child(1){height:30%;animation-delay:0s}
.call-wave span:nth-child(2){height:70%;animation-delay:.1s}
.call-wave span:nth-child(3){height:100%;animation-delay:.2s}
.call-wave span:nth-child(4){height:60%;animation-delay:.3s}
.call-wave span:nth-child(5){height:40%;animation-delay:.4s}
@keyframes waveBar { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }
.photo-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--copper-soft); border-radius:6px; flex-shrink:0; }
.xcard-measure { display:flex; align-items:center; gap:8px; margin:8px 0 4px; }
.measure-val { font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--teal-dark); }
.measure-x { font-family:var(--font-mono); font-size:13px; color:var(--ink-muted); }
.xray-connector { display:flex; align-items:center; gap:10px; padding:0 8px; }
.connector-line { flex:1; height:1px; background:linear-gradient(to right,var(--line),var(--copper),var(--line)); opacity:.6; }
.connector-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--copper); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.copper-glow-dot { width:6px; height:6px; border-radius:50%; background:var(--copper); box-shadow:0 0 6px 2px rgba(184,115,51,.35); animation:copperGlow 1.8s ease-in-out infinite; }
@keyframes copperGlow { 0%,100%{box-shadow:0 0 6px 2px rgba(184,115,51,.35)} 50%{box-shadow:0 0 10px 4px rgba(184,115,51,.6)} }
.connector-arrow { color:var(--copper); flex-shrink:0; }
.xray-card--crm { border:1.5px solid rgba(45,90,90,.15); }
.check-badge { width:22px; height:22px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.crm-status { font-size:14px; color:var(--teal); font-weight:500; margin:6px 0 10px; }
.crm-meta-row { display:flex; gap:6px; flex-wrap:wrap; }
.crm-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--teal); background:var(--teal-soft); padding:3px 8px; border-radius:4px; }

/* ---- Schmerz ---- */
.schmerz-body { max-width:760px; }
.schmerz-intro { font-size:18px; color:var(--ink-soft); line-height:1.8; margin-bottom:36px; }
.schmerz-list { list-style:none; display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.schmerz-list li { display:flex; gap:16px; align-items:flex-start; }
.schmerz-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
.schmerz-list li div { font-size:16px; color:var(--ink-soft); line-height:1.65; }
.schmerz-list li strong { color:var(--ink); }
.schmerz-klassisch { background:rgba(184,115,51,.06); border-left:3px solid var(--copper); padding:20px 24px; border-radius:0 8px 8px 0; max-width:600px; }
.klassisch-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px; }
.klassisch-text { font-size:16px; color:var(--ink-soft); line-height:1.7; }

/* ---- Fehlannahme ---- */
.software-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; }
.software-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:20px; transition:border-color .2s; }
.software-card:hover { border-color:rgba(255,255,255,.2); }
.software-name { font-family:var(--font-mono); font-size:15px; font-weight:600; color:#fff; margin-bottom:4px; }
.software-desc { font-size:13px; color:rgba(255,255,255,.5); margin-bottom:12px; line-height:1.5; }
.software-limit { font-size:12px; color:var(--copper); line-height:1.5; border-top:1px solid rgba(255,255,255,.08); padding-top:10px; }
.fehlannahme-conclusion { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:24px 28px; display:flex; align-items:flex-start; gap:16px; font-size:16px; color:rgba(255,255,255,.7); line-height:1.7; }
.conclusion-icon { font-family:var(--font-mono); font-size:20px; color:var(--copper); flex-shrink:0; margin-top:2px; }

/* ---- Buzzard Layer ---- */
.layer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.layer-card { background:#fff; border-radius:16px; padding:28px 24px; box-shadow:0 2px 12px rgba(45,90,90,.06); border:1px solid var(--line-soft); transition:transform .25s ease,box-shadow .25s ease; }
.layer-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(45,90,90,.10); }
.layer-number { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--copper); font-weight:600; margin-bottom:12px; }
.layer-icon { width:44px; height:44px; background:var(--teal-soft); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.layer-card h3 { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--teal-dark); margin-bottom:10px; line-height:1.2; }
.layer-card p { font-size:14px; color:var(--ink-soft); line-height:1.7; }

/* ---- Prozess ---- */
.prozess-steps { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.prozess-step { flex:1; min-width:140px; background:#fff; border-radius:14px; padding:24px 20px; box-shadow:0 2px 12px rgba(45,90,90,.06); border:1px solid var(--line-soft); }
.step-visual { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:14px; }
.step-num { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; color:var(--copper); font-weight:700; }
.step-content h3 { font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--teal-dark); margin-bottom:8px; }
.step-content p { font-size:13px; color:var(--ink-soft); line-height:1.65; }
.step-connector { font-family:var(--font-mono); font-size:18px; color:var(--line); margin-top:40px; flex-shrink:0; }

/* ---- Proof ---- */
.proof-grid { display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.proof-card { border-radius:16px; padding:36px; border:1px solid var(--line); }
.proof-card--primary { background:#fff; box-shadow:0 2px 16px rgba(45,90,90,.07); }
.proof-card--secondary { background:var(--cream-dark); }
.proof-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); margin-bottom:16px; font-weight:600; }
.proof-headline { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--teal-dark); line-height:1.25; margin-bottom:16px; }
.proof-body { font-size:15px; color:var(--ink-soft); line-height:1.75; margin-bottom:28px; }
.proof-numbers { display:flex; gap:28px; margin-bottom:28px; border-top:1px solid var(--line-soft); padding-top:24px; }
.proof-num { display:flex; flex-direction:column; }
.proof-val { font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--teal-dark); line-height:1.1; }
.proof-label { font-size:12px; color:var(--ink-muted); margin-top:4px; }
.proof-link { font-size:14px; font-weight:600; color:var(--teal); display:inline-flex; align-items:center; gap:4px; transition:gap .2s; }
.proof-link:hover { gap:8px; }

/* ---- FAQ ---- */
.faq-list { max-width:760px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-family:var(--font-body); font-size:16px; font-weight:500; color:var(--ink); text-align:left; cursor:pointer; gap:20px; transition:color .2s; }
.faq-question:hover,.faq-question[aria-expanded="true"] { color:var(--teal); }
.faq-icon { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--teal); flex-shrink:0; transition:transform .25s ease,background .25s ease,border-color .25s ease; line-height:1; }
.faq-item--open .faq-icon { transform:rotate(45deg); background:var(--teal); color:#fff; border-color:var(--teal); }
.faq-answer { padding-bottom:20px; }
.faq-answer[hidden] { display:none; }
.faq-answer p { font-size:15px; color:var(--ink-soft); line-height:1.8; }

/* ---- CTA section ---- */
.cta-section { position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:-200px; left:-200px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(45,90,90,.25) 0%,transparent 70%); pointer-events:none; }
.cta-section::after { content:''; position:absolute; bottom:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(184,115,51,.08) 0%,transparent 70%); pointer-events:none; }
.cta-inner { position:relative; z-index:1; text-align:center; max-width:640px; margin:0 auto; }
.cta-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); display:block; margin-bottom:16px; }
.cta-headline { font-size:clamp(28px,4vw,46px); font-weight:500; color:#fff; margin-bottom:20px; line-height:1.2; }
.cta-headline em { font-style:italic; color:var(--copper); }
.cta-sub { font-size:17px; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:36px; }
.cta-trust { margin-top:20px; font-size:12px; color:rgba(255,255,255,.35); letter-spacing:.03em; }

/* ---- Cross links ---- */
.cross-links { padding:48px 0; }
.cross-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.cross-link { font-size:13px; font-weight:600; color:var(--teal); border:1px solid var(--line); background:#fff; padding:10px 18px; border-radius:6px; transition:all .2s; }
.cross-link:hover { background:var(--teal); color:#fff; border-color:var(--teal); }

/* ---- Footer ---- */
.footer { background:var(--teal-dark); padding:64px 0 32px; border-top:1px solid rgba(255,255,255,.07); }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr; gap:64px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:28px; }
.footer-logo { font-family:var(--font-mono); font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:12px; }
.footer-logo span { font-style:italic; color:var(--copper); }
.footer-tagline { font-size:14px; color:rgba(255,255,255,.4); line-height:1.65; margin-bottom:16px; }
.footer-contact { display:flex; flex-direction:column; gap:6px; }
.footer-contact a,.footer-contact span { font-size:13px; color:rgba(255,255,255,.45); transition:color .2s; }
.footer-contact a:hover { color:rgba(255,255,255,.8); }
.footer-links { display:flex; gap:48px; }
.footer-col { display:flex; flex-direction:column; gap:8px; }
.footer-col-title { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:8px; }
.footer-col a { font-size:13px; color:rgba(255,255,255,.45); transition:color .2s; }
.footer-col a:hover { color:rgba(255,255,255,.8); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom span:first-child { font-size:12px; color:rgba(255,255,255,.25); }
.footer-badge { font-size:10px; font-weight:600; letter-spacing:.08em; color:rgba(255,255,255,.3); padding:4px 10px; border:1px solid rgba(255,255,255,.1); border-radius:4px; }

/* ---- Responsive ---- */
@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; gap:48px; }
  .hero-text { max-width:100%; }
  .xray-stage { max-width:100%; }
  .layer-grid { grid-template-columns:repeat(2,1fr); }
  .software-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  :root { --section-pad:64px; }
  h1 { font-size:clamp(30px,8vw,42px); }
  .hero { padding-top:88px; min-height:auto; }
  .hero-sub { font-size:16px; }
  .hero-ctas { flex-direction:column; align-items:flex-start; }
  .btn-primary,.btn-secondary { justify-content:center; width:100%; max-width:320px; }
  .nav-links { display:none; flex-direction:column; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--cream); justify-content:center; align-items:center; gap:28px; z-index:99; }
  .nav-links--open { display:flex; }
  .nav-links a { font-size:18px; color:var(--ink); }
  .burger { display:flex; z-index:101; }
  .xray-stage { gap:12px; }
  .xray-card { padding:14px 16px; }
  .xcard-name { font-size:17px; }
  .layer-grid { grid-template-columns:1fr; gap:16px; }
  .layer-card { padding:22px 20px; }
  .prozess-steps { flex-direction:column; gap:0; }
  .prozess-step { min-width:100%; border-radius:0; border-bottom:none; }
  .prozess-step:first-child { border-radius:14px 14px 0 0; }
  .prozess-step:last-child { border-radius:0 0 14px 14px; border-bottom:1px solid var(--line-soft); }
  .step-connector { margin:0; align-self:center; transform:rotate(90deg); font-size:14px; padding:8px 0; }
  .proof-grid { grid-template-columns:1fr; }
  .proof-card { padding:24px 20px; }
  .proof-numbers { gap:20px; }
  .footer-inner { grid-template-columns:1fr; gap:40px; }
  .footer-links { gap:32px; }
}
@media(max-width:480px) {
  h1 { font-size:clamp(27px,7.5vw,34px); }
  .section-title { font-size:clamp(24px,6.5vw,32px); }
  .software-grid { grid-template-columns:1fr; }
  .proof-numbers { flex-wrap:wrap; gap:16px; }
  .cross-grid { flex-direction:column; }
  .cross-link { width:100%; }
}