/* Langefeld Consulting – ruhig und sachlich: Weiß, Dunkelblau, Petrol als Akzent.
   Keine externen Schriften (Datenschutz): Systemschrift des Geräts. */
:root{
  --bg:#ffffff;
  --soft:#f2f6f7;
  --ink:#16222e;
  --muted:#56636f;
  --line:#dde4e8;
  --navy:#16324a;
  --accent:#1f7a72;
  --accent-ink:#ffffff;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.05rem;line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(1.7rem,3.6vw,2.3rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0}
.label{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* Kopf */
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.2rem;color:var(--navy);white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none}
nav{display:flex;gap:22px;font-weight:500}
nav a{text-decoration:none;color:var(--muted)}nav a:hover{color:var(--ink)}
.call{background:var(--accent);color:var(--accent-ink);padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:700;white-space:nowrap}
@media (max-width:860px){nav{display:none}}

/* Hero */
.hero{background:var(--navy);color:#fff;padding-block:72px}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;max-width:20ch}
.hero p.lead{font-size:1.2rem;color:#c9d6e0;margin-top:18px;max-width:52ch}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid currentColor}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:36px;padding:0;list-style:none;color:#c9d6e0;font-size:.95rem}
.facts li::before{content:"✓ ";color:#7fd1c7;font-weight:700}

section{padding-block:64px}
section.soft{background:var(--soft)}
.center{text-align:center;margin-bottom:36px}
.center p{color:var(--muted);margin:10px auto 0;max-width:60ch}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.services{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.services{grid-template-columns:1fr}}
.svc{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:6px;min-width:0}
.svc .ic{width:46px;height:46px;border-radius:12px;background:var(--soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.svc .ic svg{width:24px;height:24px}
.svc p{color:var(--muted);font-size:.97rem}
.svc small{color:var(--accent);font-weight:600;margin-top:auto;padding-top:8px}

/* Warum wir */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 44px}
@media (max-width:760px){.why{grid-template-columns:1fr}}
.why div{border-left:4px solid var(--accent);padding-left:18px}
.why p{color:var(--muted);margin-top:6px}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{text-align:center;min-width:0}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.step p{color:var(--muted);font-size:.95rem;margin-top:4px}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr}}

/* Team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin-inline:auto}
@media (max-width:640px){.team{grid-template-columns:1fr}}
.person{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;gap:18px;align-items:flex-start}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:1.3rem;display:flex;align-items:center;justify-content:center;flex:none}
.person small{display:block;color:var(--accent);font-weight:600}
.person p{color:var(--muted);font-size:.97rem;margin-top:8px}

/* FAQ */
.faq{max-width:760px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding-block:16px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:8px}

/* Kontakt */
.contact{background:var(--navy);color:#fff;text-align:center}
.contact p{color:#c9d6e0;margin:12px auto 0;max-width:52ch}
.contact .btns{justify-content:center}
.contact .mail{font-size:1.15rem;font-weight:700;margin-top:18px;word-break:break-word}

/* Unterseiten */
.page{padding-block:48px;max-width:760px}
.page h1{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:800;margin-bottom:24px}
.page h2{font-size:1.3rem;margin-top:32px;margin-bottom:8px}
.page p{margin-top:10px}
.todo{background:#fff6d6;border:1px solid #f0d98a;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:.95rem}

footer{border-top:1px solid var(--line);padding-block:24px;font-size:.88rem;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){.btn,.call{transition:transform .15s}.btn:hover,.call:hover{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:400px){.logo{font-size:1.02rem}.logo svg{width:28px;height:28px}.call{padding:8px 13px}}

/* Beispielwebseiten und Navigation auf kleinen Bildschirmen */
.head nav{gap:18px;font-size:.92rem}
nav a[aria-current="page"]{color:var(--accent);font-weight:750}
.skip-link{position:absolute;left:12px;top:-100px;background:white;padding:12px;z-index:100}
.skip-link:focus{top:10px}
.showcase-hero h1{max-width:24ch}
.showcase-intro{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;margin-bottom:30px}
.showcase-intro p{max-width:43ch;color:var(--muted)}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.showcase-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:white}
.sample-preview{display:block;text-decoration:none;border-bottom:1px solid var(--line)}
.preview-bar{display:flex;align-items:center;gap:5px;background:#e7ecef;padding:11px 16px;color:#455561;font-size:.71rem}
.preview-bar span:last-child{margin-left:10px}
.preview-dot{width:7px;height:7px;border-radius:50%;background:#aab8c3}
.preview-content{position:relative;overflow:hidden;height:305px;padding:32px 28px}
.preview-content>span{position:relative;z-index:1;font-size:.59rem;letter-spacing:.1em;font-weight:750}
.preview-content strong{position:relative;z-index:1;display:block;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;margin-top:12px;max-width:12ch}
.preview-content img{position:absolute;right:-10%;bottom:-14%;width:73%;height:auto}
.preview-trade{background:#142e43;color:white}
.preview-trade .preview-content>span{color:#f0ba79}
.preview-practice{background:#eaf0eb;color:#173c34}
.preview-practice .preview-content>span{color:#3f6659}
.showcase-copy{padding:28px}
.showcase-copy h3{font-size:1.5rem;margin-bottom:12px}
.showcase-copy p{color:var(--muted)}
.sample-tags{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:20px 0 25px;font-size:.74rem}
.sample-tags li{background:var(--soft);padding:5px 10px;border-radius:30px}
.showcase-copy .btn{font-size:.9rem;padding:11px 17px}
.sample-note{color:var(--muted);font-size:.9rem;max-width:85ch;margin:28px auto 0;text-align:center}
@media(max-width:1050px){.head{flex-wrap:wrap;gap:10px}.head nav{display:flex;order:3;flex-basis:100%;flex-wrap:wrap;gap:8px 20px;padding:4px 0}.head nav a{padding:3px 0}}
@media(max-width:700px){.showcase-grid{grid-template-columns:1fr}.showcase-intro{display:block}.showcase-intro p{margin-top:16px}.preview-content{height:280px}.preview-content strong{font-size:1.8rem}.head nav{font-size:.83rem;gap:4px 16px}.showcase-copy{padding:22px}}

html{scroll-padding-top:150px}

.preview-trade{background:#fff7e6;color:#302c23}.preview-trade .preview-content>span{color:#685534}.sample-preview .preview-content img{width:100%;height:100%;right:0;bottom:0;object-fit:cover;opacity:.22}.preview-content strong{max-width:15ch}.preview-practice{background:#eaf0e8;color:#173c34}

/* Leistungsseite */
.jump{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:30px 0 0}
.jump a{display:inline-block;padding:7px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;text-decoration:none;font-size:.92rem}
.jump a:hover{background:rgba(255,255,255,.1)}
.group-head{margin-bottom:28px;max-width:62ch}
.group-head p{color:var(--muted);margin-top:10px}
.more{text-align:center;margin-top:28px}
.more .btn{color:var(--accent)}