/* ============================================================
   Institut Heidger KG — Equipment Pages Shared Stylesheet
   Applies to: equipment_*.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);
}

/* ── ANIMATIONS ── */
@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 }

/* ── LANGUAGE TOGGLE ── */
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) }

/* ── 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 }
.breadcrumb a     { color:var(--muted); text-decoration:none; transition:color .2s }
.breadcrumb a:hover { color:var(--lime-dark) }
.breadcrumb span.sep { opacity:.4 }

/* ── CONTENT LAYOUT ── */
.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-btn              { background:var(--lime); color:var(--charcoal); font-family:"Syne",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.8rem 1.8rem; border-radius:4px; display:inline-block; transition:background .2s, transform .15s; margin-top:1.5rem }
.cta-btn:hover        { background:var(--lime-dark); transform:translateY(-2px) }

/* ── SIDEBAR ── */
.sidebar              { display:flex; flex-direction:column; gap:1.25rem }
.sidebar-card         { background:var(--white); border:1px solid var(--border); border-radius:8px; overflow:hidden }
.sidebar-card-head    { background:var(--lime); padding:.85rem 1.2rem; font-family:"Syne",sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal) }
.sidebar-card-body    { padding:1.2rem }
.sidebar-card-body p  { font-size:.82rem; line-height:1.7; color:var(--mid) }

/* ── SIDEBAR NAV ── */
.nav-list             { list-style:none; display:flex; flex-direction:column }
.nav-link             { display:flex; align-items:center; justify-content:space-between; padding:.6rem .75rem; font-family:"Syne",sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mid); text-decoration:none; border-radius:4px; transition:background .15s, color .15s }
.nav-link:hover,
.nav-link.active      { background:var(--lime-faint); color:var(--lime-dark) }
.nav-link.active      { font-weight:700 }
.nav-link .arr        { opacity:.35; font-size:.75rem; flex-shrink:0; margin-left:.4rem }
.nav-link:hover .arr,
.nav-link.active .arr { opacity:1 }

/* ── SIDEBAR CONTACT ── */
.contact-row          { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.9rem }
.contact-row:last-of-type { margin-bottom:0 }
.contact-icon         { width:32px; height:32px; background:var(--beige-dark); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.contact-icon svg     { width:14px; height:14px; stroke:var(--lime-dark); stroke-width:2; fill:none }
.contact-lbl          { font-family:"Syne",sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.1rem }
.contact-val          { font-size:.82rem; color:var(--charcoal); line-height:1.5 }
.contact-val a        { color:inherit; text-decoration:none }
.contact-val a:hover  { color:var(--lime-dark) }

/* ── FOOTER ── */
footer          { background:var(--beige-dark); border-top:1px solid var(--border); padding:2rem; text-align:center; font-family:"Syne",sans-serif; font-size:.63rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
footer a        { color:var(--muted); text-decoration:none; margin:0 .75rem; transition:color .2s }
footer a:hover  { color:var(--lime-dark) }

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

/* ── SHARED HEADER NAV (alle Unterseiten) ── */
header                { background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200 }
.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) }

/* 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) }

/* 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 > .caret,
.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 }

/* Mobile nav */
.mobile-menu-btn      { display:none;background:none;border:none;cursor:pointer;padding:.4rem;flex-direction:column;gap:4px }
.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:76px;background:var(--white);z-index:190;overflow-y:auto;padding:1.5rem 2rem }
.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) }

/* Animations (if not already defined) */
@keyframes hpulse     { 0%,100%{opacity:.5} 50%{opacity:1} }

@media(max-width:1000px) {
  nav                 { display:none }
  .mobile-menu-btn    { display:flex }
}
@media(max-width:600px) {
  .topbar             { display:none }
}