/* angebot-shared.css — shared styles for all angebot pages */

/* HERO */
#hero { min-height:100vh; display:flex; align-items:center; padding:8rem 2.5rem 5rem; position:relative; overflow:hidden; background-size:cover; background-position:center 30%; }
#hero::before { content:''; position:absolute; inset:0; }
.hero-eyebrow { font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:2rem; }
.hero-inner { position:relative; max-width:950px; }
h1 { font-family:var(--font-display); font-size:clamp(3.2rem,8vw,6.8rem); font-weight:300; line-height:1.04; letter-spacing:-.01em; margin-bottom:2rem; }
h1 em { font-style:italic; color:var(--accent); }
.hero-sub { font-size:.9rem; color:var(--text-secondary); max-width:500px; line-height:1.85; margin-bottom:3rem; }
.btn { display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:1rem 2.5rem; transition:all .2s; }
.btn-fill { background:var(--accent); color:var(--bg); }
.btn-fill:hover { background:var(--accent-hot); transform:translateY(-1px); }
.btn-ghost { color:var(--text-secondary); border:1px solid var(--border); margin-left:1rem; }
.btn-ghost:hover { border-color:var(--accent-border); color:var(--text-primary); }
.hero-scroll { position:absolute; bottom:3rem; left:2.5rem; font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.hero-scroll::before { content:''; display:inline-block; width:36px; height:1px; background:var(--text-muted); vertical-align:middle; margin-right:.9rem; }

/* SECTIONS */
section { padding:6rem 2.5rem; }
.inner { max-width:1100px; margin:0 auto; }
.eyebrow { font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem; }
h2 { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.2rem); font-weight:300; line-height:1.15; margin-bottom:1.75rem; }
h2 em { font-style:italic; color:var(--accent); }
.lead { font-size:.88rem; color:var(--text-secondary); max-width:600px; line-height:1.85; margin-bottom:4rem; }

/* PROBLEM */
#problem { background:var(--bg-surface); }
.problem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5px; background:var(--border); border:1px solid var(--border); }
.problem-cell { background:var(--bg-surface); padding:2.5rem; }
.problem-cell .n { font-size:.62rem; letter-spacing:.1em; color:var(--text-muted); margin-bottom:1.2rem; }
.problem-cell p { font-size:.83rem; color:var(--text-secondary); line-height:1.8; }
.problem-cell strong { color:var(--text-primary); font-weight:400; }

/* LEISTUNGEN (feat-grid variant — jobcoach & musiker) */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.feat-cell { background:var(--bg-surface); padding:2rem 2.25rem; transition:background .25s; }
.feat-cell:hover { background:var(--bg-elevated); }
.feat-icon { font-size:1.3rem; margin-bottom:1.25rem; display:block; opacity:.7; }
.feat-cell h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:300; margin-bottom:.6rem; }
.feat-cell p { font-size:.8rem; color:var(--text-secondary); line-height:1.75; }

/* PRICING */
#pakete { background:var(--bg-surface); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:var(--border); border:1px solid var(--border); margin-top:1rem; }
.paket { background:var(--bg-surface); padding:2.75rem 2.25rem; display:flex; flex-direction:column; position:relative; }
.paket.best { background:var(--bg-elevated); }
.paket-badge { position:absolute; top:0; left:50%; transform:translateX(-50%); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:var(--bg); padding:.28rem 1.1rem; }
.paket-name { font-family:var(--font-display); font-size:1.5rem; font-weight:300; margin-bottom:.4rem; }
.paket-tag { font-size:.72rem; color:var(--text-secondary); margin-bottom:1.75rem; }
.paket-price { font-family:var(--font-display); font-size:2.6rem; font-weight:300; color:var(--accent); line-height:1; }
.paket-price-old { font-size:.8rem; color:var(--text-muted); text-decoration:line-through; margin-left:.5rem; }
.paket-price-note { font-size:.67rem; color:var(--text-muted); margin:.3rem 0 2rem; }
.paket-features { list-style:none; flex:1; margin-bottom:2.25rem; }
.paket-features li { font-size:.79rem; color:var(--text-secondary); padding:.45rem 0; border-bottom:1px solid var(--border); display:flex; gap:.7rem; align-items:flex-start; line-height:1.5; }
.paket-features li::before { content:'→'; color:var(--accent); flex-shrink:0; margin-top:.05em; }
.paket-features li.off { color:var(--text-muted); }
.paket-features li.off::before { color:var(--text-muted); content:'–'; }
.paket-cta { display:block; text-align:center; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; padding:.85rem; text-decoration:none; transition:all .2s; cursor:pointer; border:none; width:100%; font-family:var(--font-body); }
.paket:not(.best) .paket-cta { color:var(--text-secondary); border:1px solid var(--border); background:transparent; }
.paket:not(.best) .paket-cta:hover { border-color:var(--accent-border); color:var(--accent); }
.paket.best .paket-cta { background:var(--accent); color:var(--bg); }
.paket.best .paket-cta:hover { background:var(--accent-hot); }

/* PROZESS / STEPS */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step { padding:2.5rem 2rem; border:1px solid var(--border); margin:-1px 0 0 -1px; }
.step-num { font-family:var(--font-display); font-size:3rem; font-weight:300; color:var(--bg-elevated); line-height:1; margin-bottom:1.25rem; }
.step h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:300; margin-bottom:.65rem; }
.step p { font-size:.79rem; color:var(--text-secondary); line-height:1.75; }
.step-dauer { margin-top:1.25rem; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }

