/* ============================================================
   Engelmeyer Consulting · Component Layer (Website)
   Depends on colors_and_type.css for tokens.
   Plain CSS classes, no build step. Prefix: .ec-
   ============================================================ */

/* ---------- Layout primitives ---------- */
.ec-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5);box-sizing:border-box}
.ec-container--narrow{max-width:var(--container-narrow)}
.ec-section{padding-block:var(--sp-9)}
.ec-section--tight{padding-block:var(--sp-8)}
.ec-section--warm{background:var(--bg-warm)}
.ec-section--cool{background:var(--bg-cool)}
.ec-section--inverse{background:var(--bg-inverse);color:#fff}
.ec-section--inverse p,.ec-section--inverse .ec-lead{color:var(--ec-blue-200)}
.ec-section--inverse h1,.ec-section--inverse h2,.ec-section--inverse h3{color:#fff}
.ec-stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.ec-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.ec-grid{display:grid;gap:var(--sp-5)}
.ec-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ec-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ec-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ec-grid--editorial{grid-template-columns:1.4fr 1fr;gap:var(--sp-8)}
@media(max-width:900px){.ec-grid--3,.ec-grid--4,.ec-grid--editorial{grid-template-columns:1fr}.ec-grid--2{grid-template-columns:1fr}}

/* ---------- Section starter (hairline + eyebrow + heading) ---------- */
.ec-eyebrow{display:flex;align-items:center;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ec-taupe-700);margin-bottom:var(--sp-4)}
.ec-eyebrow::before{content:"";display:inline-block;width:48px;height:1px;background:var(--ec-taupe-500);margin-right:var(--sp-3);flex:none}
.ec-section--inverse .ec-eyebrow{color:var(--ec-taupe-300)}
.ec-section--inverse .ec-eyebrow::before{background:var(--ec-taupe-400)}
.ec-rule{border:0;border-top:1px solid var(--rule);margin-block:var(--sp-7)}

/* ---------- Buttons ---------- */
.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-small);letter-spacing:.02em;padding:12px 20px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.ec-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ec-btn--primary{background:var(--ec-blue-700);color:#fff}
.ec-btn--primary:hover{background:var(--ec-blue-800);color:#fff}
.ec-btn--primary:active{background:var(--ec-blue-900)}
.ec-btn--secondary{background:transparent;color:var(--ec-blue-700);border-color:var(--ec-blue-700)}
.ec-btn--secondary:hover{background:var(--ec-blue-100);color:var(--ec-blue-900)}
.ec-btn--ghost{background:transparent;color:var(--ec-blue-700)}
.ec-btn--ghost:hover{background:var(--ec-blue-100)}
.ec-btn--sm{padding:8px 14px;font-size:13px}
.ec-btn--lg{padding:15px 28px;font-size:var(--fs-body)}
.ec-section--inverse .ec-btn--primary{background:#fff;color:var(--ec-blue-900)}
.ec-section--inverse .ec-btn--primary:hover{background:var(--ec-blue-100)}
.ec-section--inverse .ec-btn--secondary{color:#fff;border-color:rgba(255,255,255,.5)}
.ec-section--inverse .ec-btn--secondary:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- Cards ---------- */
.ec-card{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-1);transition:box-shadow var(--dur-base) var(--ease-standard)}
.ec-card--hover:hover{box-shadow:var(--shadow-2)}
.ec-card__title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--fg-1);margin:0 0 var(--sp-2)}
.ec-card__body{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);color:var(--fg-2);margin:0}

