/* SUAG AG: Farbwelt der Homepage und das geometrische Muster der Drucksachen. */
:root{--navy:#0b2237;--dark:#081b2c;--gold:#c69b50;--gold2:#d8b777;--sand:#f4f0e7;--paper:#fffbf3;--ink:#102238;--muted:#52616c}
body{background:var(--paper)}
.masthead{background:linear-gradient(101deg,#06192b 0%,#0a2338 31%,#21394b 44%,#78818a 58%,#eee9df 71%,#fffaf0 100%);position:relative;overflow:hidden}
.site-header{max-width:1440px;padding:27px 5.2% 12px;position:relative;z-index:3}
.wordmark b{color:#fff;font-family:"Univers","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:25px;font-weight:500;letter-spacing:.16em;white-space:nowrap}
.site-nav{align-items:center;display:flex;gap:clamp(18px,3.1vw,48px);font-size:14px;font-weight:600}
.site-nav a{border-bottom:1px solid transparent;color:var(--dark);padding:9px 0;white-space:nowrap}
.site-nav a:hover,.site-nav a:focus-visible{border-color:var(--gold)}
.hero{display:block;margin:auto;max-width:1440px;min-height:620px;padding:120px 5.2% 74px;position:relative}
.hero-copy{max-width:990px;position:relative;z-index:2}
.hero .kicker{color:#e1c07e;letter-spacing:.18em;margin-bottom:28px;text-shadow:0 1px 8px #06192b66}
.hero h1{color:#fff;font-size:clamp(46px,4vw,60px);font-weight:400;letter-spacing:-.045em;line-height:1.07;text-shadow:0 2px 20px #06192b9a}
.hero h1 em{color:#fff;font-style:normal;font-weight:400;letter-spacing:-.035em;margin-top:7px}
.hero h1 em:after{background:var(--gold2);content:"";display:block;height:4px;margin-top:27px;width:64px}
.hero .lead{color:#fff;font-size:clamp(17px,1.35vw,20px);line-height:1.65;margin:23px 0 0;max-width:640px;text-shadow:0 1px 12px #06192b88}
.hero .actions{margin-top:31px}
.hero .button.primary{background:#071b2aa8;border:1px solid var(--gold2);color:var(--gold2);gap:28px;letter-spacing:.06em;min-height:55px;padding:0 24px}
.hero .button.primary:hover{background:var(--gold2);color:var(--dark)}
.hero .button.primary span{font-size:26px;font-weight:300;line-height:1}
.hero .proof{color:#fffbdc;gap:10px 20px;margin-top:36px;opacity:.92;text-shadow:0 1px 8px #06192baa}
.hero .proof span:before{border-color:var(--gold2)}
.hero .visual{background:transparent url("suag-rautenmuster.png") center center / min(58vw,840px) auto no-repeat;inset:0 -8% 0 48%;min-height:0;padding:0;pointer-events:none;position:absolute}
.hero .visual:after{display:none}
.intro{background:var(--paper);border-top:1px solid #c9bda8;color:var(--ink);overflow:hidden;position:relative}
.intro:before{background:url("suag-rautenmuster.png") right center / 680px auto no-repeat;content:"";inset:0 0 0 48%;opacity:.18;pointer-events:none;position:absolute}
.intro>*{position:relative}
.intro .kicker{color:#9b6d2e}
.intro .statement,.intro span{color:#40515f}
#angebot{background:#f8f4ec;position:relative}
#angebot .heading h2{color:var(--dark)}
.card{background:#fffdf8;border-color:#cfc6b7}
.card+.card{border-left:0}
.card.featured{background:#f1eade}
.method{background:linear-gradient(120deg,#071a2c,#12334a)}
.principles{background:#f5f0e7}
.profile{background:#fffdf8}
.contact{background:linear-gradient(120deg,#071a2c,#112e43)}
@media(max-width:1100px){.site-nav{background:#fffaf0d9;border-radius:2px;gap:20px;padding:0 13px}.hero{min-height:590px}.hero .visual{inset:0 -18% 0 49%;background-size:700px auto}.hero-copy{max-width:720px}}
@media(max-width:760px){.masthead{background:#091f32}.site-header{align-items:flex-start;flex-direction:column;gap:17px;padding:25px 22px 0}.site-nav{background:none;flex-wrap:wrap;gap:5px 19px;padding:0}.site-nav a{color:#f4efe5;font-size:12px;padding:6px 0}.wordmark b{font-size:22px}.hero{min-height:0;padding:64px 22px 0}.hero-copy{max-width:100%}.hero h1{font-size:clamp(41px,8.5vw,62px)}.hero .lead{font-size:17px}.hero .proof{margin-bottom:51px}.hero .visual{background-color:var(--paper);background-position:center center;background-size:min(110vw,580px) auto;border-top:1px solid #cbbba0;display:block;height:220px;inset:auto -22px auto -22px;position:relative}.intro:before{inset:0 0 0 18%;opacity:.1}.card+.card{border-left:1px solid #cfc6b7}}
@media(max-width:420px){.hero h1{font-size:39px;overflow-wrap:break-word}.hero .proof{font-size:10px}.hero .visual{height:185px}}