/* =========================================================
   MR Gebäudetechnik AG · Shared Styles
   ========================================================= */

:root{
  --navy:#0A2540;
  --navy-deep:#061629;
  --anthracite:#1A1F2E;
  --steel:#3A5F8F;
  --steel-light:#5B7DB1;
  --accent:#C9A961;
  --bg:#F6F7F9;
  --bg-soft:#EDF0F4;
  --line:#D7DCE3;
  --line-soft:#E8ECF1;
  --text:#1A1F2E;
  --text-muted:#5A6477;
  --white:#FFFFFF;
  --maxw:1280px;
  --gutter:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:400;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.02em}
.serif{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--steel)}
.eyebrow-light{color:var(--steel-light)}
.eyebrow-light::before{background:var(--steel-light)}
.eyebrow-accent{color:var(--accent)}
.eyebrow-accent::before{background:var(--accent)}

/* TOPBAR */
.topbar{background:var(--navy-deep);color:#A8B2C4;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:10px 0;gap:24px}
.topbar a{color:#CDD4E0;transition:color .2s}
.topbar a:hover{color:var(--white)}
.topbar-left{display:flex;gap:24px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:12px}
.topbar-right{display:flex;gap:18px}
@media(max-width:780px){
  .topbar-left span:nth-child(2),.topbar-left span:nth-child(3){display:none}
  .topbar-right a:last-child{display:none}
  .topbar-inner{padding:8px 0;font-size:12px}
}
@media(max-width:480px){.topbar-left{font-size:11px}}

/* HEADER */
.header{background:var(--navy);color:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.logo{display:flex;align-items:center;gap:14px}
.logo-mark{
  width:44px;height:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text strong{font-family:'Fraunces',serif;font-weight:500;font-size:18px;letter-spacing:-.01em}
.logo-text small{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#A8B2C4;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
nav.main-nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;font-size:14px}
nav.main-nav a{color:#CDD4E0;transition:color .2s;font-weight:500;position:relative;padding:6px 0}
nav.main-nav a:hover,nav.main-nav a.active{color:var(--white)}
nav.main-nav a.active::after,nav.main-nav a:hover::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent)}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 14px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em}
@media(max-width:900px){nav.main-nav{display:none}.menu-toggle{display:block}}
@media(max-width:520px){.logo-text small{display:none}}

/* PAGE HERO (für Unterseiten) */
.page-hero{background:var(--navy);color:var(--white);position:relative;overflow:hidden;padding:clamp(60px,9vw,110px) 0 clamp(50px,7vw,90px)}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 90% 70% at 70% 30%,#000 30%,transparent 75%);pointer-events:none}
.page-hero::after{content:"";position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(91,125,177,.2) 0%,transparent 60%);pointer-events:none}
.page-hero-inner{position:relative;z-index:1}
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-light);margin-bottom:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--steel-light)}
.breadcrumb a:hover{color:var(--white)}
.page-hero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(40px,6vw,72px);line-height:1.04;letter-spacing:-.02em;margin:0 0 24px;max-width:900px}
.page-hero h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.page-hero p.lead{font-size:clamp(16px,1.5vw,19px);color:#C5CDDB;max-width:680px;line-height:1.6;margin:0;font-weight:300}

/* GENERIC SECTION */
.section{padding:clamp(70px,9vw,120px) 0}
.section-soft{background:var(--bg-soft)}
.section-white{background:var(--white)}
.section-navy{background:var(--navy);color:var(--white)}

.section-head{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;margin-bottom:56px;align-items:end}
@media(max-width:800px){.section-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}}
.section-head h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 0;color:var(--navy)}
.section-head h2 em{font-style:italic;color:var(--steel);font-weight:400}
.section-head p{color:var(--text-muted);font-size:17px;line-height:1.65;margin:0}
.section-navy .section-head h2{color:var(--white)}
.section-navy .section-head h2 em{color:var(--accent)}
.section-navy .section-head p{color:#C5CDDB}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:15px;letter-spacing:.01em;border:1px solid transparent;transition:all .25s ease;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--navy-deep)}
.btn-primary:hover{background:#D9B978;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--white)}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
.btn-ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.06)}
.btn-dark{background:var(--navy);color:var(--white)}
.btn-dark:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* FEATURE LIST */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr}}
.feature-item{background:var(--white);padding:36px 32px}
.feature-num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:18px}
.feature-item h3{font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--navy);margin:0 0 12px;letter-spacing:-.01em}
.feature-item p{color:var(--text-muted);margin:0;font-size:15px;line-height:1.65}
.feature-item ul{list-style:none;padding:0;margin:0;color:var(--text-muted);font-size:15px;line-height:1.8}
.feature-item ul li{padding-left:20px;position:relative}
.feature-item ul li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:500}

