/* Über-mich-Seite (ueber-mich.html) */

/* --- Seiten-Hero --- */
.about-hero { max-width:1140px; margin:0 auto; padding:72px 24px 32px; }
.about-hero-copy { display:flex; flex-direction:column; gap:16px; max-width:60ch; }
.page-h1 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:56px; line-height:1.05; letter-spacing:-0.02em; margin:0; color:#221d18; text-wrap:pretty; }
.about-lead { font-size:19px; line-height:1.6; margin:0; color:#756e66; text-wrap:pretty; }

/* --- Werdegang + Philosophie --- */
.about-section { max-width:1140px; margin:0 auto; padding:32px 24px 24px; }
.about-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.about-card { background:#fff; border:1px solid rgba(34,29,24,0.08); border-radius:22px; padding:34px; box-shadow:0 6px 18px rgba(40,32,25,0.06); }
.about-card-h2 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:26px; letter-spacing:-0.01em; margin:0 0 16px; color:#221d18; }
.about-prose { display:flex; flex-direction:column; gap:14px; font-size:16px; line-height:1.7; color:#756e66; }
.about-prose p { margin:0; }
.philo-intro { margin:0 0 18px; font-size:16px; line-height:1.7; color:#756e66; }
.philo-h3 { font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:18px; margin:0 0 6px; color:#221d18; }
.philo-h3--gap { margin:22px 0 6px; }
.philo-text { margin:0 0 6px; font-size:15px; line-height:1.65; color:#756e66; }

/* Checklisten */
.ticks { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ticks li { position:relative; padding-left:30px; line-height:1.55; color:#756e66; font-size:15px; }
.ticks li::before { content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--accent); }
.ticks li::after { content:""; position:absolute; left:6px; top:7px; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }

/* --- Versprechen --- */
.promise-section { max-width:1140px; margin:0 auto; padding:24px 24px; }
.promise { background:#f1e9df; border-left:5px solid var(--accent); border-radius:18px; padding:28px 32px; }
.promise-h3 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:22px; margin:0 0 8px; color:#221d18; }
.promise-text { margin:0; font-size:17px; line-height:1.65; color:#756e66; }

/* --- Was macht besonders --- */
.feature-section { max-width:1140px; margin:0 auto; padding:48px 24px 24px; }
.feature-head { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; max-width:62ch; }
.section-h2 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:36px; letter-spacing:-0.02em; margin:0; color:#221d18; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.feature { background:#faf6f0; border:1px solid rgba(34,29,24,0.08); border-radius:18px; padding:24px; display:flex; gap:16px; align-items:flex-start; }
.feature--wide { grid-column:1 / -1; }
.feature-icon { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:#f1e9df; color:var(--accent); display:grid; place-items:center; }
.feature-title { display:block; font-family:'Bricolage Grotesque', sans-serif; font-size:18px; color:#221d18; margin-bottom:4px; }
.feature-text { margin:0; font-size:15px; line-height:1.6; color:#756e66; }

/* --- CTA --- */
.cta-section { max-width:1140px; margin:0 auto; padding:40px 24px 80px; }
.cta-box { background:#221d18; color:#faf6f0; border-radius:26px; padding:56px 40px; text-align:center; box-shadow:0 20px 44px rgba(34,29,24,0.24); }
.cta-h2 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:34px; letter-spacing:-0.02em; margin:0 0 12px; color:#fff; }
.cta-text { margin:0 auto 26px; font-size:18px; line-height:1.6; color:rgba(250,246,240,0.75); max-width:52ch; }
.cta-primary { display:inline-block; background:var(--accent); color:#fff; padding:16px 34px; border-radius:999px; font-weight:700; font-size:17px; box-shadow:0 10px 24px rgba(201,116,74,0.32); }
.cta-primary:hover { background:#faf6f0 !important; color:#221d18 !important; }

/* --- Responsive --- */
@media (max-width:900px){
  .about-cols { grid-template-columns:1fr !important; }
  .feature-grid { grid-template-columns:1fr !important; }
  .page-h1 { font-size:44px !important; }
}
@media (max-width:560px){
  .page-h1 { font-size:34px !important; }
  .about-card-h2, .section-h2 { font-size:30px !important; }
}