/* FriseurDesk.de — Brand Stylesheet */
:root {
  --black: #111827;
  --gold: #D97706;
  --gold-light: #F59E0B;
  --gold-dark: #B45309;
  --white: #F9FAFB;
  --anthrazit: #374151;
  --gray: #6B7280;
  --gray-light: #E5E7EB;
  --success: #059669;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", "Segoe UI", sans-serif; color: var(--black); background: #fff; }

/* NAV */
nav {
  position: sticky; top:0; z-index:100;
  background: var(--black);
  display: flex; align-items:center; justify-content:space-between;
  padding: 1rem 2rem;
  border-bottom: 2px solid var(--gold);
}
.nav-logo { color:var(--gold); font-size:1.5rem; font-weight:800; letter-spacing:-0.5px; text-decoration:none; }
.nav-logo span { color:#fff; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:#d1d5db; text-decoration:none; font-size:.9rem; transition:color .2s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { background:var(--gold); color:#000; padding:.5rem 1.25rem; border-radius:6px; font-weight:700; text-decoration:none; font-size:.9rem; transition:background .2s; }
.nav-cta:hover { background:var(--gold-light); }

/* HERO */
.hero {
  background: linear-gradient(135deg, var(--black) 0%, #1f2937 60%, #111827 100%);
  color:#fff; padding: 6rem 2rem 5rem; text-align:center; position:relative; overflow:hidden;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(217,119,6,0.15) 0%, transparent 70%);
}
.hero-badge {
  display:inline-block; background:rgba(217,119,6,0.2); border:1px solid var(--gold);
  color:var(--gold); padding:.35rem 1rem; border-radius:20px; font-size:.8rem; font-weight:600;
  margin-bottom:1.5rem; letter-spacing:.5px;
}
.hero h1 { font-size: clamp(2.2rem,5vw,3.8rem); font-weight:900; line-height:1.15; margin-bottom:1.25rem; }
.hero h1 span { color:var(--gold); }
.hero p { font-size:1.2rem; color:#9ca3af; max-width:620px; margin:0 auto 2.5rem; line-height:1.7; }
.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-gold { background:var(--gold); color:#000; padding:.875rem 2rem; border-radius:8px; font-weight:800; text-decoration:none; font-size:1rem; transition:all .2s; }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); box-shadow:0 8px 25px rgba(217,119,6,.4); }
.btn-outline { border:2px solid #4b5563; color:#fff; padding:.875rem 2rem; border-radius:8px; font-weight:700; text-decoration:none; font-size:1rem; transition:all .2s; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.hero-trust { margin-top:3rem; display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; }
.hero-trust-item { text-align:center; }
.hero-trust-item .num { font-size:2rem; font-weight:900; color:var(--gold); }
.hero-trust-item .lbl { font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:1px; }

/* SECTIONS */
section { padding:5rem 2rem; }
.container { max-width:1100px; margin:0 auto; }
.section-label { color:var(--gold); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:.75rem; }
.section-title { font-size: clamp(1.8rem,3vw,2.5rem); font-weight:800; line-height:1.25; margin-bottom:1rem; }
.section-sub { color:var(--gray); font-size:1.05rem; max-width:580px; line-height:1.7; margin-bottom:3rem; }

/* PAIN POINTS */
.pain-bg { background:#f3f4f6; }
.pain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.pain-card {
  background:#fff; border-radius:12px; padding:1.75rem;
  border-left:4px solid var(--gold); box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
.pain-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.pain-icon { font-size:2rem; margin-bottom:1rem; }
.pain-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.pain-card p { color:var(--gray); font-size:.9rem; line-height:1.6; }

/* FEATURES */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; }
.feature-card {
  border:1px solid var(--gray-light); border-radius:14px; padding:2rem;
  transition:all .2s; position:relative; overflow:hidden;
}
.feature-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin:left; transition:transform .3s;
}
.feature-card:hover::before { transform:scaleX(1); }
.feature-card:hover { border-color:var(--gold); box-shadow:0 8px 30px rgba(217,119,6,.12); }
.feature-icon { font-size:2.5rem; margin-bottom:1.25rem; }
.feature-card h3 { font-size:1.2rem; font-weight:800; margin-bottom:.75rem; }
.feature-card p { color:var(--gray); font-size:.9rem; line-height:1.7; margin-bottom:1rem; }
.feature-list { list-style:none; }
.feature-list li { font-size:.85rem; color:var(--anthrazit); padding:.2rem 0; }
.feature-list li::before { content:"✓ "; color:var(--gold); font-weight:700; }

/* COMPLIANCE */
.compliance-bg { background: var(--black); color:#fff; }
.compliance-box {
  background:linear-gradient(135deg,#1f2937,#111827);
  border:1px solid #374151; border-radius:16px; padding:2.5rem;
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
}
@media(max-width:768px){ .compliance-box { grid-template-columns:1fr; } }
.compliance-badge {
  background:rgba(217,119,6,.1); border:2px solid var(--gold);
  border-radius:12px; padding:1.5rem; text-align:center;
}
.compliance-badge .big { font-size:3rem; margin-bottom:.5rem; }
.compliance-badge h3 { color:var(--gold); font-weight:800; font-size:1.1rem; }
.compliance-badge p { color:#9ca3af; font-size:.85rem; margin-top:.5rem; }
.compliance-points { display:flex; flex-direction:column; gap:1rem; }
.comp-point { display:flex; align-items:flex-start; gap:.75rem; }
.comp-point .check { color:var(--gold); font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.comp-point h4 { color:#fff; font-weight:700; font-size:.95rem; }
.comp-point p { color:#9ca3af; font-size:.85rem; line-height:1.5; }

/* TESTIMONIALS */
.testi-bg { background:#f9fafb; }
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.testi-card {
  background:#fff; border-radius:14px; padding:2rem;
  box-shadow:0 4px 16px rgba(0,0,0,.08); position:relative;
}
.testi-quote { font-size:3rem; color:var(--gold); line-height:1; margin-bottom:.5rem; font-family:Georgia,serif; }
.testi-text { color:var(--anthrazit); font-size:.95rem; line-height:1.7; margin-bottom:1.5rem; font-style:italic; }
.testi-stars { color:var(--gold); font-size:1.1rem; margin-bottom:1rem; }
.testi-author { display:flex; align-items:center; gap:.75rem; }
.testi-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex; align-items:center; justify-content:center;
  color:#000; font-weight:800; font-size:1.1rem;
}
.testi-name { font-weight:700; font-size:.9rem; }
.testi-role { color:var(--gray); font-size:.8rem; }

/* PRICING */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; max-width:960px; margin:0 auto; }
.price-card {
  border:2px solid var(--gray-light); border-radius:16px; padding:2.5rem 2rem;
  position:relative; transition:all .2s;
}
.price-card.featured {
  border-color:var(--gold); background:var(--black); color:#fff;
  transform:scale(1.03);
}
.price-card.featured .price-desc { color:#9ca3af; }
.price-card.featured .feat-item { color:#d1d5db; }
.price-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#000; font-size:.75rem; font-weight:800;
  padding:.3rem 1rem; border-radius:20px; letter-spacing:.5px;
}
.price-name { font-size:1rem; font-weight:700; color:var(--gray); margin-bottom:.5rem; }
.price-card.featured .price-name { color:#9ca3af; }
.price-amount { font-size:3rem; font-weight:900; line-height:1.1; }
.price-amount span { font-size:1.2rem; font-weight:400; }
.price-period { color:var(--gray); font-size:.85rem; margin-bottom:.25rem; }
.price-desc { color:var(--gray); font-size:.85rem; margin-bottom:2rem; line-height:1.5; }
.feat-list { list-style:none; margin-bottom:2rem; }
.feat-item { padding:.4rem 0; font-size:.9rem; display:flex; align-items:flex-start; gap:.5rem; }
.feat-item::before { content:"✓"; color:var(--gold); font-weight:800; flex-shrink:0; }
.price-card.featured .feat-item::before { color:var(--gold); }
.price-btn {
  display:block; width:100%; text-align:center; padding:.875rem;
  border-radius:8px; font-weight:800; text-decoration:none; font-size:.95rem; transition:all .2s;
  background:var(--gray-light); color:var(--black);
}
.price-card.featured .price-btn { background:var(--gold); color:#000; }
.price-btn:hover { opacity:.9; transform:translateY(-1px); }

/* DEMO FORM */
.form-bg { background: linear-gradient(135deg, var(--black), #1f2937); color:#fff; }
.demo-form { max-width:580px; margin:0 auto; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px){ .form-grid { grid-template-columns:1fr; } }
.form-group { margin-bottom:1.25rem; }
.form-group.full { grid-column:1/-1; }
.form-group label { display:block; font-size:.85rem; font-weight:600; color:#d1d5db; margin-bottom:.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.75rem 1rem; border-radius:8px;
  border:1px solid #374151; background:#1f2937; color:#fff;
  font-size:.95rem; transition:border .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--gold);
}
.form-group select option { background:#1f2937; }
.form-submit {
  width:100%; padding:1rem; background:var(--gold); color:#000;
  border:none; border-radius:8px; font-size:1.05rem; font-weight:800;
  cursor:pointer; transition:all .2s; margin-top:.5rem;
}
.form-submit:hover { background:var(--gold-light); transform:translateY(-1px); }

/* FOOTER */
footer {
  background:var(--black); color:#6b7280; padding:3rem 2rem 2rem;
  border-top:1px solid #1f2937;
}
.footer-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:2rem; }
@media(max-width:768px){ .footer-inner { grid-template-columns:1fr; } }
.footer-brand .nav-logo { display:inline-block; margin-bottom:1rem; }
.footer-brand p { font-size:.9rem; line-height:1.7; }
.footer-col h4 { color:#fff; font-weight:700; margin-bottom:1rem; font-size:.9rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.5rem; }
.footer-col ul li a { color:#6b7280; text-decoration:none; font-size:.85rem; transition:color .2s; }
.footer-col ul li a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid #1f2937; padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem; }
.footer-bottom a { color:#6b7280; text-decoration:none; margin-left:1rem; }
.footer-bottom a:hover { color:var(--gold); }

/* TSE BANNER */
.tse-banner {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color:#000; padding:1rem 2rem; text-align:center; font-weight:700;
  font-size:.95rem;
}

/* RESPONSIVE */
@media(max-width:768px){
  nav { flex-wrap:wrap; gap:1rem; }
  .nav-links { display:none; }
  .hero { padding:4rem 1.5rem 3rem; }
  section { padding:3.5rem 1.5rem; }
  .price-card.featured { transform:scale(1); }
}