/* haas & compass — zentrales stylesheet */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body { background: #fafaf8; color: #1c1c1a; font-family: 'Inter', sans-serif; }
.hc-wrap { max-width: 760px; margin: 0 auto; padding: 0 2rem; }

/* nav */
.hc-nav { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; border-bottom: 1px solid #e8e6e0; position: relative; gap: 2rem; }
.hc-logo { font-family: 'Sora', sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.022em; text-decoration: none; color: #1c1c1a; white-space: nowrap; }
.hc-logo .n1 { font-weight: 600; }
.hc-logo .amp { font-weight: 300; font-size: 0.72em; color: #0c2d6b; padding: 0 0.22em; }
.hc-nav-right { display: flex; align-items: center; gap: 1.1rem; }
.hc-navlinks { display: flex; gap: 1.4rem; list-style: none; white-space: nowrap; }
.hc-navlinks a { font-size: 0.92rem; color: #4a4a46; text-decoration: none; letter-spacing: 0.02em; }
.hc-navlinks a:hover { color: #1c1c1a; }
.hc-navlinks a.active { color: #1c1c1a; border-bottom: 1px solid #1c1c1a; padding-bottom: 1px; }
.hc-lang { font-size: 0.78rem; letter-spacing: 0.04em; color: #aaa89e; cursor: default; white-space: nowrap; }
.hc-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hc-burger span { display: block; width: 22px; height: 2px; background: #1c1c1a; transition: all 0.2s; }
.hc-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hc-burger.open span:nth-child(2) { opacity: 0; }
.hc-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hc-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fafaf8; border-bottom: 1px solid #e8e6e0; z-index: 100; padding: 0.5rem 0 1rem; }
.hc-mobile-menu.open { display: block; }
.hc-mobile-menu a { display: block; font-size: 0.95rem; color: #4a4a46; text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid #f0eee8; letter-spacing: 0.02em; }
.hc-mobile-menu a:last-child { border-bottom: none; }
.hc-mobile-menu a:hover { color: #1c1c1a; }
.hc-mobile-menu a.active { color: #1c1c1a; font-weight: 500; }
.hc-mobile-lang { display: block; font-size: 0.95rem; color: #aaa89e; padding: 0.75rem 0; cursor: default; }

/* hero — homepage (mit foto-grid) */
.hc-hero { padding: 2.5rem 0; }
.hc-hero-grid { display: grid; grid-template-columns: 1fr 240px; gap: 4rem; align-items: start; }
.hc-eyebrow { font-size: 0.82rem; letter-spacing: 0.12em; color: #0c2d6b; margin-bottom: 1.5rem; font-weight: 500; }
.hc-h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.12; font-weight: 400; color: #1c1c1a; margin-bottom: 1rem; }
.hc-h1 em { font-style: italic; color: #0c2d6b; }
.hc-claim { font-size: 1.05rem; color: #6b6b66; font-weight: 300; line-height: 1.6; margin-top: 1.2rem; }
.hc-claim strong { font-weight: 400; color: #1c1c1a; }
.hc-cta { margin-top: 2.5rem; display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; color: #1c1c1a; border-bottom: 1px solid #1c1c1a; padding-bottom: 2px; text-decoration: none; }
.hc-cta:hover { color: #0c2d6b; border-color: #0c2d6b; }
.hc-foto { width: 240px; height: 320px; object-fit: cover; object-position: center 20%; display: block; }

/* hero — unterseiten (ohne grid, kompakter, reduziertes padding) */
.hc-hero-page { padding: 1.5rem 0 1.8rem; }
.hc-lead { font-size: 1.05rem; color: #5a5a55; font-weight: 300; line-height: 1.75; max-width: 580px; }

/* generic sections */
.hc-divider { border: none; border-top: 1px solid #e8e6e0; }
.hc-section { padding: 4rem 0; }
.hc-section-tight { padding: 2rem 0 4rem; } /* erste section nach hero auf unterseiten: weniger oben, normal unten */
.hc-section-label { font-size: 0.8rem; letter-spacing: 0.12em; color: #888884; margin-bottom: 2.5rem; font-weight: 500; }
.hc-h2 { font-family: 'DM Serif Display', serif; font-size: 1.8rem; font-weight: 400; line-height: 1.25; margin-bottom: 1rem; }
.hc-h2.small { font-size: 1.1rem; margin-bottom: 1rem; }
.hc-body { font-size: 0.95rem; color: #5a5a55; line-height: 1.8; max-width: 560px; }
.hc-body p + p { margin-top: 1rem; }
.hc-body a { color: #0c2d6b; text-decoration: none; border-bottom: 1px solid transparent; }
.hc-body a:hover { border-color: #0c2d6b; }

/* leistungs-kacheln (homepage) */
.hc-leistungen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; margin-top: 3rem; }
.hc-leistung-card { display: block; text-decoration: none; color: inherit; }
.hc-leistung-nr { font-size: 0.78rem; letter-spacing: 0.1em; color: #0c2d6b; margin-bottom: 0.75rem; font-weight: 500; }
.hc-leistung-title { font-family: 'DM Serif Display', serif; font-size: 1.15rem; font-weight: 400; margin-bottom: 0.6rem; color: #1c1c1a; transition: color 0.15s; }
.hc-leistung-card:hover .hc-leistung-title { color: #0c2d6b; }
.hc-leistung-text { font-size: 0.85rem; color: #6b6b66; line-height: 1.7; margin-bottom: 0.6rem; }
.hc-leistung-link { font-size: 0.78rem; letter-spacing: 0.04em; color: #0c2d6b; }
.hc-leistung-card:hover .hc-leistung-link { text-decoration: underline; }

/* methoden — homepage (kompakt) */
.hc-methoden { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; }
.hc-methode { padding-top: 1.2rem; border-top: 1px solid #e8e6e0; }
.hc-methode-name { font-size: 0.88rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.4rem; }
.hc-methode-desc { font-size: 0.82rem; color: #6b6b66; line-height: 1.6; }

/* methoden — beratung.html (ausführlich) */
.hc-methoden-detail { margin-top: 3rem; }
.hc-methode-detail { padding: 2rem 0; border-bottom: 1px solid #e8e6e0; display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }
.hc-methode-detail:first-child { border-top: 1px solid #e8e6e0; }
.hc-methode-detail-name { font-family: 'DM Serif Display', serif; font-size: 1.05rem; font-weight: 400; color: #1c1c1a; line-height: 1.3; }
.hc-methode-detail-desc { font-size: 0.88rem; color: #5a5a55; line-height: 1.7; }

/* rollen (beratung.html) */
.hc-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; margin-top: 3rem; }
.hc-rolle { padding-top: 1.2rem; border-top: 1px solid #e8e6e0; }
.hc-rolle-name { font-size: 0.88rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.4rem; }
.hc-rolle-desc { font-size: 0.82rem; color: #6b6b66; line-height: 1.6; }

/* prozess-steps (beratung.html) */
.hc-prozess { margin-top: 3rem; }
.hc-prozess-step { display: grid; grid-template-columns: 32px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #e8e6e0; align-items: start; }
.hc-prozess-step:first-child { border-top: 1px solid #e8e6e0; }
.hc-step-nr { font-size: 0.72rem; color: #0c2d6b; letter-spacing: 0.08em; padding-top: 0.15rem; font-weight: 500; }
.hc-step-title { font-size: 0.9rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.35rem; }
.hc-step-text { font-size: 0.85rem; color: #6b6b66; line-height: 1.65; }

/* lab-projekte (homepage, kompakt) */
.hc-lab-items { margin-top: 2.5rem; display: flex; flex-direction: column; }
.hc-lab-item { display: flex; gap: 2rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid #e8e6e0; }
.hc-lab-item:first-child { border-top: 1px solid #e8e6e0; }
.hc-lab-item-name { font-size: 0.85rem; font-weight: 500; min-width: 140px; color: #1c1c1a; }
.hc-lab-item-desc { font-size: 0.85rem; color: #6b6b66; line-height: 1.6; }

/* lab-projekte (lab.html, ausführlich) */
.hc-projekte { margin-top: 3rem; }
.hc-projekt { padding: 2.5rem 0; border-bottom: 1px solid #e8e6e0; }
.hc-projekt:first-child { border-top: 1px solid #e8e6e0; }
.hc-projekt-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.hc-projekt-name { font-family: 'DM Serif Display', serif; font-size: 1.3rem; font-weight: 400; color: #1c1c1a; }
.hc-projekt-status { font-size: 0.72rem; letter-spacing: 0.1em; color: #0c2d6b; font-weight: 500; }
.hc-projekt-desc { font-size: 0.92rem; color: #5a5a55; line-height: 1.75; max-width: 560px; margin-bottom: 1rem; }
.hc-tag { font-size: 0.72rem; letter-spacing: 0.06em; color: #6b6b66; border: 1px solid #d8d6d0; padding: 3px 10px; display: inline-block; margin: 0 0.3rem 0.3rem 0; }
.hc-philosophie { background: #f2f0ea; padding: 3rem; }
.hc-philosophie-text { font-family: 'DM Serif Display', serif; font-size: 1.4rem; font-weight: 400; font-style: italic; line-height: 1.5; color: #1c1c1a; max-width: 500px; }

/* testimonial — homepage (einzeln, mit grauem hintergrund) */
.hc-testimonial-box { background: #f2f0ea; padding: 2.5rem; margin-top: 3rem; }
.hc-testimonial-box-quote { font-family: 'DM Serif Display', serif; font-size: 1.25rem; font-weight: 400; font-style: italic; line-height: 1.5; color: #1c1c1a; margin-bottom: 1.5rem; }

/* testimonial — gemeinsame person-darstellung (foto, name, rolle) */
.hc-testimonial-person { display: flex; align-items: center; gap: 0.9rem; }
.hc-testimonial-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(100%); display: block; flex-shrink: 0; }
.hc-testimonial-name { font-size: 0.82rem; font-weight: 500; color: #1c1c1a; }
.hc-testimonial-role { font-size: 0.76rem; color: #6b6b66; }

/* testimonials — testimonials.html (liste mit firmenlink) */
.hc-testimonial { padding: 3rem 0; border-bottom: 1px solid #e8e6e0; }
.hc-testimonial-quote { font-family: 'DM Serif Display', serif; font-size: 1.2rem; font-weight: 400; font-style: italic; line-height: 1.55; color: #1c1c1a; margin-bottom: 1.5rem; max-width: 620px; }
.hc-testimonial-footer { display: flex; justify-content: space-between; align-items: center; }
.hc-testimonial-list-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(100%); display: block; flex-shrink: 0; }
.hc-testimonial-list-name { font-size: 0.85rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.2rem; }
.hc-testimonial-list-role { font-size: 0.78rem; color: #6b6b66; }
.hc-logo-text { font-size: 0.75rem; letter-spacing: 0.08em; color: #aaa89e; border: 1px solid #d8d6d0; padding: 4px 12px; text-decoration: none; white-space: nowrap; }
.hc-logo-text:hover { color: #6b6b66; border-color: #aaa89e; }

/* einzel-zitat — ueber-martin.html */
.hc-zitat-testimonial { padding: 3rem 0; }
.hc-zitat-quote { font-family: 'DM Serif Display', serif; font-size: 1.4rem; font-weight: 400; font-style: italic; line-height: 1.5; color: #1c1c1a; margin-bottom: 1.5rem; max-width: 600px; }
.hc-zitat-footer { display: flex; justify-content: space-between; align-items: center; }
.hc-zitat-person { display: flex; align-items: center; gap: 0.9rem; }
.hc-zitat-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(100%); display: block; flex-shrink: 0; }
.hc-zitat-name { font-size: 0.85rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.2rem; }
.hc-zitat-role { font-size: 0.78rem; color: #6b6b66; }
.hc-zitat-link { font-size: 0.75rem; letter-spacing: 0.08em; color: #aaa89e; border: 1px solid #d8d6d0; padding: 4px 12px; text-decoration: none; white-space: nowrap; }
.hc-zitat-link:hover { color: #6b6b66; border-color: #aaa89e; }

/* profil (homepage + ueber-martin.html) */
.hc-profil { max-width: 560px; }
.hc-profil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.hc-station { padding: 1rem 0; border-bottom: 1px solid #e8e6e0; }
.hc-station:first-child { border-top: 1px solid #e8e6e0; }
.hc-station-zeit { font-size: 0.72rem; letter-spacing: 0.08em; color: #0c2d6b; margin-bottom: 0.3rem; font-weight: 500; }
.hc-station-title { font-size: 0.9rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.2rem; }
.hc-station-org { font-size: 0.82rem; color: #6b6b66; }
.hc-verbindungen { margin-top: 3rem; }
.hc-verbindung { padding: 1.2rem 0; border-bottom: 1px solid #e8e6e0; }
.hc-verbindung:first-child { border-top: 1px solid #e8e6e0; }
.hc-verbindung-name { font-size: 0.88rem; font-weight: 500; color: #1c1c1a; margin-bottom: 0.3rem; }
.hc-verbindung-desc { font-size: 0.82rem; color: #6b6b66; line-height: 1.6; }

/* kontakt-seite spezifisch */
.hc-kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-top: 3rem; }
.hc-kontakt-weg { padding: 1.5rem 0; border-bottom: 1px solid #e8e6e0; }
.hc-kontakt-weg:first-child { border-top: 1px solid #e8e6e0; }
.hc-kontakt-weg-label { font-size: 0.72rem; letter-spacing: 0.1em; color: #aaa89e; margin-bottom: 0.5rem; font-weight: 500; }
.hc-kontakt-weg-value { font-size: 0.95rem; color: #1c1c1a; }
.hc-kontakt-weg-value a { color: #0c2d6b; text-decoration: none; border-bottom: 1px solid transparent; }
.hc-kontakt-weg-value a:hover { border-color: #0c2d6b; }
.hc-prinzip { padding: 1rem 0; border-bottom: 1px solid #e8e6e0; display: flex; gap: 1rem; align-items: baseline; }
.hc-prinzip:first-child { border-top: 1px solid #e8e6e0; }
.hc-prinzip-marker { font-size: 0.72rem; color: #0c2d6b; min-width: 16px; font-weight: 500; }
.hc-prinzip-text { font-size: 0.88rem; color: #5a5a55; line-height: 1.6; }

/* impressum-seite spezifisch */
.hc-kontaktbox { background: #f2f0ea; padding: 2rem; margin: 2rem 0; max-width: 480px; }
.hc-kontaktbox p { font-size: 0.92rem; color: #1c1c1a; line-height: 1.7; margin: 0; }
.hc-kontaktbox strong { font-weight: 500; }
.hc-sub { margin-top: 2.5rem; }
.hc-sub:first-child { margin-top: 0; }

/* dunkler kontakt-block (footer-cta, alle seiten) */
.hc-kontakt { background: #1c1c1a; color: #fafaf8; padding: 4rem; margin-top: 4rem; }
.hc-kontakt .hc-h2 { color: #fafaf8; margin-bottom: 0.75rem; }
.hc-kontakt .hc-body { color: #a8a89e; max-width: 440px; }
.hc-kontakt-cta { margin-top: 2rem; display: inline-block; font-size: 0.82rem; letter-spacing: 0.08em; color: #fafaf8; border-bottom: 1px solid #fafaf8; padding-bottom: 2px; text-decoration: none; opacity: 0.9; }
.hc-kontakt-cta:hover { opacity: 1; }

/* footer */
.hc-footer { padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e8e6e0; }
.hc-footer-name { font-size: 0.78rem; color: #aaa89e; letter-spacing: 0.04em; }
.hc-footer-links { display: flex; gap: 1.5rem; }
.hc-footer-links a { font-size: 0.75rem; color: #aaa89e; text-decoration: none; }
.hc-footer-links a:hover { color: #1c1c1a; }
.hc-footer-links a.active { color: #1c1c1a; }

/* responsive — navigation klappt früher um als das übrige layout,
   sobald die menüzeile neben dem schriftzug nicht mehr platz hat */
@media (max-width: 820px) {
  .hc-navlinks { display: none; }
  .hc-lang { display: none; }
  .hc-burger { display: flex; }
}

/* responsive */
@media (max-width: 600px) {
  .hc-nav { padding: 1.2rem 0; }
  .hc-logo { font-size: 1.3rem; }
  .hc-hero { padding: 2rem 0; }
  .hc-hero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hc-hero-page { padding: 1.2rem 0 1.3rem; }
  .hc-section-tight { padding: 1.2rem 0 2.5rem; }
  .hc-foto { width: 100%; height: 360px; object-fit: cover; object-position: center 18%; }
  .hc-leistungen { grid-template-columns: 1fr; }
  .hc-methoden { grid-template-columns: 1fr; }
  .hc-rollen { grid-template-columns: 1fr; }
  .hc-methode-detail { grid-template-columns: 1fr; gap: 0.5rem; }
  .hc-profil-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hc-kontakt-grid { grid-template-columns: 1fr; gap: 0; }
  .hc-projekt-header { flex-direction: column; gap: 0.4rem; }
  .hc-testimonial-footer { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hc-zitat-footer { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .hc-kontakt { padding: 2.5rem 1.5rem; }
}