/* APPLICATION ROW */
.app-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.app-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.app-row{grid-template-columns:repeat(2,1fr)}}
.app-cell{background:var(--white);padding:32px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:background .2s}
.app-cell:hover{background:var(--bg-soft)}
.app-icon{width:48px;height:48px;display:grid;place-items:center;color:var(--steel)}
.app-name{font-family:'Fraunces',serif;font-weight:500;font-size:16px;color:var(--navy);letter-spacing:-.005em}

/* REF MINI (kompakte Projekt-Karten für Sparten-Bezug) */
.ref-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.ref-mini-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ref-mini-grid{grid-template-columns:1fr}}
.ref-mini{background:var(--white);padding:28px 24px;transition:background .2s;display:flex;flex-direction:column;gap:8px}
.ref-mini:hover{background:var(--bg-soft)}
.ref-mini .cat{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.ref-mini .title{font-family:'Fraunces',serif;font-weight:500;font-size:19px;color:var(--navy);letter-spacing:-.01em;line-height:1.25}
.ref-mini .loc{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted)}

/* SPARTEN CROSS-LINK */
.sparten-cross{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}
@media(max-width:760px){.sparten-cross{grid-template-columns:1fr}}
.cross-card{
  background:var(--white);border:1px solid var(--line);padding:36px 32px;
  display:flex;flex-direction:column;gap:14px;transition:all .25s;
  position:relative;overflow:hidden;
}
.cross-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--steel);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.cross-card:hover{border-color:var(--steel);transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(10,37,64,.15)}
.cross-card:hover::before{transform:scaleX(1)}
.cross-cat{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.cross-card h3{font-family:'Fraunces',serif;font-weight:400;font-size:28px;color:var(--navy);margin:0;letter-spacing:-.015em}
.cross-card p{color:var(--text-muted);font-size:15px;line-height:1.65;margin:0;flex-grow:1}
.cross-link{color:var(--navy);font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--navy);padding-bottom:4px;align-self:flex-start}

/* CTA */
.cta-block{background:var(--white);text-align:center;padding:clamp(70px,9vw,120px) 0;border-top:1px solid var(--line-soft)}
.cta-block .eyebrow{justify-content:center}
.cta-block h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(32px,4.5vw,54px);line-height:1.05;letter-spacing:-.02em;margin:20px auto 24px;max-width:720px;color:var(--navy)}
.cta-block h2 em{font-style:italic;color:var(--steel);font-weight:400}
.cta-block p{color:var(--text-muted);font-size:17px;max-width:540px;margin:0 auto 36px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* FOOTER */
footer{background:var(--navy-deep);color:#A8B2C4;padding:80px 0 32px;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px;margin-bottom:48px}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-col h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 20px;font-weight:500}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-col a{color:#A8B2C4;transition:color .2s}
.foot-col a:hover{color:var(--white)}
.foot-brand p{font-size:14px;line-height:1.7;color:#A8B2C4;margin:0}
.foot-brand .logo{margin-bottom:24px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5A6477;letter-spacing:.05em}
.foot-bottom a{color:#A8B2C4}