/* ---------- Pillar tiles (Leistungen / Beratungsansatz / …) ---------- */
.ec-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
@media(max-width:900px){.ec-pillars{grid-template-columns:1fr}}
.ec-pillar{background:var(--bg-surface);padding:var(--sp-6) var(--sp-5)}
.ec-pillar__num{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);color:var(--ec-taupe-500);margin-bottom:var(--sp-4)}
.ec-pillar__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);line-height:var(--lh-snug);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ec-blue-900);margin:0 0 var(--sp-2)}
.ec-pillar__body{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);color:var(--fg-2);margin:0}
.ec-section--inverse .ec-pillars{background:rgba(255,255,255,.14)}
.ec-section--inverse .ec-pillar{background:var(--bg-inverse)}
.ec-section--inverse .ec-pillar__title{color:#fff}
.ec-section--inverse .ec-pillar__num{color:var(--ec-taupe-300)}

/* ---------- Forms ---------- */
.ec-field{display:block}
.ec-label{display:block;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:.02em;color:var(--fg-1);margin-bottom:var(--sp-2)}
.ec-input,.ec-select,.ec-textarea{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);width:100%;box-sizing:border-box;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--fg-1);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.ec-input::placeholder,.ec-textarea::placeholder{color:var(--fg-muted)}
.ec-input:focus,.ec-select:focus,.ec-textarea:focus{outline:none;border-color:var(--ec-blue-700);box-shadow:var(--focus-ring)}
.ec-input:disabled,.ec-select:disabled,.ec-textarea:disabled{background:var(--bg-sunken);color:var(--fg-muted);cursor:not-allowed}
.ec-textarea{min-height:120px;resize:vertical}
.ec-hint{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg-3);margin-top:var(--sp-1)}
.ec-hint--error{color:var(--ec-danger)}

/* ---------- Tags & status ---------- */
.ec-tag{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill)}
.ec-tag--blue{background:var(--ec-blue-100);color:var(--ec-blue-900)}
.ec-tag--taupe{background:var(--ec-taupe-100);color:var(--ec-taupe-900)}
.ec-tag--outline{background:transparent;color:var(--ec-ink-700);border:1px solid var(--border-2)}
.ec-tag--success{background:rgba(79,138,106,.12);color:var(--ec-success)}
.ec-tag--warning{background:rgba(192,139,58,.14);color:var(--ec-warning)}
.ec-tag--danger{background:rgba(168,70,61,.12);color:var(--ec-danger)}
.ec-tag__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Site header ---------- */
.ec-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-1)}
.ec-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:76px}
.ec-header__mark{height:34px;display:block}
.ec-nav{display:flex;align-items:center;gap:var(--sp-5)}
.ec-nav a{font-family:var(--font-sans);font-weight:500;font-size:var(--fs-small);color:var(--fg-2);text-decoration:none;letter-spacing:.01em;transition:color var(--dur-fast) var(--ease-standard)}
.ec-nav a:hover,.ec-nav a[aria-current=page]{color:var(--ec-blue-700)}
@media(max-width:760px){.ec-nav{display:none}}

/* ---------- Hero ---------- */
.ec-hero{padding-block:var(--sp-10) var(--sp-9)}
.ec-hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(38px,5.2vw,var(--fs-display));line-height:var(--lh-tight);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ec-blue-900);margin:0;max-width:22ch;text-wrap:balance}
.ec-hero__lead{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-loose);color:var(--fg-2);margin:var(--sp-5) 0 0;max-width:48ch}
.ec-hero__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}

/* ---------- Quote ---------- */
.ec-quote{border-left:1px solid var(--ec-taupe-500);padding-left:var(--sp-7);max-width:52ch}
.ec-quote__mark{font-family:var(--font-serif);font-weight:500;font-size:96px;line-height:.6;color:var(--ec-taupe-400);display:block;margin-bottom:var(--sp-3)}
.ec-quote__text{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--fs-h2);line-height:var(--lh-snug);color:var(--ec-blue-900);margin:0}
.ec-quote__cite{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ec-taupe-700);font-style:normal;margin-top:var(--sp-5)}
.ec-quote__cite::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-taupe-500);flex:none}

/* ---------- Stat / figure ---------- */
.ec-stat__value{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h1);line-height:1;letter-spacing:var(--tracking-display);color:var(--ec-blue-700);margin:0}
.ec-stat__label{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-normal);color:var(--fg-3);margin:var(--sp-2) 0 0}

/* ---------- Footer ---------- */
.ec-footer{background:var(--bg-inverse);color:#fff;padding-block:var(--sp-8)}
.ec-footer__mark{height:32px;display:block;margin-bottom:var(--sp-5)}
.ec-footer a{color:var(--ec-blue-200);text-decoration:none;font-family:var(--font-sans);font-size:var(--fs-small);transition:color var(--dur-fast) var(--ease-standard)}
.ec-footer a:hover{color:#fff}
.ec-footer__meta{font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--ec-blue-300);margin:0}
.ec-footer__bottom{display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);margin-top:var(--sp-7);padding-top:var(--sp-5)}

/* ---------- Utilities ---------- */
.ec-muted{color:var(--fg-3)}
.ec-measure{max-width:65ch}
.ec-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}