/* ============================================================
   Institut Heidger KG — Gemeinsames Stylesheet
   Eingebunden auf allen Seiten (außer index.html)
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --lime:       #8DC63F;
  --lime-dark:  #6EA82E;
  --lime-glow:  rgba(141,198,63,.18);
  --lime-faint: rgba(141,198,63,.09);
  --charcoal:   #2A2A2A;
  --mid:        #5A5A5A;
  --muted:      #8A8A8A;
  --light:      #F0EEE8;
  --beige:      #E8E5DC;
  --beige-dark: #DEDAD0;
  --white:      #FAFAF7;
  --border:     rgba(0,0,0,.08);
}

/* ── ANIMATIONEN ────────────────────────────────────────────── */
@keyframes hpulse { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
@keyframes fadeup { from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:translateY(0) } }

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { font-family:"Epilogue",sans-serif; background:var(--white); color:var(--charcoal); overflow-x:hidden }

/* ── SPRACHE ────────────────────────────────────────────────── */
html[data-lang="de"] [data-en] { display:none }
html[data-lang="en"] [data-de] { display:none }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar         { background:var(--beige-dark); border-bottom:1px solid var(--border); font-family:"Syne",sans-serif; font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); padding:0 2rem; height:36px; display:flex; align-items:center; justify-content:space-between }
.topbar a       { color:var(--mid); text-decoration:none; transition:color .2s }
.topbar a:hover { color:var(--lime-dark) }
.topbar__left   { display:flex; gap:1.8rem; align-items:center }
.topbar__right  { display:flex; gap:.3rem; align-items:center }
.topbar__dot    { width:6px; height:6px; background:var(--lime); border-radius:50%; display:inline-block; margin-right:.4rem; animation:hpulse 2s ease-in-out infinite; vertical-align:middle }
.lang-btn       { cursor:pointer; border:none; background:none; font-family:"Syne",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); padding:.2rem .6rem; border-radius:3px; transition:color .2s, background .2s }
.lang-btn:hover,
.lang-btn.active { color:var(--lime-dark) }
.lang-btn.active { background:rgba(141,198,63,.15) }

/* ── HEADER ─────────────────────────────────────────────────── */
header          { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:200 }
.header-inner   { max-width:1360px; margin:0 auto; padding:0 2rem; height:76px; display:flex; align-items:center; justify-content:space-between }
.logo img       { height:56px; width:auto; display:block }
.back-btn       { font-family:"Syne",sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); text-decoration:none; display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border:1px solid var(--border); border-radius:4px; transition:color .2s, border-color .2s, background .2s }
.back-btn:hover { color:var(--lime-dark); border-color:var(--lime-dark); background:var(--lime-faint) }

/* ── DESKTOP NAV ────────────────────────────────────────────── */
nav                        { display:flex; align-items:center; gap:0 }
.nav-item                  { position:relative }
.nav-item > a              { font-family:"Syne",sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--mid); text-decoration:none; padding:.5rem .85rem; border-radius:4px; display:flex; align-items:center; gap:.3rem; transition:color .2s,background .2s; white-space:nowrap }
.nav-item > a:hover        { color:var(--charcoal); background:var(--lime-faint) }
.caret                     { font-size:.55rem; opacity:.5; transition:transform .2s; margin-left:.1rem }
.nav-item:hover > a .caret { transform:rotate(180deg) }
.dropdown                  { position:absolute; top:100%; left:0; background:var(--white); border:1px solid var(--border); border-radius:6px; min-width:248px; box-shadow:0 8px 32px rgba(0,0,0,.1); opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .18s,transform .18s; z-index:300; padding-top:8px }
.dropdown::before          { content:""; position:absolute; top:-8px; left:0; right:0; height:8px; background:transparent }
.nav-item:hover .dropdown  { opacity:1; pointer-events:all; transform:translateY(0) }
.dropdown a                { display:block; padding:.6rem 1.1rem; font-family:"Syne",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mid); text-decoration:none; border-bottom:1px solid rgba(0,0,0,.04); transition:background .15s,color .15s }
.dropdown a:last-child     { border-bottom:none }
.dropdown a:hover          { background:var(--lime-faint); color:var(--lime-dark) }
.nav-cta > a               { background:var(--lime)!important; color:var(--charcoal)!important; font-weight:700!important; margin-left:.5rem!important; padding:.5rem 1.2rem!important }
.nav-cta > a:hover         { background:var(--lime-dark)!important }
.nav-cta .dropdown         { left:auto; right:0 }

/* ── MOBILES MENÜ ───────────────────────────────────────────── */
.mobile-menu-btn                              { display:none; background:none; border:none; cursor:pointer; padding:.4rem; flex-direction:column; gap:4px; z-index:210 }
.mobile-menu-btn span                         { display:block; width:22px; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .3s,opacity .3s }
.mobile-open .mobile-menu-btn span:nth-child(1) { transform:translateY(6px) rotate(45deg) }
.mobile-open .mobile-menu-btn span:nth-child(2) { opacity:0 }
.mobile-open .mobile-menu-btn span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }
.mobile-nav                                   { display:none; position:fixed; inset:0; top:112px; background:var(--white); z-index:190; overflow-y:auto; padding:1.5rem 2rem 4rem; border-top:1px solid var(--border) }
.mobile-open .mobile-nav                      { display:block }
.mobile-nav a                                 { display:block; font-family:"Syne",sans-serif; font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); text-decoration:none; padding:.8rem 0; border-bottom:1px solid var(--border); transition:color .2s }
.mobile-nav a:hover                           { color:var(--lime-dark) }
.mobile-nav .m-sub                            { padding-left:1.2rem; font-size:.75rem; color:var(--muted) }
.mobile-nav .m-sep                            { font-family:"Syne",sans-serif; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-dark); padding:.9rem 0 .2rem; border-bottom:none; cursor:default; display:block }

