/* Markenadaption auf Basis des bestehenden Matthias-Moser-Logos */
:root{
  --green:#005c99;
  --green-2:#0b6ea8;
  --ink:#183143;
  --cream:#f5f7f8;
  --white:#ffffff;
  --sage:#dceaf2;
  --line:rgba(0,92,153,.2);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",Arial,sans-serif;
}

body{background:#fff;color:var(--ink)}
h1,h2,h3,.contact-main{font-family:var(--serif);font-weight:400}
.eyebrow{color:var(--green);letter-spacing:.22em}

/* Logoaufbau: Wortmarke plus gerahmtes M */
.brand{gap:13px;color:inherit}
.brand-words{display:grid!important;gap:3px!important;font-family:var(--serif);text-transform:uppercase;letter-spacing:.08em;line-height:1!important}
.brand-words strong{font-size:19px!important;font-weight:400}
.brand-words small{font-size:10px!important;letter-spacing:.18em}
.brand-monogram{width:42px;height:42px;border:1px solid currentColor;display:grid!important;place-items:center;font-family:var(--serif);font-size:31px;line-height:1}
.site-header{border-bottom-color:rgba(255,255,255,.38)}
.nav-cta{border-radius:0;border-color:currentColor}

.hero-bg{background-image:url('../assets/images/hero-sonnenkopf.webp');background-position:center 44%}
.hero-shade{background:linear-gradient(90deg,rgba(0,38,65,.93) 0%,rgba(0,55,91,.72) 38%,rgba(0,50,84,.16) 72%),linear-gradient(0deg,rgba(0,35,60,.42),transparent 50%)}
.hero h1,.contact h2{letter-spacing:-.035em}
.hero h1 em,.contact h2 em{font-style:normal;color:#d8edf7}
.button{border-radius:0;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.button-light{background:#fff;color:#005c99;border:1px solid #fff}
.hero-meta{border-top:1px solid rgba(255,255,255,.32);padding-top:20px}

.intro{position:relative;background:#fff}
.intro::after{content:"M";position:absolute;right:4vw;top:65px;font-family:var(--serif);font-size:240px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(0,92,153,.08);pointer-events:none}
.intro h2,.section-head h2,.about h2,.why h2{color:#005c99;letter-spacing:-.025em}

.services{background:#f0f6f9;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-grid{background:#fff}
.service-card{transition:background .25s,color .25s}
.service-card:hover{background:#005c99;color:#fff}
.service-card:hover p,.service-card:hover .number{color:#d9eaf3}
.service-card:hover svg{stroke:#fff}

.about{background:#fff}
.about-image::before{content:"";position:absolute;inset:-15px 15px 15px -15px;border:1px solid #005c99;z-index:0}
.about-image img{position:relative;z-index:1}
.about-image img{object-position:72% center}
.image-note{z-index:2;background:#005c99;border-radius:0;border:1px solid #fff}
.facts{border-color:var(--line)}

.projects{background:#004d80}
.projects .section-head h2{color:#fff}
.gallery-item{background:#00395f;border:1px solid rgba(255,255,255,.22)}
.gallery-item span{background:#fff;color:#005c99;text-shadow:none;padding:7px 10px;left:0;bottom:0}
.gallery-real{grid-template-columns:1.2fr .8fr 1fr;grid-template-rows:270px 270px}
.gallery-real .gallery-feature{grid-row:1/3}
.gallery-real .gallery-portrait{grid-row:1/3;grid-column:2}

.why{background:#f8fafb}
.reason-list article>span{width:37px;height:37px;border:1px solid #005c99;display:grid;place-items:center;color:#005c99}
.reason-list h3{color:#005c99}

.contact{background:#005c99;position:relative;overflow:hidden}
.contact::after{content:"M";position:absolute;left:45%;bottom:-130px;font-family:var(--serif);font-size:520px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);pointer-events:none}
.contact-grid{position:relative;z-index:1}
.contact-card{background:#fff;border:1px solid rgba(0,92,153,.15)}
.button-cream{background:#005c99}

.site-footer{background:#003a61}
.footer-brand{width:max-content}
.footer-label,.footer-bottom{color:#a8c9dc}
.legal-header{background:#005c99}
.legal-note{background:#edf5f9;border-color:#005c99}

@media(max-width:900px){.main-nav{background:#005c99}.gallery-real{grid-template-columns:1fr 1fr;grid-template-rows:290px 290px 240px}.gallery-real .gallery-feature{grid-row:1/3;grid-column:1}.gallery-real .gallery-portrait{grid-row:1/3;grid-column:2}}
@media(max-width:600px){
  .brand-words strong{font-size:15px!important}.brand-words small{font-size:8px!important}.brand-monogram{width:35px;height:35px;font-size:26px}
  .hero-bg{background-position:64% center}.intro::after{font-size:140px;top:30px}.about-image::before{inset:-8px 8px 8px -8px}.contact::after{display:none}
  .gallery-real{grid-template-columns:1fr;grid-template-rows:360px 440px 240px 240px}.gallery-real .gallery-feature,.gallery-real .gallery-portrait{grid-row:auto;grid-column:auto}
}