/*
Responsive-Layer.
Das Ausgangsdesign war rein fuer Desktop ausgelegt (keine Media Queries).
Diese Datei ergaenzt ein sinnvolles, robustes Verhalten fuer Tablet und
Smartphone sowie das mobile Navigationsmenue.
*/

/* Mobile-Menu-Button (auf Desktop ausgeblendet) */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line2);border-radius:10px;background:var(--card);cursor:pointer;color:var(--ink);flex:none}
.nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mobile-menu{display:none;flex-direction:column;padding:10px 40px 20px;border-bottom:1px solid var(--line);background:rgba(245,247,249,.98)}
.mobile-menu a{padding:13px 0;font-size:16px;font-weight:500;color:#474e55;border-bottom:1px solid var(--line)}
.mobile-menu a.is-active{color:var(--blue-ink)}
.mobile-menu .btn{margin-top:16px;justify-content:center}

/* ===== Tablet ===== */
@media (max-width:1040px){
	.wrap,.nav,.ph-in,.ls-hero-in,.endcta-in,.ft-top,.ft-bottom{padding-left:28px;padding-right:28px}
	.hhero-in{grid-template-columns:1fr;gap:36px;padding:44px 0 50px}
	.h1{font-size:48px}
	.sub-h{max-width:none}
	.lzc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
	.cx{grid-template-columns:1fr}
	.cx-side{grid-template-rows:auto;grid-template-columns:1fr 1fr}
	.flow{grid-template-columns:repeat(2,1fr);gap:34px 30px}
	.qz-grid{grid-template-columns:1fr 1fr}
	.ls-index{grid-template-columns:repeat(3,minmax(0,1fr))}
	.ls-grid,.lz,.story,.cv2,.cbody,.contact,.pz-lead-row{grid-template-columns:1fr;gap:34px}
	.lhead,.lz-head,.ls-headc,.cside,.lz-row .lz-arr{position:static}
	.cases,.igrid,.principles,.expect,.cxg,.qz-grid,.steps,.cstat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ft-top{grid-template-columns:1fr 1fr}
	.lblock{grid-template-columns:1fr;gap:26px}
}

/* ===== Mobile ===== */
@media (max-width:720px){
	.nav-links,.nav-cta{display:none}
	.nav-toggle{display:flex}
	.wrap,.nav,.ph-in,.ls-hero-in,.endcta-in,.ft-top,.ft-bottom,.mobile-menu{padding-left:18px;padding-right:18px}
	.sec,.ls-panel{padding:48px 0}
	.h1{font-size:38px}
	.h2,.ls-t,.cxsub h2{font-size:29px}
	.page-h1,.ls-h1{font-size:34px}
	.mini-stats{gap:22px;flex-wrap:wrap}
	.lzc-grid,.cx-side,.flow,.qz-grid,.ls-index,.cases,.igrid,.principles,.expect,.cxg,.steps,.cstat-row,.quotes{grid-template-columns:1fr}
	.frow{grid-template-columns:1fr}
	.srow{grid-template-columns:auto 1fr auto;gap:14px}
	.pstep{grid-template-columns:1fr;gap:12px}
	.pstep .big{font-size:44px}
	.pz-step{grid-template-columns:48px 1fr;gap:16px}
	.pz-node{width:48px;height:48px;border-radius:14px}
	.tl{grid-template-columns:64px 1fr;gap:14px}
	.xp-sum{margin-left:0;flex-direction:column;align-items:flex-start;gap:12px}
	.endcta-in{flex-direction:column;align-items:flex-start}
	.endcta h2{font-size:32px}
	.form{padding:20px}
	.qz-feat{padding:28px 22px}
	.qz-feat p{font-size:21px}
	.qz-mark{font-size:110px}
}