/* GUSS Solutions: responsive Erweiterung, Inhalte und Corporate Design bleiben erhalten. */
:root{--red-d:var(--red-dark,#b30014)}
html{scroll-padding-top:112px}
.wrap{width:min(calc(100% - clamp(32px,4vw,64px)),var(--wrap,1320px))}
.hero-grid>*,.split>*,.sec-head>*,.contact-in>*,.contact-grid>*,.facts-in>*,.cards>*,.certs>*,.foot>*{min-width:0}
.prose,.prose a,.form-direkt,.card-facts,.contact-box{overflow-wrap:anywhere}
.hero h1,.pagehead h1,.contact h2{hyphens:auto}
.btn,.burger{min-height:44px}
a:focus-visible,button:focus-visible{outline:3px solid #e2001a77;outline-offset:4px}
.nav a{min-height:44px;justify-content:center;white-space:nowrap}
.top-in{gap:clamp(14px,2vw,28px)}
.top-in>a:first-child{flex-shrink:0}
.top .btn{white-space:nowrap;flex-shrink:0}
.top .btn,.top .burger{z-index:60}
.top.small .top-in{height:80px}
.hero-fig img{object-position:50% 50%}
.quote{grid-template-columns:120px minmax(0,1fr)}
.quote img,.founder img{height:auto!important;object-fit:contain!important;aspect-ratio:auto;max-width:100%;background:#f4f5f3}
.quote img{width:120px}
.founder{grid-template-columns:112px minmax(0,1fr)}
.founder img{width:112px}
/* Beide Wechseltexte bestimmen die Breite, damit auf Touch und beim Hover nichts abgeschnitten wird. */
.btn .swap{display:inline-grid;vertical-align:middle;height:1.24em}
.btn .swap i{grid-area:1/1;white-space:nowrap}
.btn .swap i+i{position:static;transform:translateY(100%)}
.btn:hover .swap i:first-child,.btn:focus-visible .swap i:first-child{transform:translateY(-100%)}
.btn:hover .swap i+i,.btn:focus-visible .swap i+i{transform:translateY(0)}
.form input,.form textarea,.form select{font-size:16px;min-height:48px}
.form textarea{min-height:180px}
.form-hinweis{overflow-wrap:anywhere}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
.menu-backdrop{display:none}
@media(min-width:1200px){
  .nav{position:static;display:flex;transform:none;visibility:visible;height:auto;width:auto;box-shadow:none;padding:0;gap:6px}
  .nav a{font-size:14px;padding:9px 13px}
  .burger{display:none}
  .top .btn{font-size:13.5px;padding:13px 16px}
  .hero-grid{grid-template-columns:1.02fr 1fr;align-items:stretch}
}
@media(max-width:1199px){
  .burger{display:flex;margin-left:0}
  .top .btn{margin-left:auto}
  /* display:none statt eines ausgelagerten Panels: keine horizontale Scrollfläche. */
  .top .nav{display:none!important;position:absolute;top:0;right:0;width:min(420px,90vw);height:100vh;height:100dvh;transform:none;
    padding:calc(94px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:10px;background:white;
    z-index:55;box-shadow:-20px 0 60px -30px #12171c66}
  .top .nav.open{display:flex!important;animation:guss-menu-in .22s cubic-bezier(.2,.7,.2,1)}
  .top .nav a{width:100%;font-size:17px;padding:14px 20px;margin:0;min-height:52px;border:0;justify-content:flex-start}
  .top .nav a.active{background:var(--red);color:white}
  .menu-backdrop.open{display:block;position:fixed;inset:0;z-index:45;background:#12171c66;border:0;padding:0;cursor:pointer}
  html.guss-menu-open,html.guss-menu-open body{overflow:hidden}
  .pagehead{padding-top:clamp(48px,7vw,86px)}
  .vlabel{font-size:9px;left:16px;top:18px}
}
@keyframes guss-menu-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
/* Tablet quer und kleine Notebooks: wieder ein ausgewogenes Split-Hero. */
@media(min-width:900px) and (max-width:1199px){
  .hero-grid{grid-template-columns:.92fr 1.08fr;gap:30px}
  .hero-fig{min-height:440px}
  .hero h1{font-size:clamp(34px,3.8vw,43px)}
  .hero .lead{font-size:16px;margin-top:20px;line-height:1.7}
  .hero-cta{margin-top:24px;gap:16px}
  .quote{grid-template-columns:96px minmax(0,1fr);gap:16px;margin-top:26px;padding-top:22px}
  .quote img{width:96px}
  .quote blockquote{font-size:15px}
  .facts-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts-in div{border-bottom:0;border-right:1px solid var(--line);padding:24px}
  .facts-in div:first-child{padding-left:0}
  .facts-in div:not(:first-child){padding-left:24px}
  .facts b{font-size:25px}
  .cards,.certs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card-body,.cert{padding:22px}
  .cert{gap:12px}.cert h3{font-size:17px}
  .split,.sec-head,.contact-in{grid-template-columns:1fr 1fr;gap:30px}
}
/* Tablet hochkant: kompakter Bildblock, zweispaltige Karten. */
@media(min-width:601px) and (max-width:899px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-fig{min-height:0;height:clamp(300px,44vw,390px)}
  .hero-txt{max-width:760px}
  .hero h1{font-size:clamp(36px,5vw,46px)}
  .hero .lead{max-width:none}
  .cards,.certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head,.split,.contact-in,.contact-grid{grid-template-columns:1fr;gap:24px}
  .quote{grid-template-columns:112px minmax(0,1fr)}.quote img{width:112px}
  .film-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}
/* Handy: gut lesbar, vollständiges Porträt, große Touch-Flächen. */
@media(max-width:600px){
  html{scroll-padding-top:90px}
  .top-in,.top.small .top-in{height:78px;gap:10px}
  .top img,.top.small img{height:auto;width:clamp(115px,36vw,152px);max-width:100%}
  .top .btn{font-size:13px;min-height:44px;padding:11px 14px}
  .top .btn .swap i{font-size:0}
  .top .btn .swap i:first-child::after{content:"Kontakt";font-size:13px}
  .top .btn .swap i+i{display:none}
  .top .btn .swap i:first-child{transform:none!important}
  .top .btn .arrow{display:none}
  .burger{width:44px;height:44px}
  .hero{padding-top:24px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-fig{height:clamp(245px,72vw,360px);min-height:0}
  .hero h1,.pagehead h1{font-size:clamp(30px,8.6vw,40px);line-height:1.12}
  .hero h1{margin-top:18px}
  .hero .lead{margin-top:20px;font-size:16px;line-height:1.7}
  .eyebrow span{font-size:9px;letter-spacing:.13em}
  .hero-cta{gap:14px;margin-top:24px}
  .hero-note{max-width:none;font-size:14px}
  .quote{grid-template-columns:92px minmax(0,1fr)!important;gap:16px;margin-top:28px;padding-top:22px}
  .quote img{width:92px;height:auto!important}
  .quote blockquote{font-size:14px;line-height:1.6}
  .quote cite{font-size:12px}
  .founder{grid-template-columns:92px minmax(0,1fr);gap:16px}
  .founder img{width:92px}
  .founder blockquote{font-size:14px}
  .sec{padding-top:64px}
  .sec-head{display:block;margin-bottom:28px}
  .sec-head .lead{margin-top:18px;font-size:16px}
  .sec-head h2,.split h2,.contact h2{font-size:clamp(27px,7.5vw,34px);line-height:1.14}
  .cards,.certs,.steps,.contact-in,.contact-grid,.split{grid-template-columns:1fr;gap:24px}
  .card-body{padding:24px}.card-body p,.step p{font-size:16px}
  .cert{padding:22px}.cert p{font-size:15px}.cert a{min-height:44px;display:inline-flex;align-items:center}
  .film-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .film-steps span{padding:12px 10px;gap:7px;font-size:12px}
  .contact{margin-top:64px}.contact-in{padding:48px 0}
  .contact-box{padding:22px}
  .form .row{grid-template-columns:1fr}
  .form button[type=submit]{width:100%;min-height:52px}
  .form label{font-size:11px}
  .pagehead{padding:44px 0 28px}
  .pagehead .lead{font-size:16px}
  .prose h2{font-size:25px}
  .foot{grid-template-columns:1fr;gap:28px;padding-bottom:0}
  .foot img{height:auto;width:min(210px,70%)}
  footer{padding:44px 0 28px}.legal{margin-top:32px}
}
@media(hover:none){
  .btn .swap i:first-child{transform:none!important}
  .btn .swap i+i{transform:translateY(100%)!important}
  .card:hover,.cert:hover{transform:none;box-shadow:none}
  .card:hover .card-img img,.split figure:hover img{transform:none}
}
@media(prefers-reduced-motion:reduce){.top .nav.open{animation:none}}