/* ── PAGE HERO ──────────────────────────────────────────────── */
.page-hero       { background:var(--beige); border-bottom:1px solid var(--border); padding:3.5rem 2rem; position:relative; overflow:hidden }
.page-hero-grid  { position:absolute; inset:0; background-image:linear-gradient(rgba(141,198,63,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(141,198,63,.07) 1px,transparent 1px); background-size:50px 50px; pointer-events:none }
.page-hero-inner { max-width:1360px; margin:0 auto; position:relative; z-index:2 }
.eyebrow         { font-family:"Syne",sans-serif; font-size:.67rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--lime-dark); display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem }
.eyebrow::before { content:""; width:22px; height:2px; background:var(--lime); border-radius:2px; flex-shrink:0 }
.page-title      { font-family:"Syne",sans-serif; font-weight:800; font-size:clamp(1.8rem,3.5vw,3rem); letter-spacing:-.02em; line-height:1.05; color:var(--charcoal); margin-bottom:.75rem; animation:fadeup .6s ease both }
.page-subtitle   { font-size:.97rem; line-height:1.8; color:var(--mid); max-width:640px; font-weight:300; animation:fadeup .7s ease .1s both }
.breadcrumb      { font-family:"Syne",sans-serif; font-size:.63rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.breadcrumb a    { color:var(--muted); text-decoration:none; transition:color .2s }
.breadcrumb a:hover { color:var(--lime-dark) }
.breadcrumb .sep { opacity:.4 }

/* ── SIDEBAR (gemeinsam) ────────────────────────────────────── */
.sidebar          { display:flex; flex-direction:column; gap:1.25rem }
.sidebar-card     { background:var(--beige); border:1px solid var(--border); border-radius:8px; overflow:hidden }
.sc-head          { background:var(--lime); padding:.8rem 1.2rem; font-family:"Syne",sans-serif; font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal) }
.sc-contact-body  { padding:1.2rem }
.sc-body          { padding:1.2rem }
.sc-row           { display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.85rem }
.sc-row:last-child { margin-bottom:0 }
.sc-icon          { width:28px; height:28px; background:var(--white); border:1px solid var(--border); border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem }
.sc-icon svg      { width:12px; height:12px; stroke:var(--lime-dark); stroke-width:2; fill:none }
.sc-lbl           { font-family:"Syne",sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.1rem }
.sc-val           { font-size:.8rem; color:var(--charcoal); line-height:1.6 }
.sc-val a         { color:var(--charcoal); text-decoration:none; transition:color .15s }
.sc-val a:hover   { color:var(--lime-dark) }

/* ── SIDEBAR NAV (qm.js / equipment.js) ────────────────────── */
.qm-nav              { list-style:none }
.qm-nav li a         { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.2rem; font-family:"Syne",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); text-decoration:none; border-bottom:1px solid var(--border); transition:color .15s,background .15s }
.qm-nav li:last-child a { border-bottom:none }
.qm-nav li a:hover,
.qm-nav li a.active  { color:var(--lime-dark); background:var(--lime-faint) }
.nav-list            { list-style:none; display:flex; flex-direction:column }
.nav-list li a       { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.2rem; font-family:"Syne",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mid); text-decoration:none; border-bottom:1px solid var(--border); transition:color .15s,background .15s }
.nav-list li:last-child a { border-bottom:none }
.nav-list li a:hover,
.nav-list li a.active { color:var(--lime-dark); background:var(--lime-faint) }
.nav-card            { background:var(--white); border:1px solid var(--border); border-radius:8px; overflow:hidden }

/* ── EQUIPMENT SEITEN (content + main-content) ──────────────── */
.content              { max-width:1360px; margin:0 auto; padding:4rem 2rem; display:grid; grid-template-columns:1fr 340px; gap:4rem; align-items:start }
.main-content h2      { font-family:"Syne",sans-serif; font-weight:700; font-size:1.1rem; color:var(--charcoal); margin:2rem 0 .6rem; padding-top:1.5rem; border-top:1px solid var(--border) }
.main-content h2:first-child { border-top:none; padding-top:0; margin-top:0 }
.main-content p       { font-size:.93rem; line-height:1.85; color:var(--mid); margin-bottom:.9rem }
.main-content ul      { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 1.2rem }
.main-content ul li   { display:flex; align-items:flex-start; gap:.75rem; font-size:.9rem; line-height:1.6; color:var(--mid) }
.main-content ul li::before { content:""; width:6px; height:6px; background:var(--lime); border-radius:50%; flex-shrink:0; margin-top:.55rem }
.main-content strong  { color:var(--charcoal); font-weight:600 }

/* ── CTA BUTTON ─────────────────────────────────────────────── */
.cta-btn        { display:inline-flex; align-items:center; gap:.5rem; background:var(--lime); color:var(--charcoal); font-family:"Syne",sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.85rem 1.8rem; border-radius:4px; transition:background .2s,transform .15s }
.cta-btn:hover  { background:var(--lime-dark); color:var(--white); transform:translateY(-1px) }

/* ── FOOTER — footer.js injiziert vollständiges Layout + CSS ── */

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1000px) {
  nav               { display:none }
  .mobile-menu-btn  { display:flex }
}
@media (max-width:900px) {
  .content          { grid-template-columns:1fr }
  .sidebar          { order:-1 }
}
@media (max-width:600px) {
  .topbar           { display:none }
  .mobile-nav       { top:76px }
  .page-hero        { padding:2rem 1.25rem }
  .content          { padding:2.5rem 1.25rem }
}