/* KONTAKT */
.kontakt-inner { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.kontakt-intro h2 { margin-bottom:1.25rem; }
.kontakt-intro p { font-size:.83rem; color:var(--text-secondary); line-height:1.85; margin-bottom:1.25rem; }
.kontakt-meta { margin-top:2.5rem; display:flex; flex-direction:column; gap:.75rem; }
.kontakt-meta-item { font-size:.75rem; color:var(--text-secondary); display:flex; gap:.75rem; align-items:center; }
.kontakt-meta-item::before { content:''; width:6px; height:6px; border:1px solid var(--accent); transform:rotate(45deg); flex-shrink:0; }

/* FORM */
form { background:var(--bg-elevated); border:1px solid var(--border); padding:2.5rem; }
.form-row { margin-bottom:1.5rem; }
.form-row label { display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:.6rem; }
.form-row input, .form-row textarea, .form-row select {
  width:100%; background:var(--bg-surface); border:1px solid var(--border);
  color:var(--text-primary); padding:.75rem 1rem; font-family:var(--font-body); font-size:.83rem;
  font-weight:300; outline:none; transition:border-color .2s; resize:vertical;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color:var(--accent-border); }
.form-row textarea { min-height:100px; }
.form-row select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8580' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-check { display:flex; align-items:flex-start; gap:.85rem; }
.form-check input[type=checkbox] { width:16px; height:16px; flex-shrink:0; margin-top:.15rem; accent-color:var(--accent); cursor:pointer; }
.form-check label { font-size:.75rem; color:var(--text-secondary); line-height:1.6; cursor:pointer; }
.form-check a { color:var(--accent); }
.form-hidden { display:none; }
.form-note { font-size:.72rem; color:var(--text-muted); line-height:1.6; }
.form-submit { margin-top:2rem; }
.form-submit button { width:100%; background:var(--accent); color:var(--bg); border:none; padding:1rem; font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.form-submit button:hover { background:var(--accent-hot); }
.form-submit button:disabled { opacity:.5; cursor:not-allowed; }
.form-msg { margin-top:1.25rem; padding:1rem 1.25rem; font-size:.8rem; line-height:1.6; display:none; }
.form-msg.ok { background:rgba(74,140,74,.15); border:1px solid rgba(74,140,74,.3); color:#7ec47e; }
.form-msg.err { background:rgba(180,60,60,.12); border:1px solid rgba(180,60,60,.25); color:#e07070; }

/* ABOUT */
#about { background:var(--bg); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
blockquote { font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.6rem); font-weight:300; font-style:italic; line-height:1.3; border-left:2px solid var(--accent); padding-left:2rem; }
.about-text p { font-size:.84rem; color:var(--text-secondary); line-height:1.85; margin-bottom:1.15rem; }
.about-text strong { color:var(--text-primary); font-weight:400; }

/* FOOTER */
footer { background:var(--bg); border-top:1px solid var(--border); padding:4rem 2.5rem 2rem; }
.footer-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand { font-family:var(--font-display); font-size:1.1rem; color:var(--text-primary); display:block; margin-bottom:.4rem; }
.footer-brand span { color:var(--accent); }
.footer-tagline { font-size:.72rem; color:var(--text-secondary); margin-bottom:1.25rem; line-height:1.6; }
.footer-email { font-size:.75rem; color:var(--text-secondary); text-decoration:none; transition:color .2s; }
.footer-email:hover { color:var(--accent); }
.footer-col-title { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1rem; }
.footer-col a { display:block; font-size:.78rem; color:var(--text-secondary); text-decoration:none; padding:.3rem 0; transition:color .2s; }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom { max-width:1100px; margin:0 auto; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.68rem; color:var(--text-muted); }
.footer-legal a { font-size:.68rem; color:var(--text-muted); text-decoration:none; margin-left:1.5rem; transition:color .2s; }
.footer-legal a:hover { color:var(--text-secondary); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.revealed { opacity:1; transform:none; }

/* RESPONSIVE */
@media(max-width:1024px) {
  .pricing-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  section { padding:4rem 1.5rem; }
  .kontakt-inner { grid-template-columns:1fr; gap:2.5rem; }
  .about-inner { grid-template-columns:1fr; gap:2.5rem; }
  .form-2col { grid-template-columns:1fr; }
  .btn-ghost { margin-left:0; margin-top:.75rem; display:block; text-align:center; }
  footer { padding:3rem 1.5rem 1.5rem; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .footer-legal a:first-child { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ZUSATZLEISTUNGEN / ADD-ONS */
#zusatzleistungen { background:var(--bg); }
.addon-grid {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin:2.5rem 0 2rem;
  max-width:720px;
}
.addon-item {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.95rem;
}
.addon-item:last-child { border-bottom:none; }
.addon-name { color:var(--text-secondary); flex:1; }
.addon-name em { color:var(--text-secondary); font-style:normal; font-size:.85rem; opacity:.7; }
.addon-price { color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.addon-cta { text-align:left; }

/*
 * SELECTORS ONLY IN JOBCOACH PAGE (angebot-jobcoach.css):
 *
 * #leistungen { background:var(--bg); }  — jobcoach uses bg (not bg-surface like musiker)
 * #prozess { background:var(--bg); }
 * #kontakt { background:var(--bg-surface); }
 * #pakete { background:var(--bg-surface); }  — jobcoach bg-surface, ki uses bg
 *
 * Hero-specific gradient (radial-gradient with amber glow at 25%/55%):
 *   #hero::before { background: radial-gradient(ellipse 65% 55% at 25% 55%, rgba(200,137,42,.12) ...) }
 *   background-image: url('jobcoach hero photo')
 *
 * .hero-sub { max-width:500px; }  (ki uses 520px, same file)
 */